Featured products list section
The Featured products list section shows one or more products with gallery, price, variants and buy buttons, like a product page, in Seventh.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Featured products list section shows the products you pick as large product cards, each with a media slider and buy options. Customers can buy from the section without opening the product page.
Where to find it: select Add section in the theme editor, then choose Featured products list or Featured products list: split. In the editor's section list the section is called Producst list (a typo in the theme).
What the section shows
- One Featured product card for each product in Products, stacked one below the other.
- Each card has a media slider on the left and the product blocks on the right. On tablets and mobile the media sits above the text.
- An optional section header. The Featured products list: split preset puts a sticky section header on the left of the cards.
You edit one Featured product card and Seventh repeats its design for every product.
Add products
Open the section
Select the Featured products list section in the theme editor.
Select the products
Under Products, select Select and choose the products. The cards appear in the order you choose them.
Design one card
Select Featured product card and add, remove or reorder its product blocks. Every product in the section uses this design.
Functionality
- Select the first available variant by default selects the first available variant of each product when the page loads.
- When it is off, the Add to cart button stays inactive until the customer selects a variant.
Tip: Disable this when merchants are adding the wrong variants in their cart.
Layout and section design
- Cards alignment sets how cards of different heights line up. Stretch makes them all as tall as the tallest one.
- The section header and Section design settings are the standard ones.
Tip: Read about general section styling here: Seventh section general styles.
Featured product card
The Featured product card holds the media gallery and the product blocks of each product. Its Product setting is filled with each product of the section's Products list, so leave it connected.
The Quick view popup that opens from Quick buy uses the same Featured product card. You edit it in the Products → quick-view template. See Product card theme settings.
Product gallery and videos
The card's first settings control the gallery:
- Minimum media aspect ratio sets the shape of the media. The card grows taller when the text needs more height.
- Media focal point keeps the most important part of the media in view when it is cropped.
- Fit media inside container shows the whole media without cropping.
- Enable horizontal parallax in slider adds a subtle effect when customers swipe between media.
- Filter media by variant shows only the media of the selected variant.
- Enable video looping and Enable video autoplay control product videos.
When videos are autoplaying, they will be muted and they will not pause when the customer interacts with the variants.
Product blocks
The presets add Product title, Product price, Product variants, Buy buttons and Inventory availability. You can add more, for example Product vendor, Product description, Product badges or Product rating.
- See Product information blocks for title, price, vendor, rating and the others.
- See Product variants and buy buttons blocks for Product variants and Buy buttons.
Why are the selected products not showing?
Products is empty, or the products are not available on the Online Store sales channel. With an empty Products list the section shows one placeholder card. Check that each product is active and published to the Online Store in Shopify admin → Products.
Why is Filter media by variant missing?
Select the first available variant by default is off. Filter media by variant needs a selected variant, so it is shown only when that setting is on. How to order the media for the filter is explained on Product page.
Why are my product cards different heights?
Each product has a different amount of text and media. Set Cards alignment to Stretch in the section settings. Minimum media aspect ratio also sets a minimum height for the gallery, and the card grows taller when the text needs more space.
All Featured products list settings
Every setting on this page, one list per section or block, with its type and default.
Products (products picker): Sets the products the section shows, one Featured product card each, in the order you select them.
Featured products list section: Functionality
Where to find it: Producst list → Functionality
Select the first available variant by default (checkbox, default: on): Selects the first available variant of each product when the page loads. When off, customers must select a variant before they can add the product to the cart.
Featured products list section: Layout
Where to find it: Producst list → Layout
Cards alignment (dropdown, default: Top): Sets how cards of different heights line up in a row. Stretch makes every card in a row as tall as the tallest one. Options: Top, Center, Bottom, Stretch.
Stretch alignment type (dropdown, default: Space between): Sets where the blocks sit inside each stretched card. Space between pins the first block to the top and the last block to the bottom. Options: Top, Center, Bottom, Space between, Space around. Shown only when Cards alignment is Stretch.
Grid gap (dropdown, default: Default): Sets the space between cards. None places the cards edge to edge. Options: None, Default, XXSmall, XSmall, Small, Regular, Large, XLarge, XXLarge.
Featured products list section: Section header
Where to find it: Producst list → Section header
Position (dropdown, default: Top): Sets where the section header sits: Top places it above the cards, Left places it in a column beside them. Options: Top, Left.
Stick to top (checkbox, default: off): Keeps the section header in view while customers scroll through the section, on screens 1024 px wide and larger.
Featured products list section: Section design
Where to find it: Producst list → Section design
The Featured products list section uses the standard Section design settings, listed in General section styling.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Extend section width to the edges of the screen (checkbox, default: off). Shown only when Position is Top.
Show media background (checkbox, default: off): Shows a background image or video behind the section content.
Background image (image). Shown only when Show media background is on.
Background image (mobile) (image): Replaces the background image on screens narrower than 768 px. Shown only when Show media background is on and Background image is set.
Background video (video): Plays a muted, looping video behind the section content. When both a video and an image are set, the video is shown. Shown only when Show media background is on.
Media overlay (dropdown, default: Color): Sets the layer over the background media: a flat color or a gradient. Options: Color, Gradient. Shown only when Show media background is on.
Overlay color (color with transparency). Shown only when Show media background is on and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Show media background is on and Media overlay is Gradient.
Parallax effect (dropdown, default: Medium): Moves the background media at a different speed than the page while customers scroll. Subtle, Medium and Strong move it by up to 5, 10 and 20 percent. Options: None, Subtle, Medium, Strong. Shown only when Show media background is on.
Push content down (checkbox, default: off): Replaces Top padding with a larger top space, so more of the background media shows above the content. Shown only when Show media background is on.
Make section full height (checkbox, default: off): Makes the section at least as tall as the screen and centers the content vertically.
Where to find it: Producst list → Featured product card.
Accepts these blocks: Product title, Product description, Product price, Product vendor, Product rating, Product badges, Content group, Product variants, Product siblings, Buy buttons, Inventory availability, Pickup availability, Product SKU / barcode, Product tax info, Disclosures, Product share, Back in stock alert, Custom property, Variant metafield, any theme block and app blocks.
Product (product picker): Sets the product of the card. In the Featured products list section it is filled with each product of the Products list, so leave it connected.
Featured product card: Product gallery
Where to find it: Producst list → Featured product card → Product gallery
Minimum media aspect ratio (dropdown, default: Square (1:1)): Sets the minimum shape of the media in the gallery. The card grows taller when the text content needs more height. Options: Standard (3:2), Short (4:3), Square (1:1), Tall (5:6), Taller (2:3).
Media focal point (dropdown, default: Center): Sets which part of the media stays in view when the media is cropped to the aspect ratio. Options: Top, Center, Bottom. Shown only when Fit media inside container is off.
Fit media inside container (checkbox, default: off): Shows the whole media inside the gallery area, without cropping.
Container background (color with transparency, default: transparent). Shown only when Fit media inside container is on.
Enable horizontal parallax in slider (checkbox, default: on): Adds a subtle horizontal parallax effect when customers swipe between product media.
Filter media by variant (checkbox, default: off): Shows only the media of the selected variant. Upload the media in variant order, with the featured image of each variant as the first image of its group. Shown only when the section's Select the first available variant by default is on, or the section's Select the first available variant by default is empty.
Featured product card: Video settings
Where to find it: Producst list → Featured product card → Video settings
Enable video looping (checkbox, default: off).
Enable video autoplay (checkbox, default: off): Plays product videos automatically, muted and without controls.
Featured product card: Text content
Where to find it: Producst list → Featured product card → Text content
Text container width (dropdown, default: Large): Sets the maximum width of the text content inside its column: Small 50, Medium 70 and Large 100 percent. Options: Small, Medium, Large.
Inner content alignment (for desktop) (dropdown, default: Center): Sets where the text content sits next to the gallery on desktop when it is shorter than the gallery. Stretch spreads the blocks over the full height. Options: Top, Center, Bottom, Stretch.
Stretch type (dropdown, default: Space between): Sets how the blocks are spread when Inner content alignment (for desktop) is Stretch. Space between pins the first block to the top and the last block to the bottom. Options: Space between, Space around. Shown only when Inner content alignment (for desktop) is Stretch.
Featured product card: Card style
Where to find it: Producst list → Featured product card → Card style
Text alignment (alignment, default: Left).
Inner blocks spacing (dropdown, default: Small). Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Padding (dropdown, default: Regular): Sets the space between the edge of the card and its content. Options: XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Remove card background is off.
Remove card background (checkbox, default: off): Removes the background color and the padding of the card.
Corner radius (dropdown, default: None). Options: None, Slighty rounded, Rounded, Fully rounded. Shown only when Remove card background is off.
Color scheme (color scheme, default: Scheme 2).
Related pages
- General section styling: the Section design and Cards arrangement settings this section shares with others.
- Product page: the product page gallery and Filter media by variant.
- Product information blocks: title, price, vendor, rating and other blocks for the card.
- Product variants and buy buttons blocks: Product variants and Buy buttons.
- Featured collection section: a grid or slider of compact product cards from a collection.
Featured collection: tabs
The Featured collection: tabs section shows several collections in Seventh, one per tab, as a product grid or slider. This page lists its settings.
Features viewer
The Features viewer section in Seventh shows a large image with tabs that switch the image or zoom into hotspots on it.