Set the Source setting to Collection to pull products from a collection, or to Products to show a manually selected list. Collection is the default. When Source is Collection, choose the collection in the Collection setting; when it is Products, pick up to 20 products in the Products setting.
Products list
Updated 2 months ago
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.
FAQ
How do I choose between a collection and a specific product list in the Pops products list section?
Why is my Pops products list section showing blank product cards?
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. A collection also displays products only when it contains at least one product.
How many products can I show in the Pops products list section?
The Products to show setting controls how many products display, from 2 to 12, with a default of 6. When Source is set to Products, you can select up to 20 specific products.
How do I display products as a grid on desktop in Pops?
Enable Use grid on desktop, which is on by default, to show products in a grid instead of a slider on desktop. When it's on, the slider's previous and next buttons are hidden on desktop. Use Columns on desktop (1 to 6, default 3) and Grid gap (desktop) (0 to 34 px, default 8) to control the layout.
How do I set the slide width on mobile and desktop in the Pops products list section?
Use Slide width (mobile) to set the width of each slide on mobile, from 12 to 36 rem (default 22). Slide width (desktop) sets the desktop slide width from 16 to 48 rem (default 36) and appears only when Use grid on desktop is disabled.
Can I add a background image or video to the Pops products list section?
Yes. Set Background media to Image or Video (or None for no background), then choose the image or video and its position in the Image / Video setting. You can also add a solid or gradient Background overlay over it.
Was this helpful?
Was this helpful?