Product List: Banners

The section allows merchants to display promotional or decorative banners directly within product listings and designed to seamlessly integrate promotional or decorative banners directly into product.

Unlike standalone banners, this section allows merchants to embed visual marketing content within the flow of products, making it easier to capture the customer’s attention without disrupting their browsing experience. By using this section, stores can highlight special offers, seasonal promotions, or new arrivals in a way that feels natural and engaging alongside the products themselves.

Location: Sections -> Templates -> Products: Product List: Banners

---

Product List: Banners – Options Overview

Option / Group	Description
Heading	Controls the title and text information displayed above the banners.
Subheading	Short supporting text displayed above or near the heading.
Heading	The main section title.
Product Recommendations	Optional line displayed as a label or contextual note.
Description	Text placed under the heading for explanation or messaging.
Heading alignment: Left / Center	Aligns the heading group content horizontally.
Layout	Controls the banner layout and product card structure.
Top spacing: None / Small / Medium / Normal	Adjusts vertical spacing above the section.
Width: Default / Boxed / Wide	Controls section width. Wide is only applied on screens ≥1440px.
Number of columns: 2–3	Number of banners per row on desktop.
Number of columns on tablet: 1–3	Number of banners per row on tablet.
Image hover effect	Select how the product image animates when hovered.
Image ratio	Choose image proportions or shape.
Image action: Only image / Show second image on hover	Displays second product image when hovered (if available).
Underline on hover	Adds underline animation to text links.
Show vendor	Show or hide the vendor brand name.
Show price	Show or hide product price.
Button	Button label text, e.g., “Shop Now!”.
Enable review stars	Displays star ratings below the product.
Swap content	Switches the position of text relative to the image.
Content width	Controls how wide the text block is compared to the image.
Slider settings	Enables a scrolling slider/carousel layout if needed.
Enable slider	Activates slider functionality.
Dividing line
Show	Adds a line break separator above or below the section.
Background	Controls the section background style.
Background: Hide / Color / Gradient / Image	Select background type for the section.
Colors	Defines core color palette for text and accents.
Base	Main body text color.
Accent	Color used for highlights and interactive elements.
Lines	Color for borders and dividing lines.
Banner	Text and product price styling for banner elements.
Vendor	Color for vendor name.
Product name	Color for main product title.
Product name hover	Hover color for product title.
Regular Price	Default product price color.
Sale Price	Discounted price styling.
Old price	Strikethrough old price appearance.
Text	Color for general text elements.
Text box	Background or highlight area for text content.
Banner button	Styles the main call-to-action button on banners.
Show background	Enables solid button background.
Background / Background gradient	Default button fill style.
Border	Button border color.
Text	Button text color.
Icon	Icon color (if used).
Show background on hover	Enables hover animation.
Background hover / Background gradient hover	Hover fill styling.
Border hover	Border color on hover.
Text hover	Text color on hover.
Icon hover	Icon color on hover.
Enable shadow	Adds drop shadow to the button.
Shadow / Shadow hover	Shadow properties for normal and hover states.
Media button	Styling for video controls and slider arrows/dots.
Slider arrows	Arrow color and style.
Slider dots	Dot/pagination indicators.
Video background	Background shape behind video play button.
Video icon	Video play icon color.
Video background hover / Video icon hover	Hover state styling.
Review stars	Controls product rating star design.
Stars active	Color of filled rating stars.
Stars base	Color of empty or inactive stars.

For each Banner subsection, you can individually configure its content and presentation. You can choose which Product to feature, add your own Text, and select the Type of banner (either Image or Video). If you select Image, upload the image that will be displayed in the banner.