Section: Featured Collection

Everything you'll need to know on how to setup your Featured Collection section.

The Featured Collection section displays products from one or more collections in either a Grid or a Carousel layout. Add multiple Collection blocks to create tabs (e.g. Bestsellers, New Arrivals, Sale) — visitors switch between them with one click. Configure product cards, badges, view-all CTAs, and per-tab buttons.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Featured Collection, then click on it.

3) Done — your Featured Collection section is added with one Collection block by default. Add more Collection blocks to enable tabs.

The general settings contain the display mode, content, layout, badges, button, and spacing setup of the Featured Collection section. Simply click on the section to open the settings.

Choose how products are presented: Grid (responsive multi-row grid) or Carousel (horizontal scrolling carousel with arrows and autoplay). Default: Grid. Switch between modes anytime — settings for both modes are kept.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. Controls section background, heading, tab colors, button styles, and product card styling.

Small uppercase label shown above the heading. For example: SHOP NOW, BESTSELLERS, or NEW DROP. Leave empty to hide.

The main heading of the section, rendered as an H2 tag. Default: Featured Collection. Leave empty to hide.

Smaller paragraph below the heading. Use it to add a tagline or describe the collection. Leave empty to hide.

Visual size of the heading from H1 down to H6. Default: H2. Pulls from your theme's heading scale.

Text alignment of the heading group: Left, Center, or Right. Default: Center.

Applies in Grid mode only. Tick this box to stretch the grid to the full browser width (no horizontal padding). Default: off — keeps the grid within the standard page width.

Maximum number of products to display per collection, between 2 and 20. Default: 8. Match this to your Products per row values for clean rows (e.g. 8 products with 4 desktop columns = 2 rows).

The settings under Carousel Settings only apply when Display mode is set to Carousel.

Number of product cards visible at once on desktop, between 2 and 5. Default: 4. Tablet always shows 2; mobile shows 1.2 (showing partial next slide as visual hint).

Tick this box to display the total number of products in the collection above the carousel (e.g. 24 products). Default: off.

Control how many products appear per row on different screen sizes. Applies in Grid mode only.

Columns on small screens (up to 767px). Choose 1 column or 2 columns. Default: 2.

Columns on tablets (768px - 1199px). Range 2–4. Default: 3.

Columns on large screens (1200px and above). Range 2–5. Default: 4.

Quick Add: direct 'Add to Cart' for simple products; shows option selector for products with variants. View Product: always links to product page. Choose Quick Add (smart), View Product (link), or No button to keep the card clean.

Tick this box to display product star ratings on each card. Requires the product to have a rating metafield (Shopify Product Reviews app or similar). Default: off.

Configure how product badges are displayed. Control the style, format, and what information to show.

Choose between horizontal badges or diagonal ribbon style. Pick Normal - Pill badge for a rounded horizontal pill, or Ticker - Diagonal corner ribbon for an angled ribbon across the corner.

How to display the savings amount. Money format uses your shop's currency automatically. Percentage shows SAVE 25%. Money shows SAVE $30.00 (uses shop currency).

What to show when product has both discount and special tag. Discount Only — show savings/discounts. Tag Only — show product labels (NEW, HOT, etc.). Both — show discount + tag (if available).

Position of the badge on product images. Choose Top Left or Top Right. Top Left is the most common convention in e-commerce.

Tick this box to make the carousel wrap from the last product back to the first seamlessly. Only applies in Carousel display mode. Default: off.

Tick this box to automatically advance the carousel from one slide to the next. Only applies in Carousel mode. Pauses on hover. Default: on.

Time spent on each slide before advancing, between 2 and 15 seconds. Default: 5 seconds.

Tick this box to display a CTA button below the products that links to the full collection. Each Collection block can override the button text and URL. Default: on.

Visual style of the CTA button: Primary, Secondary, or Outline. Default: Primary.

Size of the CTA button: Small, Medium, or Large. Default: Medium.

Space above the CTA button in pixels (0–100). Default: 40 px.

Maximum width of the section content, between 1000 px and 1600 px. Applies in Carousel mode only. Default: 1400 px.

Space above the section in pixels (0–120) on desktop. Default: 60 px.

Space below the section in pixels (0–120) on desktop. Default: 60 px.

Space above the section in pixels (0–80) on mobile. Default: 40 px.

Space below the section in pixels (0–80) on mobile. Default: 40 px.

Each collection is an individual Collection block. Click Add block inside the section and choose Collection. You can add up to 6 collections. With 2 or more, the section automatically displays them as clickable tabs above the products.

Pick the collection to display. Pick from any of the collections in your store catalog.

Shown when more than 1 collection is added. Collection title is used if none is set. Customize the tab label per collection (e.g. Hot deals instead of Sale).

Optional CTA button text for this collection. Falls back to View all if empty. Useful when each collection needs a different CTA (e.g. Shop sale, Browse new arrivals).

If empty, the collection URL is used. Override the CTA destination if you want it to go somewhere other than the collection page.

Add at least 2 Collection blocks to the section. Once you have 2 or more, tabs appear automatically above the products. Each tab uses the Collection's title — override with the Tab label field per block. Visitors switch between tabs with one click.

Grid shows products in a static multi-row layout — best when you want all products visible at once. Carousel shows products in a horizontally scrolling row with arrows and autoplay — best when you want a tighter section that highlights products in sequence.

Quick Add is a smart button: for products with no variants (single-option), clicking adds it directly to the cart. For products with variants (color, size), clicking opens an option selector first. View Product disables Quick Add and always links to the product page instead.

Discount badges only appear when a product has a compare-at price higher than its regular price. Set this in Products → product → Pricing. Tag badges require specific tags on products (e.g. NEW, HOT) which the theme reads.

Yes — each Collection block has its own Button text and Button link fields. Use them to customize the CTA per tab (e.g. Shop sale for the sale tab, Discover for the new arrivals tab).