Featured Collection Section

Display products from a selected collection in a grid or carousel layout.

Adding the Section

1. Open the theme editor
2. Click Add section
3. Select Featured Collection

Selecting a Collection

1. Find the Collection dropdown
2. Select the collection to feature
3. Products from that collection will display

If no collection is selected, placeholder products appear in the editor.

Layout Options

Display Type

| Layout | Behavior | |--------|----------| | Grid | All products visible in a grid | | Carousel | Scrollable row with navigation |

Desktop Columns

For grid layout, choose 2-5 columns:

| Columns | Best For | |---------|----------| | 2 | Large product images | | 3 | Balanced display | | 4 | Standard e-commerce (default) | | 5 | Compact, many products |

Mobile Columns

Choose 1 or 2 columns on mobile:

• 1 column - Large, clear product images
• 2 columns - More products visible

Product Limit

Set how many products display (2-12):

• Grid: All products show at once
• Carousel: Shows one "page" with arrows to see more

Header Content

Subheading

Small text above the heading, e.g., "New Arrivals" or "Editor's Picks"

Heading

Section title, e.g., "Shop the Collection"

Header Alignment

• Left - Left-aligned header
• Center - Centered header

View All Link

Enable View All

Toggle to show a "View all" link to the full collection page.

Button Style

• Link style (text only)
• Button style (styled button)

Swipe on Mobile

For grid layouts, enable Swipe on mobile to allow horizontal scrolling instead of stacking.

Color Swatches

If your products have color variants with swatches configured, toggle Show color swatches to display them on product cards.

Carousel Navigation

When using carousel layout:

• Arrow buttons appear on desktop
• Swipe to navigate on mobile
• Dots indicate position

Product Card Features

Each product card displays:

• Product image (with hover image if enabled)
• Product title
• Price (with sale price if applicable)
• Vendor (if enabled in theme settings)
• Quick add button (if enabled)
• Color swatches (if enabled)

Color Scheme

Apply a color scheme for:

• Section background
• Product card styling
• Text colors

Best Practices

Collection Selection

• Feature your best-selling collection
• Highlight new arrivals
• Showcase seasonal items

Product Count

• Homepage: 4-8 products
• Category pages: 6-12 products
• Don't overwhelm with too many

Visual Consistency

• Products should have consistent image style
• Same aspect ratio for all products
• Similar background colors

Use Cases

Homepage Featured

Primary collection showcase with 4-6 products.

Category Upsells

On collection pages, feature related collections.

Product Page Cross-Sell

Show complementary products below main product.

Carousel vs Grid

Use Carousel when:

• Space is limited
• Showing 6+ products
• Want interactive element

Use Grid when:

• All products should be visible
• SEO is priority (all visible to crawlers)
• Clearer product comparison needed