Seventh > Sections > Featured collection

Featured Collection

The Featured Collection section automatically displays products from a selected collection in a grid or slider layout. Perfect for showcasing collection products, best sellers, or curated product groups.

Seventh - Featured collection

What It Does

This section automatically creates product cards for products in your selected collection:

Displays products from a collection automatically
Can also display manually selected products
Products appear in a grid or slider layout
Each product uses a Product Card with customizable blocks
Supports promotional cards mixed with products

Section Settings Explained

Collection & Products

Collection

Select a collection to display products from
Products from the collection will appear automatically
Products appear in collection order

Products Per Page (Only appears when a collection is selected)

Controls how many products to display
Range: 1-50 products (default: 6)
All products from collection will be shown up to this limit

Products

Alternatively, manually select specific products to display
Overrides collection selection
Products appear in the order you select them

Layout Options

Layout Controls how products are displayed:

Grid - Standard grid layout with products in rows and columns
Slider - Horizontal scrolling slider of products

Cards Size (Desktop) Controls how many product cards appear per row when header is at top

Cards Size (Desktop with Left Header) Controls card size when header is positioned on the left

Cards Size on Mobile Controls how many cards appear per row on mobile

Cards Alignment Controls how product cards align when they have different heights

Stretch Alignment Type (Only appears when "Stretch" is selected)

Grid Gap Controls the spacing between product cards

Cards Arrangement

Scatter Cards (Only appears when layout is "Grid")

When enabled: Cards are arranged in a scattered, editorial-style layout
When disabled: Cards are arranged in a uniform grid

Scatter Cards on Mobile (Only appears when "Scatter Cards" is enabled)

When enabled: Scattered layout applies on mobile devices
When disabled: Cards use standard grid on mobile

Horizontal Spacing (Only appears when "Scatter Cards" is enabled)

Controls horizontal spacing between scattered cards
Options: XSmall (0), Small (0.05), Medium (0.1), Large (0.15), XLarge (0.2)

Vertical Scattering (Only appears when "Scatter Cards" is enabled)

Controls vertical offset/scattering of cards
Options: XSmall (1), Small (1.5), Medium (2), Large (2.5), XLarge (3)

Gap Between Rows (Only appears when "Scatter Cards" is enabled)

Controls spacing between rows of scattered cards
Options: XSmall (1), Small (1.5), Medium (2), Large (2.5), XLarge (3)

Randomize Card Sizes (Only appears when layout is "Slider")

When enabled: Cards have randomized sizes in the slider
When disabled: All cards have uniform size

Randomize Card Sizes on Mobile (Only appears when "Randomize Card Sizes" is enabled)

When enabled: Randomized sizes apply on mobile
When disabled: Cards use uniform size on mobile

Section Header

Position Where the section header appears

Stick to Top

When enabled: Header stays visible when scrolling
When disabled: Header scrolls with the page

Section Header Block The Section Header block can contain:

Heading blocks for collection titles
Text blocks for descriptions
Button blocks linking to the collection
Icon blocks and other common blocks

Section Design Options

Color Scheme

Choose from your theme's color schemes
Applies to the entire section

Top Padding

Controls space above the section
Options: None, Smaller, Default, Larger, Largest

Bottom Padding

Controls space below the section
Options: None, Smaller, Default, Larger, Largest

Extend Section Width

When enabled: Section extends to full browser width
When disabled: Section stays within container width

Show Media Background

When enabled: You can add a background image or video
When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

Upload an image or video for the section background

Background Overlay (Only appears when background is set)

Add a color overlay on top of the background
Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

Adds a scrolling parallax effect to the background
Options: None, Subtle, Medium, Strong

Push Content Down (Only appears when background is set)

Adjusts how content sits on the background

Make Section Full Height

Makes the section fill the entire viewport height

Product Card Options

Each product in the Featured Collection section uses a Product Card. You can customize what information appears on each card.

Available Product Blocks

Inside each Product Card, you can add or remove these blocks:

Product Information Blocks:

Product Title
Product Price
Product Vendor
Product SKU
Product Description
Product Rating
Product Badges

Product Functionality Blocks:

Product Variants (Standard & Compact)
Product Thumbnail
Product Share
Product Inventory Availability

Product Media:

Product Thumbnail (automatically included)

Card Styling Options

Each product card has styling options:

Text alignment
Padding and spacing
Background colors or images
Border radius
Color schemes

The Featured Collection section also supports Promo Cards that can be mixed with product cards:

Add promotional content between products
Use for special offers, announcements, or featured content
Can contain any common blocks (Heading, Text, Image, Button, etc.)

Common Use Cases

Collection Showcase

Select a collection to display
Show 6-12 products from the collection
Use grid layout with 3-4 cards per row
Add section header with collection name and "View All" button

Best Sellers Display

Create a "Best Sellers" collection
Display top products automatically
Use slider layout for featured display
Mix with promo cards for special offers

New Arrivals

Create a "New Arrivals" collection
Automatically show newest products
Use scattered editorial layout for magazine feel
Add section header highlighting new products

Sale Collection

Create a sale collection
Display products on sale
Use standard grid for easy browsing
Add promotional cards for sale messaging

Tips for Success

Collection Management

Keep Collections Updated - Regularly update collection products
Product Order - Arrange products in collection for desired display order
Collection Size - Use "Products Per Page" to limit display count

Layout

Grid vs Slider - Use grid for browsing, slider for featured content
Card Size - 3-4 cards per row works well for product displays
Mobile - Always preview on mobile devices

Product Cards

Consistent Information - Show the same product blocks on each card
Card Styling - Use consistent styling across all product cards
Product Images - Ensure all products have quality images

Strategic Placement - Use promo cards to break up product grids
Relevant Content - Keep promo content related to the collection
Visual Balance - Balance promo cards with product cards

Troubleshooting

Products Not Showing

Problem: Selected collection products don't appear.

Solutions:

Check Collection - Verify collection is selected and has products
Products Per Page - Check if limit is too low
Product Visibility - Ensure products are published and available
Manual Selection - If using manual products, verify they're selected

Cards Look Different

Problem: Product cards have inconsistent appearance.

Solutions:

Standardize Blocks - Show the same blocks on each card
Use Stretch Alignment - Set cards alignment to "Stretch"
Card Styling - Apply consistent card styling settings

Collection Updates Not Reflecting

Problem: Changes to collection don't show in section.

Solutions:

Refresh Section - Section updates when collection changes
Product Count - Check "Products Per Page" setting
Cache - Clear browser cache if changes don't appear