Product List: Listing

The section is designed to display products in a structured, organized list format.

This section is ideal for stores that want to provide customers with a straightforward browsing experience, where products are the central focus without additional marketing distractions.

The design of the Listing section reflects its purpose: it typically arranges products in rows or columns with uniform spacing, image sizes, and text alignment to ensure clarity and readability.

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

---

Product List: Listing – Options Overview

Option	Explanation
Heading	Controls the heading of the section and its alignment.
Heading alignment: Left / Center	Sets the horizontal alignment of the heading text.
Layout	Adjusts the spacing and layout width of the section.
Top spacing: None / Small / Medium / Normal	Controls the empty space above the section.
Width: Default / Boxed / Wide	Sets the layout width. Wide works on screens 1440px and above.
Number of columns: 2–4	Defines how many products appear per row on desktop.
Number of columns on tablet: 1–2	Defines the product grid layout for tablet screens.
Link	Adds a link button above or below the product list.
Link name	Text of the link button.
Products	Product selection and appearance options.
Products	Select which products to display.
Align text relative to image: Top / Center	Controls vertical placement of content near the product image.
Image hover effect: Basic / Disable / Zoom / Rotate / Slide / Shine	Animation effect displayed on product image hover.
Image ratio: Auto / Portrait / Landscape / Square / Round / Story / Widescreen	Sets the shape and proportions of product images.
Show second image on hover	Shows a gallery image when hovering the product.
Customize	Opens additional styling controls, depending on theme setup.
Dividing line	Adds or removes a line that visually separates this section from others.
Show	Toggles the dividing line visibility.
Background	Controls the background behind the section.
Background: Hide / Color / Gradient / Image	Choose how the section background looks.
Colors	Base color styling for text and accents.
Base	Primary text and icon color.
Accent	Highlight or interactive element color.
Lines	Color used for borders or dividers.
Collection	Colors for product titles and prices.
Vendor	Color of the vendor name text.
Heading	Color of the product title.
Heading hover	Product title color on hover.
Regular Price	Default price color.
Sale Price	Discounted price color.
Old price	Crossed-out price color.
Button	Controls styling of call-to-action buttons for products.
Show background	Enables solid or gradient background behind the button.
Background	Button background color.
Background gradient	Gradient effect for button background.
Border	Button border color.
Text	Button text color.
Show background on hover	Uses a different background when the button is hovered.
Background hover	Background color when hovered.
Background gradient hover	Gradient background when hovered.
Border hover	Border color on hover.
Text hover	Text color on hover.
Enable shadow	Adds a shadow to the button.
Shadow	Shadow color and strength.
Shadow hover	Shadow effect when hovered.
Review stars	Controls the color of product rating stars.
Stars active	Color for filled (active) stars.
Stars base	Color for unfilled (inactive) stars.