Overview
The Product list block displays a grid or slider of product cards.
It allows you to showcase selected products or products from a collection in a flexible, responsive layout.
This block is commonly used for:
Featured products
Related or recommended products
Cross-selling sections
Promotional product groups
Where to use this block
You can use the Product list block in sections that support blocks, such as:
Homepage product sections
Landing pages
Collection or product templates
Content sections with product highlights
How to add this block
Open the Theme Editor
Navigate to a section that supports blocks
Click Add block
Select Product list
Choose products or a collection
Configure layout and swipe settings
How products are selected (Priority logic)
The Product list block supports two ways to select products.
1. Custom products (Product list)
Custom products
Manually select specific products to display.
Highest priority
Ideal for curated or promotional selections
Display order follows the selected product order
If Custom products are selected, the Collection setting is ignored.
2. Collection (Fallback)
If no Custom products are selected:
Products are loaded from the selected Collection
Products follow the collection’s default order
Limited by the “Products to show” setting
💡 Tip
Use Custom products when you want full control.
Use Collection when you want automatic updates.
Number of products
Products to show
Controls the maximum number of products displayed
Applies to both Custom products and Collection products
Range: 2–30 products
Layout settings
Products per row
Controls how many product cards are shown per row.
Desktop: 1–5 columns
Tablet: 1–3 columns
Mobile: 1 or 2 columns
These settings affect both grid and slider layouts.
Swipe (Slider) behavior
The Product list block can behave as a grid or a slider, depending on swipe settings.
Enable swipe
You can enable swipe independently for:
Desktop
Tablet
Mobile
Swipe is automatically enabled only when:
Swipe is turned on for that device, and
The number of products exceeds the number of columns
Example:
Desktop columns = 4
Products to show = 6
Swipe on Desktop = enabled
→ Slider is activated on desktop
Grid vs Slider behavior
Grid mode
Products are displayed in rows
No horizontal scrolling
Best for short lists or full catalog previews
Slider mode
Horizontal swipe or scroll
Useful for featured or promotional product rows
Automatically adapts per device
Product cards
Each product is rendered using the theme’s Product Card block.
This ensures consistency with:
Image ratio
Price display
Badges (Sale / Sold out)
Hover effects
Quick actions (if enabled in the theme)
Responsive behavior
Desktop, tablet, and mobile layouts are controlled independently
Swipe behavior can differ per device
The block automatically adapts when screen size changes
Tips for best results
Use Custom products for campaigns or promotions
Use Collection for automatically updated sections
Avoid enabling swipe if only a few products are shown
Keep column counts reasonable to maintain readable product cards
Preview on mobile — swipe is often most useful there
Common mistakes
No products displayed
→ No Custom products selected and no Collection selected
Slider not working
→ Number of products does not exceed columns
→ Swipe is not enabled for that device
Layout feels crowded
→ Reduce number of columns
→ Reduce Products to show
Limitations
Sorting follows the selected product order or collection order
Product card layout is controlled globally by the theme
Swipe only activates when product count exceeds column count
Common use cases
Homepage featured products
“You may also like” product rows
Seasonal or promotional product highlights
Curated collections on landing pages
Need help?
If the Product list isn’t behaving as expected:
Check whether Custom products or Collection is selected
Verify column and swipe settings
Test on desktop, tablet, and mobile preview
Confirm Products to show is greater than column count when using swipe
Comments
0 comments
Please sign in to leave a comment.