Seventh > Sections > Featured products list

Featured products list

The Featured products list section lets you showcase specific products from your store in a beautiful grid layout. Perfect for highlighting your best sellers, new arrivals, or special promotions!

What it does

This section automatically creates product cards for each product you select. Each card displays:

• Product images (with image gallery if multiple images)
• Product title
• Product price
• Product variants (colors, sizes, etc.)
• Add to cart button
• And more product information you choose to show

Section settings explained

Products selection

Products

• Select which products to display in this section
• You can choose any products from your store
• Products appear in the order you select them
• You can add or remove products anytime

Functionality options

Default to first variant

• When enabled: The first available variant is automatically selected
• When disabled: Customers must select a variant before adding to cart

Layout options

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

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 - Section title (e.g., "Featured Products")
• Text - Description or introduction
• Button - Call-to-action button
• Icon - Visual elements
• Group - To organize multiple blocks together

Section design options

Color scheme

• Choose from your theme's color schemes
• Applies to the entire section, but not the featured product card, which has it's own color scheme

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)

• Creates a huge padding at the top of the section
• It pushes all content down by almost 100vh, in order to let the user see the background before getting to the actual content.

Make section full height

• Makes the section fill the entire viewport height

Customizing product cards

Each product in your Featured products list section uses a Featured product card. You can customize what information appears on each card.

Available Product Blocks

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

Product Information Blocks:

• Product Title - The product name
• Product Price - Current price and compare-at price
• Product Vendor - Brand or manufacturer name
• Product SKU - Product code
• Product Description - Product details
• Product Rating - Star ratings and reviews
• Product Badges - Sale badges, new badges, etc.

Product Functionality Blocks:

• Product Variants - Color swatches, size options, etc.
• Add to Cart - Buy button with quantity selector
• Product Inventory - Stock availability
• Product Share - Social sharing buttons

Product Media:

• Product Thumbnail - Product images (automatically included)

Product Block Settings

Each product block has customizable settings:

Product Title Block:

• Font selection (body, headings, accent)
• Size options
• Text style and weight
• SEO heading tag

Product Price Block:

• Text size
• Color and formatting
• Display options

Product Variants Block:

• Display style (radio buttons, dropdown)
• Color swatch size
• Variant image tooltips
• Unavailable variant handling

Add to Cart Block:

• Button style and size
• Quantity selector visibility
• Dynamic checkout buttons
• Price display options

Card Styling Options

Each product card has styling options:

Card Style:

• Text Alignment - Left, center, or right
• Padding - Space inside the card
• Spacing - Gap between blocks inside the card
• Background - Card background color or image
• Border Radius - Rounded corners
• Color Scheme - Apply theme colors

Media Options:

• Gallery Aspect Ratio - Control image proportions
• Aspect Ratio Fit - How images fit in the gallery
• Video Autoplay - Automatically play product videos
• Video Looping - Loop product videos

Common Use Cases

Showcase Best Sellers

• Select top-selling products
• Add Section Header with heading and descriptive text
• Use "Stick to Top" header option for easy navigation
• Customize card styling to match brand

Highlight New Arrivals

• Select newest products
• Add Section Header with heading and button
• Use vibrant color scheme
• Enable product badges to show "New" tags

Create a Sale Section

• Select products on sale
• Add Section Header with promotional heading and text
• Use bold color scheme
• Ensure product prices show compare-at prices
• Enable product badges to show "Sale" tags

Build a Product Comparison

• Select 2-4 similar products
• Use "Stretch" card alignment for uniform heights
• Show the same product information blocks on each card
• Use clean, minimal design

Tips for Success

Product Selection

• Quality over Quantity - Feature 4-8 products for best results
• Mix It Up - Include products at different price points
• Update Regularly - Refresh featured products to keep content fresh

Layout

• Consistent Heights - Use "Stretch" alignment for uniform card heights
• Spacing - Use "Regular" or "Large" grid gap for breathing room
• Mobile First - Always preview on mobile devices

Design

• Color Contrast - Ensure text is readable on backgrounds
• Focus on Products - Don't let backgrounds distract from products
• Brand Consistency - Use your theme's color schemes

Performance

• Image Optimization - Use properly sized product images
• Limit Products - Too many products can slow down the page
• Test Loading - Check how the section loads on slower connections

Troubleshooting

Products Not Showing

Problem: Selected products don't appear in the section.

Solutions:

1. Check Product Selection - Make sure products are selected in settings
2. Verify Products Are Published - Products must be active and available
3. Check Visibility - Ensure products aren't hidden or password-protected

Cards Look Different Heights

Problem: Product cards have uneven heights.

Solutions:

1. Use Stretch Alignment - Set "Cards Alignment" to "Stretch"
2. Check Content - Products with more information create taller cards
3. Standardize Blocks - Show the same blocks on each card

Header Not Sticking

Problem: Section header doesn't stay visible when scrolling.

Solutions:

1. Enable Sticky - Check "Stick to Top" is enabled
2. Check Position - Sticky only works when header is at "Top"
3. Browser Support - Some older browsers may not support sticky headers

Images Not Displaying

Problem: Product images don't show up.

Solutions:

1. Check Product Images - Ensure products have images uploaded
2. Verify Image Format - Use JPG, PNG, or WebP formats
3. Check File Size - Very large images may load slowly