Appearance
Featured collection
Show a row of products from a collection you choose — the most direct way to put real products on your homepage or any page. Give it a caption and a heading, pick how many products and columns, and add a “View the full collection” button so shoppers can browse the rest. On the Uisce preset the band becomes an editorial spread — a sea-glass caption, a luminous waterline seam under the title, and a frosted collection button; the other presets keep a clean, classic grid.
Try it
Edit the settings and switch presets — the preview is the real band with the shipped theme CSS, so what you see is what your store renders.
←Featured collection
Small text shown above the heading.
Optional text shown below the heading.
2
Products per row on desktop.
Storefront preview
Featured Collection
Kitchen Design
Bespoke kitchen transformations, crafted around how you live.
Switch presets above: Uisce lights the editorial-spread signature (sea-glass caption, the luminous waterline seam under the title, and the frosted “View the full collection” affordance). The other four keep the clean base band over the same markup.
Settings
| Setting | What it does |
|---|---|
| Color scheme | The set of colours used for this band. One scheme paints the whole band (background + text), so it stays legible in light and dark. |
| Caption | Small text shown above the heading (a section kicker). On Uisce it renders as the sea-glass eyebrow. Leave blank to hide. |
| Heading | The title above the grid. Defaults to the section title. |
| Subheading | Optional supporting text shown below the heading. On Uisce it renders as the editorial lede under the waterline seam. Separate from the collection’s own description. Leave blank to hide. |
| Heading translation key (advanced) | Power-user option: resolve a translation key instead of static heading text. Most stores leave this empty. |
| Collection | Which collection the products come from. |
| Maximum products | How many products to show (2–12). |
| Columns | Products per row on desktop (2, 3, or 4). The grid clamps to the product count so the last row is never a lone orphan tile. |
| Show “View the full collection” button | Adds the button that links to the full collection. On Uisce it’s a frosted, sea-glass pill; elsewhere a standard secondary button. |
| Product card — Show secondary image on hover | Reveals a second product photo when a shopper hovers a card. |
| Product card — Show vendor | Shows the product’s vendor/brand on each card. |
| Product card — Show quick buy button | Adds an add-to-cart button directly on each card. |
| Product card — Enable quick view | Adds a quick-view button so shoppers preview a product without leaving the page. |
| Product card — Show color swatches | Shows available colour options as small dots on each card. |
| Product card metadata capsule — Icon / Metadata capsule label | An optional small capsule on each card (e.g. “Turnaround · 8 wks”). The value comes from each product’s metafield; the capsule hides when a product has no value. |
Layout
- Responsive grid, no orphan row. Desktop shows your chosen columns; tablet drops to two-up; mobile stacks one-up. The column count clamps to the number of products so a four-tile band reads as a balanced 4-up / 2×2 / 1-up — never a single stranded tile.
- The tiles are the shared product card. This band styles the frame (caption, heading, grid rhythm, view-all) — the cards themselves are the theme’s product card, so they match your product pages and collection pages.
- Uisce editorial spread. On the Uisce preset only, the caption becomes a sea-glass eyebrow, the heading carries the luminous waterline seam, the subheading becomes an editorial lede, and the button becomes a frosted “View the full collection” pill. The signature is a preset skin over the same markup, so the other four presets render the clean base band.
Accessibility & internationalisation
- The heading is a single
<h2>; the caption and subheading are plain paragraphs, so there is no heading-order break. - The button is a real link with a discernible name and a ≥ 44×44 tap target; keyboard focus is visible.
- One colour scheme per band keeps text at WCAG AA contrast in both light and dark.
- The caption, heading, subheading, and button mirror correctly for right-to-left languages, and every label is translated across all supported locales.
Tips
- Give it a caption + subheading to turn a plain product row into an editorial spread — e.g. caption “Featured collection”, subheading “Bespoke kitchen transformations, crafted around how you live.”
- Use it more than once on the homepage to feature different collections — “Kitchen Design”, “Bathroom Renovation”, “New Arrivals”.
- Keep four products with four columns for the cleanest balanced row; the grid still fills without an orphan at other counts.