Product List

The Product List section under the Products chapter is designed to display a collection of products in a structured grid or list format.

It allows merchants to present multiple products on a page, category, or collection in a visually appealing and organized way. This section is key for helping customers browse products quickly and make selections efficiently.

In essence, the Product List section combines flexible layout, product information, and interactive elements to create an efficient, visually engaging product browsing experience.

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

---

Product List – Options Overview

Option / Group	Description
Collection	Select the collection that will be used to display products in this list.
Heading
Subheading	A short line of text shown above or under the main heading.
Heading	The main title displayed for the product list section.
Product Recommendations	Text label that may appear above related product suggestions.
Description	Additional descriptive text below the heading.
Heading alignment: Left / Center	Aligns the heading and subheading horizontally.
Layout
Top spacing: None / Small / Medium / Normal	Adjust spacing before the section.
Width: Default / Boxed / Wide	Controls section content width. Wide applies for screens ≥1440px.
Number of columns: 2–8	Sets number of product cards per row on desktop.
Number of columns on tablet: 2–4	Sets number of product cards per row on tablet.
Mobile grid: One item per row / Two items per row	Choose how products are arranged on mobile screens.
Slider settings	Turns the product list into a slider/carousel, if required.
Enable slider	Enable or disable slider mode.
Desktop navigation: Disable / Dots / Arrows / Dots and arrows	Navigation controls on desktop view.
Mobile navigation: Disable / Dots	Navigation controls on mobile view.
Enable autoplay	Automatically scrolls products without user interaction.
Link
Link name	Set a label for the section’s call-to-action link (e.g., “View All”).
Products	Controls the display and behavior of product images and actions.
Image hover effect	Choose how product images animate when hovered.
Image ratio	Select image shape (square, portrait, round, widescreen, etc.).
Products	Custom select specific products (optional alternative to collection).
Image action: Only image / Show second image on hover / Gallery	Controls interactions on image hover.
Show second image on hover	Display next product image when pointer hovers.
Customize	Opens additional styling controls for product cards.
Dividing line
Show	Displays a visual separator between content blocks.
Background
Background: Hide / Color / Gradient / Image	Select background style for the entire section.
Colors	Adjusts base color scheme of product card content.
Base	Main text color.
Accent	Highlight or interactive element color.
Lines	Border and divider color.
Product card color	Text and price color settings for product cards.
Vendor, type	Text color for vendor or product type.
Vendor, type hover	Hover color for vendor/type.
Product name	Product title color.
Product name hover	Product title hover color.
Regular Price	Standard price color.
Sale Price	Discounted price color.
Old price	Crossed-out price color.
Description	Product description text color.
Badges	Controls style of sale, featured, sold-out, and countdown badges.
Sale badge / text	Background and text color for sale indicator.
Featured badge / text	Background and text color for featured label.
Sold out badge / text	Colors for sold-out label.
Countdown background / text	Colors for countdown timer elements.
Interface buttons	Wishlist, Compare, Quick View, and slider UI buttons.
Interface button background / icon	Default styling for these buttons.
Interface button background hover / icon hover	Hover styles for these buttons.
External interface button background / icon	Styling for externally positioned buttons.
External interface button background hover / icon hover	Hover styling for external placement.
Variants buttons	Controls appearance of variant selection buttons.
Background / Border / Text	Default button styles.
Background hover / Border hover / Text hover	Hover state styling.
Background sold out / Border sold out / Text sold out	Styling for unavailable variant options.
Input	Styling for inputs such as quantity selectors.
Background / Border / Text / Icon	Default input appearance.
Background hover / Border hover / Outline hover / Text hover / Icon hover	Hover styles.
Add to cart button	Styling for the main "Add to Cart" button.
Show background	Enables filled button background.
Background / Background gradient / Border / Text / Icon	Default styling for button appearance.
Show background on hover	Enable hover animation.
Background hover / Background gradient hover / Border hover / Text hover / Icon hover	Hover styles.
Enable shadow / Shadow / Shadow hover	Adds and styles button shadows.
Link button	Controls secondary link-style buttons.
Show background	Enables solid background style.
Background / Background gradient / Border / Text	Default button display.
Show background on hover	Adds hover background animation.
Background hover / Background gradient hover / Border hover / Text hover	Hover styling.
Enable shadow / Shadow / Shadow hover	Shadow style and interaction.
Media button	Controls slider arrow and dot styling.
Slider arrows	Appearance of next/previous arrow controls.
Slider dots	Appearance of pagination dots.
Review stars	Controls product rating star colors.
Stars active	Color of filled stars.
Stars base	Color of outline/empty stars.