Shop the look

Copy

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

The Shop the look section lets you showcase an entire outfit or collection of related items that are styled together for customers to view and purchase.

1. 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 block	Product	Attach an image hotspot showing product.

2. 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 in Template.
Click "Add Section".
Select "OT: Shop the look (#number of variant)".

3. Highlight Features

Shoppable Look Image: Display a styled outfit or collection with clickable hotspots so customers can shop directly from the image.
Product Hotspots (Up to 5): Add up to five product hotspots on a single image—each linked to a real product—to highlight key items in the look.
Product Display Customization: Control product image ratio, hover effects, title size, content alignment, and choose whether to show vendor or ratings.

4. Common Use Cases

🤔 How to set up Shop the look section?

STEP 1: Add the section

Add Shop the look section to your desired position.

STEP 2: Add a shoppable image to the section

Click on the Shop the look section to open its settings panel.

Choose the Image you want to display on desktop/mobile devices.
Choose the image size on desktop devices.

STEP 3: Add & customize product hotspot

Add a Product block to add a hotspot on the shoppable image. You can add up to 5 blocks (also 5 hotspots on the image). Click on the block to open the settings panel:

Select the Product you want to associate with the hotspot.
Choose the hotspot Color.
Adjust the hotspot position for desktop and mobile devices.

STEP 4: Click "Save" and preview.

🤔 How to customize the look of Shop the look section?

STEP 1: Open the section

Click on the Shop the look to open its settings panel.

STEP 2: Add section content

Add Heading & Subheading to the section.
Adjust their size and alignment.

STEP 3: Customize product display

At Product settings group:

Adjust the size of the product title.
Choose product Image ratio, effect when hovering the image, product image reveal effect....
Choose Content alignment.
Choose colors for the background, product name, and price text.
Choose to show product vendor or product rating.

STEP 4: Customize Desktop/Mobile layout

In the Desktop layout and Mobile layout setting groups:

(Optional) Choose to Show section divider.
Adjust padding.

STEP 5: Choose colors for section elements

In Colors settings group, choose colors for section elements such as background, heading, divider...

STEP 6: Click "Save" when done.

5. Layout Recommendations

The Shop the look section has 4 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!

📂 Shop the look #1

Check out demo here.

📂 Shop the look #2

Check out demo here.

📂 Shop the look #3

Check out demo here.

📂 Shop the look #4

Check out demo here.

6. Support Information

Need help? Contact our support team at Omni Themes Support .