Header & Footer

Promotion bar

Highlight promotions, sales, and discount codes with a banner in the header.

The promotion bar is a banner displayed in the header area, designed to highlight a key promotion, sale, or store-wide offer. It supports a heading, descriptive text, an optional icon, and an optional discount code that customers can copy with a single click.

Setting up the promotion

Add the Promotion bar section

  1. Open the Theme Editor and click Add section in the header group.
  2. Select Promotion bar.

Configure the message

  1. Enter a Heading for the promotion (e.g., "Summer Sale").
  2. Enter the Text with additional details (e.g., "Get 20% off all items").
  3. Optionally add a Link to make the entire bar clickable, directing customers to a relevant page.
  4. Enable Show icon to display an icon next to the heading, then choose an Icon from the built-in icon library.

If the promotion text is too long for mobile screens, enable Hide text on mobile to show only the heading on smaller devices.

Discount code button

You can add a Discount code button block to the promotion bar, giving customers an easy way to copy a discount code directly from the banner.

Add a Discount code button block

  1. In the Theme Editor, locate the Promotion bar section.
  2. Click Add block and select Discount code button.

Configure the discount code

  1. Enter the Discount code that customers will copy (e.g., "SAVE20").

When a customer clicks the button, the code is copied to their clipboard and a confirmation message is displayed.

Colors

  • Background — the background color of the promotion bar.
  • Text — the text and icon color.

Announcement bar

Learn how to configure the announcement bar

Footer

Learn how to configure and customize the footer