Featured collection: Nav
Overview
The Featured Collection Navigation section displays products in a grid layout within a navigable “collection row” structure. It’s designed for showcasing curated product sets with controlled card styling, responsive columns, and spacing. You can customize product card media ratio, tag display style, grid columns, product count, container width, alignment, color scheme, and responsive padding. The preset includes a heading area and a featured collection row containing product cards.
Section Configuration:
Card
| Setting | Description |
|---|---|
| Media ratio | Sets the aspect ratio used for product card media (Adapt, Square, Portrait, Landscape). |
| Variant row index | Defines which product option/variant row is used for variant-related display behavior (theme-dependent). |
| Product tags display | Controls how product tags appear on the card (Static or Overlay). |
Grid settings
| Setting | Description |
|---|---|
| Desktop columns | Sets how many product columns are shown on desktop (2–4). |
| Products to show | Sets how many products are displayed within the section (2–8). |
| Mobile columns | Sets how many product columns are shown on mobile (1 or 2). |
| Gap | Controls the spacing between product cards. |
Layout
| Setting | Description |
|---|---|
| Container layout | Controls how the section is sized on the page: page-width (boxed), contained-content, or container-fluid (full width). |
| Container size (Desktop) | Sets the maximum section width on desktop as a percentage (50%–100%). |
| Color scheme | Applies a theme color scheme to the section styling. |
| Text alignment (Desktop) | Controls text alignment on desktop (left, center, right). |
| Text alignment (Mobile) | Controls text alignment on mobile (left, center, right). |
Inner padding
| Setting | Description |
|---|---|
| Top (Desktop) | Adds space above the section’s inner content on desktop. |
| Bottom (Desktop) | Adds space below the section’s inner content on desktop. |
| Left (Desktop) | Adds space to the left of the section’s inner content on desktop. |
| Right (Desktop) | Adds space to the right of the section’s inner content on desktop. |
| Top (Mobile) | Adds space above the section’s inner content on mobile. |
| Bottom (Mobile) | Adds space below the section’s inner content on mobile. |
| Left (Mobile) | Adds space to the left of the section’s inner content on mobile. |
| Right (Mobile) | Adds space to the right of the section’s inner content on mobile. |
Outer padding
| Setting | Description |
|---|---|
| Top (Desktop) | Adds space above the section (outside the section content) on desktop. |
| Bottom (Desktop) | Adds space below the section (outside the section content) on desktop. |
| Left (Desktop) | Adds space on the left side of the section (outside) on desktop. |
| Right (Desktop) | Adds space on the right side of the section (outside) on desktop. |
| Top (Mobile) | Adds space above the section (outside) on mobile. |
| Bottom (Mobile) | Adds space below the section (outside) on mobile. |
| Left (Mobile) | Adds space on the left side of the section (outside) on mobile. |
| Right (Mobile) | Adds space on the right side of the section (outside) on mobile. |
Blocks Configuration:
Heading
A heading area that introduces the section.
| Block | Description |
|---|---|
| Heading | Displays the main section title. |
| Description | Displays supporting text beneath the heading. |
Row
| Block | Description |
|---|---|
| Row | Displays the product listing area for the section and contains the product card structure. |
Product card structure
| Block | Description |
|---|---|
| Image | Displays the product’s main image/media area. |
| Tags | Displays product tags/badges such as custom tags, stock, or sale labels. |
| Content | Displays product information such as reviews, title, vendor, swatches, and custom features. |
| Card price + ATC | Displays product pricing and an add-to-cart action area. |
Common card elements (inside the card)
| Block | Description |
|---|---|
| Reviews | Displays the product’s review summary (theme/app dependent). |
| Title | Displays the product title. |
| Vendor | Displays the product vendor/brand. |
| Swatches | Displays variant swatches for the product (theme dependent). |
| Price | Displays product pricing information. |
| Add to cart | Displays an add-to-cart action for the product card. |
| Custom tag / Stock tag / Sale tag | Displays tag-style labels used for promotional or status indicators. |