1. What is Shop the look?
Shop the look is an interactive feature commonly used on the homepage to enhance the shopping experience. It allows customers to view and purchase an entire outfit or collection of related items that are styled together.
This feature is designed to support and guide upsell strategies by recommending products that complement each other.
2. Section Components
| Section |
Shop the look |
Display an entire outfit or collection of related items that are styled together for customers to view and purchase. |
|---|---|---|
| Available blocks | Product with text | Attach an image hotspot showing products with descriptive text. |
| Collection with text |
Attach an image hotspot showing a collection with descriptive text. |
|
| Media with text |
Attach an image hotspot showing media with descriptive text. |
3. Location & Setup
To add & set up the Shop the look section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Decide where you want to place the new section.
- Click “Add Section”.
- Select “Shop the look”.
4. Highlight Features
- Shoppable image hotspots: Turn any image into an interactive shopping experience. Add product, collection, or media hotspots to showcase items directly on lifestyle photos.
- Multi-type hotspot blocks: Choose from three hotspot types—Product with text, Collection with text, and Media with text—to highlight different kinds of content and boost discovery.
- Precise hotspot positioning: Individually adjust hotspot vertical/horizontal placement for desktop and mobile to ensure perfect alignment across devices.
5. Common Use Cases
🤔 How to set up Shop the look section?
If you want to set up the Shop the look section but don’t know how to start. Here’s quick steps to begin:
STEP 1: Add the section
Add Shop the look section.
STEP 2: Add a shoppable image to the section
Click on the section to open its settings panel. Choose the Image you want to display on desktop/mobile devices.
STEP 3: Add image hotspots to the section
Under Shop the look section, you can add up to 5 blocks to set up those as image hotspots:
- To add products to show as image hotspots 👉 Add & set up Product with text block.
- To add a collection to show as image hotspots 👉 Add & set up Collection with text block.
- To add media to show as image hotspots 👉 Add & set up Media with text block.
For further guidance on setting up these blocks, please refer to the following use cases.
STEP 4: Section general settings
Back to Shop the look section:
- Add Heading, Subheading for the section.
- Customize Desktop layout/Mobile layout:
- Choose the shoppable image size and content size for desktop devices.
- Choose section width, height, padding.
- Enable the section divider if you want.
STEP 5: Click “Save” when done.
🤔 How to add products to show as image hotspots?
STEP 1: Add the block
Udnder Shop the look section, add Product with text block. Click on it to open the settings panel.
STEP 2: Add products to display
- Select the Product you want to associate with the hotspot.
- If you want to display multiple products in 1 image hotspot, choose products (up to 4) in the Product list.
STEP 3: Add text content
- Add more descriptive content to display at Heading and Text.
- Choose Content alignment.
STEP 4: Customize the hotspot’s look and position
- Choose Hotspot color.
- Adjust its position for desktop and mobile devices.
STEP 5: Customize the display of product cards
Back to Shop the look settings panel, scroll down to Product settings group:
- Choose Image ratio and adjust Content alignment.
- Choose elements to show such as Quick view button, vendor, product rating…
STEP 6: Click "Save" to apply changes.
🤔 How to add a collection to show as image hotspots?
STEP 1: Add the block
Under Shop the look section, add Collection with text block. Click on it to open the settings panel.
STEP 2: Add & customize the collection to display
- Select the Collection you want to associate with the hotspot.
- Choose a Custom image to feature the collection if you don’t want to use the default image. Adjust Image style.
- To show the number of collection’s products, toggle Show item count ON.
- Adjust Collection title size and Collection text size.
STEP 3: Add text content
- Add more descriptive content to display at Heading and Text.
- Choose Content alignment.
STEP 4: Customize the hotspot’s look and position
- Choose Hotspot color.
- Adjust its position for desktop and mobile devices.
STEP 5: Click "Save" to apply changes.
🤔 How to add media to show as image hotspots?
STEP 1: Add the block
Under Shop the look section, add Media with text block. Click on it to open the settings panel.
STEP 2: Add & customize the media to display
- Add an Icon/Custom icon image to display.
- Add Image or embed Video to display.
- Adjust Media ratio and Media position.
Note:
- If you add an image, the icon will automatically hide.
- If you add both an image and a video, the image will be used as the video thumbnail.
STEP 3: Add text content
- Add more descriptive content to display at Heading and Text.
- Choose Content alignment.
STEP 4: Customize the hotspot’s look and position
- Choose Hotspot color.
- Adjust its position for desktop and mobile devices.
STEP 5: Click "Save" to apply changes.
6. Support Information
Need help? Contact our support team at Omni Themes Support.
