Shop the look section
The Shop the look section of Combine shows one image next to the products in it, built from product grid blocks.
Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Shop the look section shows one large image next to the products in it, for example a room with its furniture or an outfit with its pieces. Customers buy each product from the cards beside the image.
Where to find it: in the theme editor, select Add section and choose Shop the look.
Content
Products picks the products of the look. They show in two columns next to the image, in the order you pick them.
Layout
- Image is the look's picture. It stays in view while customers scroll the products on desktop.
- Mobile image (optional) replaces it on screens narrower than 768 px.
- Image position puts the image Left (the default) or Right of the products. On mobile the image is always above them.
- Mobile layout sets the products per row on phones: 1 column or 2 columns (the default).
- Image border radius rounds the image corners, 0 to 30 px.
The section heading, Decrease top margin and Heading tag work as described in General section styling. Shop the look has no color settings; it uses the page colors.
Blocks
The product cards are built from product grid blocks, each added once, in the order of the sidebar: Price, Title, Description, Vendor, Rating, Icons list, Dynamic text, Quick buy and Product link. A new section starts with Price, Title and Quick buy. Every block is documented in Product grid blocks.
Can I put product points on the image?
Not in this section. Shop the look shows the image and the products side by side. To place clickable points on the products in the image, use the Image with hotspots section.
Why is there no background color setting?
Because Shop the look uses the page colors from Colors theme settings; it has no background, border or shadow settings of its own. A colored background for this section needs custom CSS; see Custom CSS and code.
All Shop the look settings
Every setting of this section, with its type and default.
Accepts these blocks: Price, Title, Description, Vendor, Rating, Icons list, Dynamic text, Quick buy and Product link.
Shop the look section: Section heading
Where to find it: Shop the look → Section heading
The Shop the look section uses the standard Section heading settings, listed in General section styling.
Heading (text field, default: "Shop the look"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (formatted text, default: "Sell through custom images").
Heading size (dropdown, default: Regular). Options: Regular, Large.
Text alignment (dropdown, default: One row: Left). Options: One row: Left, Two rows: Left, Two rows: Center.
Button label (text field): Adds a button to the heading area on desktop; below 768 px it shows under the section as a full-width button.
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Shop the look"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (formatted text, default: "Sell through custom images").
Shop the look section: Content
Where to find it: Shop the look → Content
Products (products picker, up to 8): Sets the products of the look, shown in two columns next to the image in the order you pick them.
Shop the look section: Layout
Where to find it: Shop the look → Layout
Image (image): Sets the look's picture. On desktop it stays in view while customers scroll the products.
Mobile image (optional) (image): Replaces the image on screens narrower than 768 px.
Mobile layout (dropdown, default: 2 columns): Sets the products per row on phones. Options: 1 column, 2 columns.
Image position (dropdown, default: Left): Puts the image left or right of the products on desktop. On mobile it is above them. Options: Left, Right.
Image border radius (slider 0 to 30 px, default: 0 px): Rounds the corners of the image.
Shop the look section: Gutter
Where to find it: Shop the look → Gutter
The Shop the look section uses the standard Gutter settings, listed in General section styling. Not available in this section: Remove bottom margin.
Decrease top margin (checkbox, default: off): Makes the space above the section smaller.
Shop the look section: SEO
Where to find it: Shop the look → SEO
The Shop the look section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML level of the section heading for search engines; span gives it no level. It does not change the size. Options: H1, H2, H3, H4, span.
Price block
Where to find it: Shop the look → Add block → Price
One Price block per section.
The Price block has no settings in Combine 4.2.0.
Title block
Where to find it: Shop the look → Add block → Title
One Title block per section.
The Title block has no settings in Combine 4.2.0.
Description block
Where to find it: Shop the look → Add block → Description
One Description block per section.
Number of words (slider 5 to 40, default: 15): Sets how many words of the product description the card shows.
Show link to product page (checkbox, default: on): Adds a link to the product page after the description.
Vendor block
Where to find it: Shop the look → Add block → Vendor
One Vendor block per section.
The Vendor block has no settings in Combine 4.2.0.
Rating block
Where to find it: Shop the look → Add block → Rating
One Rating block per section.
The Rating block has no settings in Combine 4.2.0.
Icons list block
Where to find it: Shop the look → Add block → Icons list
One Icons list block per section.
This theme allows you to add custom product icons through dynamic content. See Dynamic icons list.
Dynamic text block
Where to find it: Shop the look → Add block → Dynamic text
One Dynamic text block per section.
Label metafield (text field, default: "custom.product_text"): Sets the product metafield to show, as namespace.key (for example custom.product_text). Type the reference; it is not a dynamic source picker. See Product grid blocks.
Text color (dropdown, default: Secondary): Shows the text in the main text color (Primary) or in a lighter shade (Secondary) Options: Primary, Secondary.
Text transform (uppercase) (checkbox, default: off).
Quick buy block
Where to find it: Shop the look → Add block → Quick buy
One Quick buy block per section.
Options display type (dropdown, default: Inline (in the product grid)): Inline shows the variant options and the add to cart button in the card; Modal shows one button that opens the quick view popup. Options: Inline (in the product grid), Modal (on click).
Don't show quick buy if product is out of stock (checkbox, default: off): Hides the quick buy button on sold out products.
Show price inside "add to cart" button (checkbox, default: on): Adds the price to the add to cart button label.
Quick buy block: Inline display settings
Where to find it: Shop the look → Add block → Quick buy → Inline display settings
Select the first available variant by default (checkbox, default: off): Selects the first available variant, so customers can add to cart in one click. Off, customers pick a variant first.
Handle unavailable variants (dropdown, default: Hide): Sets how sold out variant options show: Disable greys them out, Hide removes them, Show keeps them selectable. Options: Disable, Hide, Show.
Product link block
Where to find it: Shop the look → Add block → Product link
One Product link block per section.
Button label (text field, default: "View product"): Sets the text of the button to the product page.
Related pages
- Product grid blocks: every block of the product cards.
- Image with hotspots section: products marked on the image itself.
- Discounts and bundles: sell the products of a look as a set with a discount.
- General section styling: the standard section settings.