The Shop the look section allows you to add image and link individual products directly within the image. Shoppers can click on hotspots to explore and purchase each featured item, making it easier to discover and buy complementary products.
In this guide, you'll learn how to customize the Shop the look section to create visually engaging and shoppable experiences for your customers.
You can access a Shop the look by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Shop the look.
You can configure some general options for the Shop the look section below:
This is the main section for configuring how a "shop the look" feature will appear and function on your online store.
Color scheme: Allows you to choose a predefined color theme that matches your website's overall design.
Image: This option is for selecting the main image that will represent the "look."
+ Select: Used to choose the main image that will display on the desktop version.
+ Explore free images: Opens a library of free images you can browse and select from if you don’t have your own.
Mobile image: This option allows you to choose a separate image for the mobile view. If none is set, desktop image will be used.
Button label: This is the text that will appear on the button. This label will be shown when users view the section on mobile devices.
Image ratio: Lets you choose how product images are displayed, options included:
+ Adapt to image: The image keeps its original aspect ratio.
+ Portrait: Displays the image in a vertical (tall) format, often around a 2:3 ratio.
+ Square: Forces all images to be displayed in a 1:1 (square) ratio.
+ Landscape: Displays the image in a horizontal (wide) format, like 3:2 or similar.
+ 4:3: Displays the image in a classic 4:3 ratio.
Show vendor: Turn on/off to show or hide the product vendor name on the product card.
Caption: Enter a small piece of text that appears above the main heading — often used to label or introduce the section
Heading: This box is where you input the heading of section. You can format the text using bold, italic, link...
Heading size: Choose the font size of the heading. Options included like Large, Medium, Smalll, Extra small, Extra extra small.
Heading style: Choose the style of the heading, options included:
+ Normal: Displays the heading with standard capitalization.
+ Uppercase: Displays the heading in all capital letters.
Heading tag: Sets the HTML tag of the heading, which does affect SEO. You can also change the Heading tag to:
+ H1-H6: Sets the HTML tag of the heading, which does affect SEO.
+ div: A generic container element with no semantic meaning.
+ span: An inline element, also with no semantic value.
+ p: Wraps the heading in a paragraph tag, meaning it's treated as regular text (not a heading).
Description: Text editor for adding a description below the heading. Supports formatting like bold, italic, lists, links, etc.
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
Title maximum lines: Sets how many lines a product title can take up. The value = 0 to automatic line wrap (no limit). If enabled (set to 1, 2, etc.), it limits how many lines are shown, which can affect hover effects or truncation.
Show secondary image on hover: When turned on, hovering over a product image will show the second image (if available).
Use pre-order badge: Displays a “Pre-order” label on products that are not yet available but can be ordered in advance.
Use new badge: Adds a “New” label to newly added products.
Automatic “New” badge period: Sets how long (in days) a product is considered “New” after it's created.
Use on sale badge: Displays a badge on products that are currently discounted.
On sale badge display style: Choose how the sale badge appears:
Text: A simple label like “Sale.”
Percentage: Shows how much discount in % (e.g., “-20%”).
Use sold out badge: Displays a “Sold Out” label on products that are out of stock.
Use collection link on vendor:
Off: Vendor names will not be linked.
On: The vendor name will link to a collection page that matches the vendor name (requires a collection with the same name to exist).
To add a Product block, click the Add Product button (plus icon ➕) under the Shop the look section.
You can configure some general options for the Product block below:
Hotspot style: There are two options to customize for hotspot style
+ Outline: Displays the hotspot with just a border (transparent background).
+ Solid: Displays the hotspot with a filled-in background (more prominent).
Horizontal position: Sets the left/right placement of the hotspot on the image (as a percentage of the image width).
Vertical position: Sets the top/bottom placement of the hotspot on the image (as a percentage of the image height).
Mobile horizontal position: Sets the left/right placement of the hotspot on the image (as a percentage of the image width) for mobile screens.
Mobile vertical position: Sets the top/bottom placement of the hotspot on the image (as a percentage of the image height) for mobile screens.
Product: Selects which product is associated with this hotspot.
