Alternative collection grid
Section overview
The Product Featured section displays a grid of highlighted products from a collection, each showcasing multiple product images in an attractive layout.
Common use cases
Featured collections showcase on homepage
Highlighting products with rich imagery (products with multiple photos)
Creating visually appealing product displays that draw attention
Promotional sections highlighting seasonal or special products
Usage tips
Best practices:
Ensure selected products have at least 4 product photos for optimal display
Use this section for products with high-quality images to maximize visual impact
Add a compelling heading and description to provide context
Include a call-to-action button to direct customers to the full collection
Common pitfalls:
Using products with fewer than 4 images will result in duplicated images in the grid
Overcrowding the page with too many products (3-4 products is usually optimal)
Not customizing the heading and content to match your promotional intent
Mobile responsiveness:
Configure appropriate row size settings for mobile displays
Consider using a single column layout on mobile for better product visibility
Test how the multi-image layout appears on smaller screens
Section settings
Products
Header section for product-related settings
Collection
Select the collection to feature products from
Total items
Set the number of products to display (default: 3)
Content
Header section for content-related settings
Heading
Add a title for the section
Content
Add descriptive text for the section
Button label
Add text for the call-to-action button
Button URL
Set the destination URL for the button
Spacing
Header section for spacing settings
Top spacing
Adjust the padding above the section (0-300px)
Bottom spacing
Adjust the padding below the section (0-300px)
Color
Header section for color settings
Color scheme
Select the background and text color combination
Border color
Choose the color for section borders
Button color
Select the style and color for the button
Style
Header section for style settings
Border position
Choose where borders appear around the section
Layout
Header section for layout settings
Row desktop
Set the number of products per row on desktop (2-4)
Row mobile
Set the number of products per row on mobile (1-2)
X alignment
Set the horizontal alignment of section content
Display
Header section for display settings
Visibility
Control section visibility on different devices
Last updated
Was this helpful?