Shop the look: product list section
The Shop the look: product list section in Seventh pairs an image or video on one side with product cards on the other, for styled looks.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 3.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Shop the look: product list section shows one image or video on one side and a grid of product cards on the other, so customers can buy the products of a styled look. On desktop the media stays in view while customers scroll through the products.
Where to find it: select Add section in the theme editor, then choose Shop the look: product list. In the section list of the editor the section is called Shop the look.
What it shows
- An optional section header, for a heading and text. See General section styling.
- One Shop the look card with the media and the Products list.
- A product card for every product in Products, in a grid of 2 columns. You edit one product card (thumbnail, vendor, title, price, compact variants) and Seventh uses it for every product. See Product card.
Layout
- On desktop, the media and the products each take half of the card.
- On screens 1024 px wide and larger, the media is sticky: it stays in view while the product grid scrolls.
- On tablets and mobile, the media sits above the products.
- The section has no hotspots. To link products to points on an image, use the Shop the look: product slider section or the Shop the look section.
Setting up the look
Choose the media
Select the Shop the look card and choose an Image or a Video. Set Media position to put it on the left or the right.
Select the products
Under Products, select the products of the look. They appear in the order you select them. With no products selected, the card shows 4 placeholder product cards.
Set the mobile media
Optional: choose a Mobile image or Mobile video for screens narrower than 768 px, and set its Mobile media aspect ratio.
Why is Extend section width to the edges of the screen missing?
Because this section does not support it. The Shop the look: product list section always sits inside the page container.
All Shop the look: product list settings
Every setting on this page, one list per section or block, with its type and default.
Shop the look: product list section: Layout
Where to find it: Shop the look → Layout
Cards size on mobile (dropdown, default: 2 columns): Sets how many product cards fit in one row on mobile. On screens narrower than 375 px, cards always show one per row. Options: 1 column, 2 columns.
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 the product cards, and between the media and the product grid. Options: Default, XXSmall, XSmall, Small, Regular, Large, XLarge, XXLarge.
Shop the look: product list section: Section design
Where to find it: Shop the look → Section design
The Shop the look: product list section uses the standard Section design settings, listed in General section styling. Not available in this section: Extend section width to the edges of the screen.
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.
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: Shop the look → Shop the look card.
Accepts these blocks: Product card.
Products (products picker, up to 12): Sets the products of the look, shown as product cards in the order you select them.
Shop the look card: Image
Where to find it: Shop the look → Shop the look card → Image
Image (image): Sets the image of the look.
Video (video): Plays a muted, looping video as the media of the look. When both a video and an image are set, the video is shown.
Media aspect ratio (dropdown, default: Tall (5:6)): Sets the shape of the media on desktop. Options: Square (1:1), Tall (5:6), Taller (2:3), Ultra tall (9:16).
Media position (dropdown, default: On the left): Sets on which side of the product grid the media sits on desktop. Options: On the left, On the right.
Mobile image (image): Replaces the media on screens narrower than 768 px.
Mobile video (video): Replaces the media with a muted, looping video on screens narrower than 768 px.
Mobile media aspect ratio (dropdown, default: Tall (5:6)): Sets the shape of the mobile media. Options: Square (1:1), Tall (5:6), Taller (2:3), Ultra tall (9:16). Shown only when Mobile image is set, or Mobile video is set.
Shop the look card: Card style
Where to find it: Shop the look → Shop the look card → Card style
Media overlay (color with transparency, default: rgba(0,0,0,0.03)): Sets a color layer over the media. The default is black at 3 percent opacity.
Corner radius (dropdown, default: None): Sets the corner rounding of the media. Options: None, Slighty rounded, Rounded, Fully rounded.
Related pages
- General section styling: the Section design and Cards arrangement settings this section shares with others.
- Product card: the blocks inside each product card.
- Shop the look: product slider section: an image with product hotspots next to a product slider.
- Shop the look section: the Custom grid presets with Shop the look cards and hotspots.