Install a Sales banner section to make your promotions stand out with bold, highlighted text—perfect for spotlighting limited-time offers, special discounts, and exclusive deals.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Â
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Sales banner.
Customize section settings
Click the Sales banner section to customize general settings for the section
Section height
Select Small, Medium, or Large to restrict the section to the desired height. To match the height of the Background image, select Adapt to image.
Background image
Click Select image to upload a custom image for the section's background.
Colors
Select colors for the Text color, Background color, and Image overlay. Adjust the level of transparency for the overlay with the Image overlay opacity slider.
Margins
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Customize blocks
There are two blocks to customize for the section:Â Content and Highlighted text.
Content block
Click Highlight your sale here to open the Content block.
Customize the Heading, Text, and Button settings.
Heading
Add a Heading using the provided field. Leave the field blank to exclude a heading.
Use the Heading size and Mobile heading size to control the font size of the heading for desktop and mobile displays.
Text
Add Text using the provided field. Leave the field blank to exclude a heading.
Use the Text size and Mobile text size to control the font size of the heading for desktop and mobile displays.
Button
Add a button by adding a Button label and Button link.
Select Fill or Outline for the Button style, then select the Background color and Text color.
Highlighted text block
Click 50% off to open the Highlighted text block.
Add Text and customize its styling with optional Highlights and Underlines.
Text
Add Text using the provided field.
Customize the font sizes for desktop and mobile with the Text size and Mobile text size sliders. Adjust the Line height for the text with the provided slider.
Solid highlight
Highlight words or phrases in your Text by typing them in the Solid highlight phrases field. For example, highlight "50%" to add a highlight to the 50% text.
Change the position for the vertical offset for the highlight with the Solid highlight offset setting. This will move the highlight up or down.
Underline highlight
Underline words or phrases in your Text by typing them in the Underline highlight phrases field. For example, highlight "OFF" to add a underline to the OFF text.
Change the position for the vertical offset for the highlight with the Underline highlight offset setting. This will move the underline up or down.
Highlight color
Adjust the color for the Solid highlight and/or Underline highlight with the Highlight color setting.
Changelog
December 3rd, 2024
- Updates to link hover states and animations
November 6th, 2024
- Sales banner added to Theme Sections.