Product List: with Banner
The section is designed to combine product listings with a prominent banner, integrating marketing content directly into the product.
This design emphasizes visual engagement by allowing merchants to showcase a promotional image, campaign, or call-to-action alongside the product grid, drawing customer attention while maintaining the flow of browsing.
The banner can be positioned above, within, or alongside the product list, depending on the layout, and can include headings, subheadings, and clickable links to highlight promotions, special offers, or featured collections. Products are displayed in a structured grid or row format, with consistent product cards showing images, product names, vendor, price, review stars, and badges like Sale, Sold Out, or Feature.
The section supports customization of layout, spacing, and alignment, as well as hover effects and interactive elements like “Add to Cart” buttons on products. Responsive design ensures both the banner and the product list display correctly across desktop and mobile devices, maintaining clarity and engagement.
Location: Sections -> Templates -> Products: Product List: with Banner
Product List: with Banner – Options Overview
Heading
Subheading
Adds a small text line above the main heading.
Heading
The main title of the section.
Description
Optional text displayed below the heading.
Heading alignment: Left / Center
Controls horizontal alignment of the heading area.
Layout
Top spacing: None / Small / Medium / Normal
Adjusts the spacing above the section.
Width: Default / Boxed / Wide
Defines the section width. The Wide option applies on screens 1440px and larger.
Enable slider
Converts the product list into a slider.
Swap content with image
Changes the layout order of the banner and product grid.
Number of columns: 2–4
Sets how many products appear per row on desktop.
Desktop navigation: Disable / Dots / Arrows / Dots and arrows
Controls slider navigation on desktop.
Mobile navigation: Disable
Hides or shows slider navigation on mobile.
Enable autoplay
Automatically rotates slider items.
Products
Image hover effect
Changes how images animate on hover.
Image ratio: Auto / Portrait / Landscape / Square / Round / Social story / Widescreen
Defines the shape of the product images.
Products
Select the collection to display.
Image action: Only image / Show second image on hover / Gallery
Choose the behavior when hovering over product images.
Customize
Opens additional product card options where available.
Dividing line
Show
Displays or hides a separating line above the section.
Background
Background: Hide / Color / Gradient / Image
Sets the background display style for the section.
Colors
Base
General text color.
Accent
Highlight color (e.g., hover or emphasis).
Lines
Color of divider lines or outlines.
Product card color
Vendor, type
Color of vendor/type text.
Vendor, type hover
Color when vendor/type text is hovered.
Product name
Product name text color.
Product name hover
Product name color on hover.
Regular Price
Price color when no discount.
Sale Price
Discounted price color.
Old price
Strikethrough price color.
Description
Product description text color.
Badges
Sale badge / Sale badge text
Badge and text color for sale products.
Featured badge / Featured badge text
Badge and text for featured products.
Sold out badge / Sold out badge text
Badge and text when product is unavailable.
Countdown background / Countdown text
Colors for countdown timer badge.
Interface buttons
Interface button background / icon / background hover / icon hover
Colors for Wishlist, Compare, Quickview, Slider controls.
External interface button background / icon / background hover / icon hover
Colors for buttons displayed over the product image.
Variants buttons
Background / Border / Text
Default styles of variant selectors.
Background hover / Border hover / Text hover
Styles when the variant selector is hovered.
Background sold out / Border sold out / Text sold out
Appearance for unavailable variants.
Input
Background / Border / Text / Icon
Styles for input fields.
Background hover / Border hover / Outline hover / Text hover / Icon hover
Appearance when interacting with fields.
Add to cart button
Show background
Enables button background fill.
Background / Gradient / Border / Text / Icon
Default styles of the Add to Cart button.
Show background on hover
Controls hover behavior.
Background hover / Gradient hover / Border hover / Text hover / Icon hover
Hover styles for Add to Cart button.
Enable shadow / Shadow / Shadow hover
Adds and styles a drop shadow effect.
Media button
Slider arrows / Slider dots
Styles for slideshow navigation elements.
Review stars
Stars active / Stars base
Colors for product rating stars.
Each section includes a Banner subsection that allows you to highlight visual content (such as promotional images or videos) alongside text and call-to-action elements. You can add multiple Banner subsections, which makes it possible to display several featured messages or visuals within the same section.
Type
Type: Image / Video
Select whether your banner will display an uploaded image or a video.
Image
Image
Upload the banner image.
Image ratio mobile: Auto / Portrait (3:4) / Landscape (4:3) / Square (1:1) / Social story (9:16) / Widescreen (16:9)
Controls the crop of the image on mobile devices.
Image overlay opacity
Adjusts how transparent the overlay effect is.
Image overlay fill
Choose the color used in the image overlay.
Content
Link
Add a link to make the banner clickable.
Heading
Main title text displayed on the banner.
Description
Supporting text below the heading.
Heading after description
Switches the order so the heading appears after the description.
Button
Adds a call-to-action button to the banner.
Settings
Heading size
Controls the heading size on desktop.
Heading size tablet
Sets heading size for tablet screens.
Heading size mobile
Sets heading size for mobile screens.
Underline on hover
Adds an underline to text when hovered.
Text position: Top left / Top / Top right / Center left / Center / Center right / Bottom left / Bottom / Bottom right
Controls where the content appears on the banner.
Text position mobile: Top left / Top / Top right / Center left / Center / Center right / Bottom left / Bottom / Bottom right
Controls text placement on mobile devices.
Text align: Left / Center
Sets horizontal text alignment.
Description width
Sets the width of the description on desktop.
Description width tablet
Sets description width on tablets.
Description width mobile
Sets description width on mobile.
Show text box
Adds a background box behind the text for better visibility.
Colors
Heading
Color of the banner heading.
Heading hover
Heading color when hovered.
Description
Color of the description text.
Description hover
Description text color when hovered.
Button
Show background
Enables or disables button background fill.
Background
Default background color of the button.
Background gradient
Gradient fill behind the button.
Border
Button border color.
Text
Button text color.
Show background on hover
Enable or disable background changes on hover.
Background hover
Button background color on hover.
Background gradient hover
Gradient color on hover.
Border hover
Border color when hovered.
Text hover
Button text color when hovered.
Enable shadow
Toggles shadow around the button.
Shadow
Default shadow style.
Shadow hover
Shadow style when hovered.
Box
Background
Background color for the text box (if enabled).
Background hover
Background color when hovering the box.
Media button
Background
Color of video play/slider navigation buttons.
Video button, slider buttons
Icon
Icon color for video/slider controls.
Background hover
Background color when hovered.
Icon hover
Icon color on hover.
Other
Image overlay color
Color of the overall overlay applied on top of the image.
Last updated