Shop the look section
The Shop the look section of Local shows a lifestyle image next to the products it features, as product cards.
Applies to: Local 4.2.1 and later. Added in: Local 1.0.0. Last checked: 2026-10-13 against Local 4.2.1.
The Shop the look section shows one lifestyle image next to a slider of the products it features, as product cards. Use it for a complete outfit, a recipe with its ingredients or a set of products that belong together.
Where to find it: Online Store → Themes → Customize → Add section → Shop the look
Content
- Image is the picture of the look, for example a photo with all the products together. It fills the left side of the section on desktop and tablets, behind the start of the product slider, and sits above the products on small phones.
- Products are the products of the look, up to 6, shown as a slider of product cards in the order you pick them.
Design
- Custom card design sets the card that holds the image and the products: Background, Border, Hide border and Hide shadow.
- Background color, Background gradient and Heading text color color the section around the card; Descrease top margin and Remove top margin set the space above it.
The heading, SEO and visibility settings are the standard ones, see General section styling.
Product card blocks
The product cards are built from blocks: Price, Title, Quick buy, Vendor, Rating, Local availability, Icons list, Dynamic text, Product link and Empty space (up to 9 blocks). Add Quick buy so customers can add each product of the look to the cart without leaving the page. Each block is explained in Product grid blocks.
Can I place dots on the image for each product?
Not in this section. For dots on the picture that open a product tooltip, use the Image with hotspots section.
All Shop the look settings
Every setting, with its type and default.
Accepts these blocks: Price, Title, Quick buy, Vendor, Rating, Local availability, Icons list, Dynamic text, Product link and Empty space (up to 9 blocks in the section).
Shop the look section: Heading
Where to find it: Shop the look → Heading
The Shop the look section uses the standard Heading settings, listed in General section styling.
Heading (text field, default: "Shop the look").
Subheading (text field, default: "Showcase your best products").
Text alignment (dropdown, default: Left). Options: Left, Center.
Show section link (checkbox, default: off): Adds a text link next to the section heading. Fill Link text and Link too.
Link text (text field). Shown only when Show section link is on.
Link (link). Shown only when Show section link is on and Link text is set.
Open link in a new window (checkbox, default: off). Shown only when Link is set and Show section link is on and Link text is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Shop the look").
Shop the look section: Content
Where to find it: Shop the look → Content
Image (image): Sets the picture of the look. It fills the left side of the section on desktop and sits above the products on small phones.
Products (products picker, up to 6): Sets the products of the look, up to 6, shown as a slider of product cards.
Shop the look section: Custom card design
Where to find it: Shop the look → Custom card design
The Shop the look section uses the standard Custom card design settings, listed in General section styling. Not available in this section: Text and Shadow.
Background (color, default: transparent): Sets the background of the card that holds the image and the products.
Border (color, default: transparent).
Hide border (checkbox, default: off).
Hide shadow (checkbox, default: off).
Background color (color, default: transparent).
Background gradient (gradient).
Heading text color (color, default: transparent): Sets the color of the text outside the cards, mostly the section heading.
Descrease top margin (checkbox, default: off): Sets the space above the section to the grid gap of Theme settings → Layout → Horizontal space, instead of the full space between sections. Shown only when Remove top margin is off.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it. Shown only when Descrease top margin is off.
These settings differ from the standard ones or exist only here:
Background color (color, default: transparent).
Background gradient (gradient).
Heading text color (color, default: transparent): Sets the color of the text outside the cards, mostly the section heading.
Descrease top margin (checkbox, default: off): Sets the space above the section to the grid gap of Theme settings → Layout → Horizontal space, instead of the full space between sections. Shown only when Remove top margin is off.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it. Shown only when Descrease top margin is off.
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 tag of the heading for search engines. It does not change how the heading looks. Options: H1, H2, H3, H4, span.
Shop the look section: Visibility
Where to find it: Shop the look → Visibility
The Shop the look section uses the standard Visibility settings, listed in General section styling.
Section visibility (dropdown, default: Show always): Shows the section on every screen, only below 768 px (mobile) or only from 768 px (desktop, tablets included). A hidden section is still in the page. Options: Show always, Show only on mobile, Show only on desktop.
Price block
Where to find it: Shop the look → Add block → Price
One Price block per section.
The Price block has no settings in Local 4.2.1.
Title block
Where to find it: Shop the look → Add block → Title
One Title block per section.
The Title block has no settings in Local 4.2.1.
Quick buy block
Where to find it: Shop the look → Add block → Quick buy
One Quick buy block per section.
The Quick buy block has no settings in Local 4.2.1.
Vendor block
Where to find it: Shop the look → Add block → Vendor
One Vendor block per section.
The Vendor block has no settings in Local 4.2.1.
Rating block
Where to find it: Shop the look → Add block → Rating
One Rating block per section.
The Rating block has no settings in Local 4.2.1.
Local availability block
Where to find it: Shop the look → Add block → Local availability
One Local availability block per section.
This theme shows local availability for products. See Collection page.
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 theme settings.
Dynamic text block
Where to find it: Shop the look → Add block → Dynamic text
Label metafield (text field): Type the product metafield to show, as namespace.key (for example custom.product_info). The theme reads it for every product card; products without a value show nothing in this line.
Text size (dropdown, default: Regular): Sets the size of the metafield text in the card. Options: Small, Regular, Large.
Text color (color, default: #6A6A6A): Sets the color of the metafield text (grey by default).
Text transform (uppercase) (checkbox, default: off): Shows the metafield text in capital letters.
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 that opens the product page.
Empty space block
Where to find it: Shop the look → Add block → Empty space
The Empty space block has no settings in Local 4.2.1.