506 Sale & Bulk Discount App

506 Sale & Bulk Discount App

Widgets & Banners

Banner Design: Templates, CTA Button, and Styling

Design announcement banners: Timer vs Text templates, theme presets, CTA button, colors, fonts, and padding.

Last updated on 03 Jul, 2026

Once you've created an announcement banner, you can control exactly how it looks: which template it uses, whether it shows a countdown, whether it has a clickable button, and its colors, font sizes, and padding. This article walks through every design control on the banner editor.

Looking for how to create, save, publish, or enable a banner via the theme app embed? See the separate article on creating and publishing a banner. This article only covers the design and styling options on that same editor screen.

Before you start

Banner design controls are split across two plan tiers:

  • Basic plan and up — you can choose a Timer or Text template, set the banner title, and (for Timer banners) set a start/end schedule.

  • Standard plan and up (the customBanners feature) — unlocks the full design toolkit: theme presets, background/text/button colors, font sizes, the CTA button on/off toggle and its text/link, and top/bottom padding.

If you're on Basic, the Banner colors and font sizes, Placement settings, and CTA fields will show a lock icon. Clicking it opens an upgrade prompt — the rest of this article still explains what each locked control does so you know what you're missing.

Choosing a banner template: Timer vs Text

The Template dropdown in the Banner type card controls the banner's layout:

  • Timer — shows your title plus a live days/hours/minutes/seconds countdown, and requires a start and end schedule.

  • Text — shows just your title (and optional CTA button), with no countdown and no schedule. It stays live continuously once published, until you unpublish or delete it.

To switch templates:

  1. Open the banner in Banners → Create or Edit.

  2. In the Banner type card, select Timer or Text from the Template dropdown.

A couple of behaviors worth knowing:

  • If you haven't customized your title yet, switching templates swaps in that template's default title text (⌛ Sale ends in: for Timer, 🔥 shop our sale now 🔥 for Text). If you've already typed your own title, switching templates leaves it untouched.

  • Switching to Timer reveals a Timer Labels card (Days/Hours/Mins/Secs labels) and the schedule fields described below; switching to Text hides both.

Applying a theme preset or resetting to default

Instead of picking colors one at a time, you can apply a ready-made Theme Template — a bundled combination of background, title, countdown, label, and CTA button colors plus matching title/CTA copy.

  1. In the Banner type card, open the Theme Templates dropdown (requires the Standard plan or higher).

  2. Pick a preset. Available presets include Frostbyte, Midnight Signal, Clean Canvas, Olive Grove, Sunset Rush, Pumpkin Pop, Luxury Gold, and Pastel Pulse.

  3. The preset immediately updates your banner's colors, title text, and CTA button text in the live preview at the top of the page. It does not overwrite your CTA link — your own link is kept.

Some presets are built for the Timer template and others for Text — pick the template first, then a preset that suits it, since a preset doesn't switch your template for you.

Resetting to default: click Default Theme (next to the Theme Templates dropdown) at any time to revert colors to GetSale's built-in neutral defaults. Unlike the preset dropdown, this button is available on every plan, and it doesn't touch your title or CTA text/link.

Note that manually changing any color, font size, title, or CTA text after applying a preset clears the preset selection back to "Custom" — GetSale doesn't keep tracking which preset you started from once you've edited it by hand.

Adding a call-to-action button: text, link, and URL validation

The CTA button lives in the Banner text card, next to the title field, and is part of the customBanners feature set (Standard plan and up). On Basic, the CTA fields are locked — new banners are created with a default Shop Now button linking to your store's homepage, and it can't be disabled or edited from the banner editor until you upgrade.

On Standard and Unlimited:

  1. Set CTA to Enable or Disable.

  2. If enabled, fill in:

    • CTA Text — up to 15 characters (a live character count is shown).

    • CTA Link — the URL customers land on when they click the button. It defaults to your store's own address; if you leave it as-is, a helper note confirms "this is your own store's address."

  3. Save.

URL validation: the CTA Link must be a complete, valid http:// or https:// URL (for example https://yourstore.com/collections/sale). A relative path like /collections/sale or a bare domain without the protocol will trigger a "Please enter a valid CTA Link" error, and the banner can't be saved until it's fixed. The live preview also hides the button entirely if the link isn't valid, so if your CTA disappears from the preview, check the link field first.

If you disable the CTA, GetSale silently falls back to "Shop Now" linked to your store's homepage in the saved record — but since the button is turned off, nothing renders on the storefront.

Customizing colors and font sizes (customBanners plan feature)

The Banner colors and font sizes card is fully gated behind the customBanners feature (Standard plan and up). It gives you:

  • Background color — the banner bar's background.

  • CTA Button color — the button's fill color (only shown when the CTA is enabled).

  • Title color + font size — always available.

  • Labels and Countdown color + font size — Timer template only.

  • CTA Text color + font size — only when the CTA is enabled.

To change a color, click its color swatch to open the color picker, adjust it, and close the popover — the hex code is shown in a tooltip on hover. To change a font size, type a pixel value directly into that element's font size field.

Font sizes are validated as you type:

  • A value of 0 or blank shows "Enter a valid px" and blocks saving.

  • Values above 35px are rejected with "The maximum allowed size is 35px" — the field simply won't accept anything higher.

Adjusting top/bottom padding and placement

The Placement settings card controls the vertical breathing room inside the banner bar, and is also gated behind customBanners (Standard plan and up):

  • Top padding and Bottom padding, both in pixels.

  • Valid range is 0–999px; entering more than 999 shows "The maximum allowed size is 999px" and the value won't be accepted.

This only affects spacing within the banner itself (the gap above/below your title, countdown, and CTA button) — it doesn't move the banner's position on the page. Where the banner appears on your storefront (top of page, sticky, etc.) is controlled by the theme app embed settings covered in the companion article on publishing banners.

Scheduling a timer-template banner's start and end time

The Schedule section only appears in the Banner type card when your template is set to Timer — Text banners have no schedule and simply run continuously once published.

  1. Set Start date and Start time — shown in your store's timezone.

  2. Set End date and End time — also shown in your store's timezone.

  3. Save.

Validation rules to keep in mind:

  • The end time must be later than the current time in your store's timezone — you can't schedule a countdown that's already expired.

  • The end time must be after the start time; setting them to the exact same date and time returns "Start time and end time should be greater than 5 minutes apart."

Once the countdown reaches its end time, the Timer banner stops counting down; if you need the sale to keep running, edit the schedule and extend the end time before it lapses.

Troubleshooting and FAQ

Why are my color, font, padding, and CTA fields greyed out with a lock icon? Those controls are part of the customBanners feature, available on the Standard and Unlimited plans. On Basic, you can still choose a template, set a title, and (for Timer) set a schedule, but styling and the CTA button are fixed defaults. Click the lock icon to go to the Plans page.

I applied a preset, then changed one color — why did the preset selection disappear? Editing any color, font size, title, or CTA text after applying a preset resets the selector to "Custom," since GetSale no longer considers the banner an exact match for that preset. Your edits are still saved — only the dropdown label changes.

My CTA button isn't showing in the preview. Check three things: the CTA toggle is set to Enable, the CTA Text field isn't empty, and the CTA Link is a complete http:// or https:// URL. The preview hides the button if any of these fail, and the banner won't save until the link passes validation.

Can I remove the "Shop Now" button on the Basic plan? Not from the banner editor — CTA enable/disable is part of the customBanners feature. Upgrading to Standard or Unlimited unlocks the toggle.

Is there a character limit on the title or CTA text? Yes — banner titles are capped at 50 characters, and CTA button text is capped at 15 characters (shown live via a character counter).

Was this page helpful?
Previous

Setting Up the Cart Savings Widget

Next

Please contact us through the GetSale app for further support