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.

Editing the product gallery

The settings start with some options related the product gallery.

Product gallery options:

• Minimum media aspect ratio - Control image proportions, but keep in mind that images will get cropped if there is too much content on the right side.
• Media focal point - Chose a focal point to make sure that even if you have cropping, the most important part of the image will still be in view.
• Fit media inside container - If true, images will not crop, but be contained in the gallery area.
• Enable horizontal parallax in slider - Enables a subtle horizontal parallax effect when swiping between product images.
• Enable video looping - Videos loop continuously, rather than pausing after the last frame.
• Enable video autoplay

Card styling options

Each product card has styling options:

Card style:

• Text container width - Small, medium, or large
• Inner content alignment - When the text has a smaller height than the product gallery, you can choose how to align it vertically.
• Text alignment - Left, center, or right
• Padding - Space inside the card
• Spacing - Gap between blocks inside the card
• Background - Card background color or image
• Corner radius - Rounded corners
• Color scheme - Apply a certain set of colors

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 - Displays star rating from compatible app.
• Product badges - Sale badges, custom 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 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

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

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

Cards look uneven

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

Images not displaying

Problem: Product images don't show up.

Solutions:

1. Check product images - Ensure products have images uploaded
2. Check file size - Very large images may load slowly