Discount banner

Adding a discount banner to your product pages #

Now that you've created your first discount, the next step is to promote it by adding a discount banner to your product pages.

Opening the theme editor #

Start by opening your theme editor. From there, navigate to a product page. You can do this by clicking any product from your homepage or collection pages, or by selecting "Product templates" directly from the template selector. Select the default product template (or whichever applies to your store).

Adding the banner block #

Find the section where you want to place the banner. We recommend placing it just below the price section. Click the blue "+" button to add a new block, and select the Discount Banner block from the list.

Configuring the banner #

Once the block is added, you have a few options:

• Promo code: If you're running a code-based discount, enter the promo code in the banner. Customers will be able to copy the code directly from the banner and paste it at checkout.
• No promo code: Leave the code field blank and the promo code text will be hidden automatically. This works well for automatic discounts.

You can also customize the banner text, text alignment, and left-to-right layout options.

Dynamic pricing variables #

The banner supports dynamic variables that pull live product pricing. This lets you show customers exactly what the discounted price will be before they apply a code or add the item to their cart. These variables work with both promo code and automatic discount setups.

Discount settings within the banner #

Inside the banner block settings, you can also:

• Adjust the discount percentage
• Add a discount cap (e.g., 15% off up to a maximum amount)
• Set start and end dates -- the banner will appear and disappear automatically based on those dates
• Set the time zone for scheduling
• Limit the banner to specific products or collections
• Restrict visibility by customer tag (note: tag-based visibility requires the customer to be logged in)

Design customization #

The banner also supports color customization, margin and border radius adjustments, and custom CSS for more advanced styling.

Saving and localization #

Once you're happy with the setup, click Save. If you need to create market-specific content or translations, simply select a different version of your theme, customize it there, and save that version separately.

If you have any questions, reach out and we're happy to help.