The Highlights banner combines icons, key copy, and links to showcase key messaging for your storefront. With 60 icons to choose from, introduce your customers to offered services, hours of operation, and other important details about your store.
🧰 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 🧰 Highlights Banner.
Customize section settings
Click the Highlights banner section to open its general settings.
Content alignment
Position the icon beside (Left or Right) or above (Center) the text by selecting an option from the Desktop content alignment dropdown. Select an option for mobile devices with the Mobile content alignment setting.
Icon sizes
Use the Desktop icon size and Mobile icon size settings to adjust the size of the icons for desktop and mobile devices
Desktop dividers
Activate Desktop dividers by selecting Solid for the setting. To deactivate, select None.Â
Font sizes
Adjust the font sizes for the section with the Heading size, Mobile heading size, Text size, and Mobile text size settings.
Colors
Customize the Text color, Icon color, Icon background color, and Background color for the section.
Adjust spacing
Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Customize blocks
Include up to 4 Highlight blocks, each with its own Icon or Image, Heading, Text, and Link.
Select one of the preloaded highlight blocks (e.g. Free Shipping) to customize its content. Click (+) Add highlight to add more.
Icon
Choose an Icon using the provided dropdown.
There are icons available for Shopping, Shipping, Support, Payment, Tech, Nature, Food & drink, and Misc.
|
Shopping
|
Shipping
|
Support
|
|
Payment
|
Tech
|
Nature
|
|
Food & drink
|
Misc
|
 |
Image
To use an Image instead of an icon, click Select image.
Images resized or cropped to 64 x 64px are ideal for the Image option.
Text and link
Include a Heading, Text, and Link using the labeled fields.
Changelog
December 3rd, 2024
- Updates to link hover states and animations.
- Slider layout improvements.
November 6th, 2024
- Highlights banner added to Theme Sections.