Products list
Updated today
The products list section shows products from a collection or a manually selected product list, displayed as a slider or — on desktop — as a grid. Use it to feature a curated set of products anywhere on your store.
Settings
Setting | Description |
|---|---|
Source | Choose whether to pull products from a Collection or from a specific Products list. Defaults to Collection. |
Collection | Select the collection to pull products from. Shown when Source is set to Collection. Products display only when the collection has at least one product. |
Products | Select specific products to show, up to 20. Shown when Source is set to Products. |
Products to show | Sets how many products display, from 2 to 12 (default 6). |
Use grid on desktop | Shows products in a grid on desktop instead of a slider. Enabled by default. When it's on, the slider's previous and next buttons are hidden on desktop. |
Columns on desktop | Sets the number of grid columns, from 1 to 6 (default 3). Shown when Use grid on desktop is enabled. |
Grid gap (desktop) | Sets the spacing between grid items, from 0 to 34 px (default 8). Shown when Use grid on desktop is enabled. |
Slide width (mobile) | Sets the width of each slide on mobile, from 12 to 36 rem (default 22). |
Slide width (desktop) | Sets the width of each slide on desktop, from 16 to 48 rem (default 36). Shown when Use grid on desktop is disabled. |
Background media | Sets the section background to None, Image, or Video. |
Image / Video | Selects the background image or video and its position. Shown according to the Background media choice. |
Background overlay | Adds a solid or gradient overlay over the background, with an overlay color and, for gradients, a direction. |
Width | Sets the section width to Page or Full. |
Enable page gutter | Adds spacing on each side of a full-width section. On by default; shown when Width is Full. |
Height | Sets the section height to Auto, Small, Medium, Large, Full screen, or Custom. |
Custom height | Sets the section height as a percentage, from 0 to 100 (default 50). Shown when Height is Custom. |
Responsive padding | Sets padding top and bottom separately for mobile and desktop, each from 0 to 34 px (default 16). |
Hide section on desktop / Hide section on mobile | Hides the section on a specific device. |
Custom class | Adds one or more CSS classes, separated by spaces. |
Blocks
The products list section accepts theme and app blocks and a fixed product-card block. The section's preset builds each product card from blocks including text, button, product title, product rating, price, a product gallery, custom liquid, and quick add.
If no valid source is selected — the collection is empty or no products are chosen — the section renders the same number of blank product-card placeholders instead.