The Shop the Look section helps you create a shoppable lifestyle image with product hotspots. Customers can view the products featured in the image and open the product directly from the hotspot or product card.
This section is useful for showing complete outfits, room setups, product bundles, lookbooks, or styled product combinations.
How to Set Up the Shop the Look Section in Concept
Steps:
Add the Shop the Look section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
Open the template where you want to display the section.
-
Click Add section.
-
Select Shop the Look.
-
Click Save.
After adding the section, you can upload the main image, add product hotspots, and customize the section heading and layout.
Add the main image
-
Open the Shop the Look section in the theme editor.
-
Use the Image setting to upload the main desktop image.
-
Use the Mobile image setting if you want to show a different image on mobile devices.
-
If no mobile image is selected, the desktop image will also be used on mobile.
-
Adjust the image content so there is enough space for the product hotspots.
The main image is the background image where the hotspots will appear.
Add product hotspots
-
Inside the Shop the Look section, click Add block.
-
Select the Product block.
-
In the Product setting, choose the product you want to tag on the image.
-
Use the Horizontal and Vertical position settings to move the hotspot on desktop.
-
Use the Horizontal mobile and Vertical mobile position settings to control the hotspot position on mobile.
-
Repeat the same process for each product you want to tag.
The section supports up to 6 product blocks.
Configure hotspot appearance
-
Open a Product block.
-
Use the Color setting to adjust the hotspot color.
-
Move the hotspot position until it points to the correct product area in the image.
-
Check both desktop and mobile previews to make sure the hotspot is not covering important content.
On desktop, customers can hover over a hotspot to see the product title, image, and price.
Configure the heading area
-
Open the Shop the Look section settings.
-
Add a Heading if you want to display a title above the section.
-
Add a Subheading or Description if you want to include supporting text.
-
Use the Heading size and Heading alignment settings to adjust the appearance.
-
Add a Button label and Button link if you want to include a call-to-action.
-
Use the highlighted text settings if you want to apply a highlight style to part of the heading.
The heading area can be left blank if you only want to display the shoppable image and product cards.
Configure product card behavior
-
Each selected product will appear as a product card below the shoppable image.
-
The product card appearance follows your global product card settings in Theme settings.
-
If Quick view is enabled in Theme settings, clicking a hotspot can open the quick view drawer/modal.
-
If Quick view is disabled, clicking a hotspot links directly to the product page.
-
Product cards can show information such as image, title, price, vendor, rating, color swatches, quick add, and badges depending on your product card settings.
Configure colors and section layout
-
Use the Text color setting to adjust the section text color.
-
Use the Background or Background gradient settings to change the section background.
-
Use the Overlay color and Overlay opacity settings to adjust the overlay on top of the image.
-
Enable Make section full width if you want the section to span the full browser width.
-
Enable Make section rounded if you want rounded corners around the section.
-
Use the Top padding and Bottom padding settings to adjust spacing.
-
Enable Show section divider if you want a divider between this section and the next section.
Notes
-
The section supports a maximum of 6 product hotspots.
-
Each hotspot is connected to one product block.
-
Desktop and mobile hotspot positions can be configured separately.
-
The product cards below the image are generated from the products added as blocks.
-
If a product is removed from Shopify or left blank in the block, the hotspot will not link to a valid product.
-
The quick view behavior depends on the global Product quick view setting in Theme settings.
Troubleshooting
If the Shop the Look section does not display correctly, check the following:
-
Make sure the section has been added to the correct template.
-
Make sure the main image has been selected.
-
Make sure each product block has a product selected.
-
Make sure hotspot positions are adjusted for both desktop and mobile.
-
If a hotspot does not open quick view, check whether quick view is enabled in Theme settings.
-
If the product card content looks different than expected, check your global product card settings in Theme settings.
-
If the layout looks crowded on mobile, use fewer product blocks or adjust the mobile hotspot positions.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up the Scrolling Text Section in Concept
How to Set Up the Slideshow Section in Concept