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

Setting	Description
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