Featured collection grid

Section overview

The Featured collection grid section displays a collection of products in a responsive grid layout with customizable appearance and content. It can also include an optional content card.

Common use cases

• Showcasing featured products on the homepage

• Displaying category-specific product collections

• Creating a product highlight section with accompanying promotional content

• Building custom product showcases with mixed content

Usage tips

• Choose the right number of products to display based on your page layout

• Select appropriate grid sizes for desktop and mobile to maintain visual appeal

• Ensure product images are consistent in size and style for a cohesive look

• Add a content card to provide context or promotional information alongside products

• Consider color scheme choices that complement your products

• For mobile, a 2-column grid generally works better than a single column

Section settings

Setting	Description
Collection	Select which product collection to display
Total items	Set the number of products to show (1-20)
Heading	Add a title for the section
Content	Add descriptive text to accompany the products
Button label	Text to display on the section's button
Button URL	Link destination for the section's button
Spacing top	Amount of space above the section (0-300px)
Spacing bottom	Amount of space below the section (0-300px)
Color scheme	Select the background and text color combination
Border color	Choose subtle or strong border coloring
Button color	Select the style for buttons in this section
Border position	Position of borders (none, top, bottom, or both)
Desktop columns	Number of products per row on desktop (2-5)
Mobile columns	Number of products per row on mobile (1-2)
Horizontal alignment	How content aligns horizontally (left, center, right)
Visibility	Control section visibility on different devices

Block settings

Card

This block adds a content card that can be included alongside products in the grid. Limited to 1 per section.

Setting	Description
URL	Link destination when the card is clicked
Heading	Title text for the card
Content	Descriptive text for the card
Button label	Text to display on the card's button
Image	Main image to display in the card
Background image	Image to use as card background
Video	Video to display in the card
Enable autoplay	Automatically play video when visible
Enable mute toggle	Show mute/unmute button for video
Enable loop	Continuously loop video playback
Index	Position order in the grid
Color scheme	Background and text color combination
Border color	Color of the card's border (subtle, strong, or none)
Button color	Style for the card's button
Column span	Number of grid columns the card should occupy (1-4)