Sales banner

Theme section

Use the Sales banner section to announce a sale with a prominent discount, promotional headings and content, and optional buttons.

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can you can create new templates or insert dynamic content with metafields.


In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

    Learn how to use templates in our Templates guide.

  2. Under Template, click (+) Add section and select Sales banner.

  3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Add sale details

Add details about your sale, including the Sale type, Sale amount, Sale unit, and Terms and conditions. Adjust the Font size and the Currency symbol position.


In your theme editor (Customize):

  1. Click the Sales banner section to open the settings.

  2. Enter text for the Sale type. The default text sets the sale to be "up to" a certain percentage.

    Delete the text in this field for sales with a single percentage or dollar amount off on all sale products.

  3. Enter the Sale amount: either a dollar value or percentage number.

  4. Select the Sale unit: % off, $ per month, $ per year, $, %, or set it to None.

    You can change the default text for Per Month ("/mo") and Per year ("/yr") in the Default theme content editor. Learn more about Changing the wording in your theme.

  5. Enter text for any Terms and conditions that might apply to the sale.

  6. Click Save.

Settings reference

Click the Sales banner section to find the following settings.


Enter the details of your sale, including the sale amount and conditions that apply.


Section colors

Background image

Section style

Related links

Countdown banner Countdown bar Promotion grid

Last updated