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
Tip: Disable this when merchants are adding the wrong variants in their cart.
Tip: Read about general section styling here: Seventh section general styles.
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
When videos are autoplaying, they will be muted and they will not pause when the user interacts with the variants.
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:
- Check product selection - Make sure products are selected in settings
Cards look uneven
Problem: Product cards have uneven heights.
Solutions:
- Use stretch alignment - Set "Cards alignment" to "Stretch"
- Check content - Products with more information create taller cards
- Standardize blocks - Show the same blocks on each card
Images not displaying
Problem: Product images don't show up.
Solutions:
- Check product images - Ensure products have images uploaded
- Check file size - Very large images may load slowly