Shop the look turns an editorial image into a shoppable scene. Customers can select a hotspot to see the assigned product or collection without first searching the catalog.

Use this section for complete outfits, room sets, gift guides, or any image that shows several products together.

Prepare the final desktop and mobile images before placing hotspots. Hotspot positions are saved as percentages of the displayed image, so changing the crop later can move a hotspot away from the product it identifies.

Add Shop the look to the template where you want customers to see it.

1. From Shopify admin, go to Online Store > Themes, find Radian, and select Customize.
2. Use the page selector at the top of the Theme Editor to open the required template.
3. In the template panel, select Add section, choose Shop the look, and select Save.

Start with the media and layout. Add text and purchasing controls only after the image displays at the intended size.

Add one Hotspot block for each product or collection shown in the scene. The section supports up to six hotspots.

1. Select Add block > Hotspot.
2. Assign a Product or Collection. Add an override title only when the storefront label should differ from the assigned resource.
3. Move Horizontal position and Vertical position until the marker sits on the correct item in the desktop image.
4. Switch the Theme Editor to mobile preview and set Horizontal position (mobile) and Vertical position (mobile).
5. Choose the label or panel position so the expanded content does not cover the product.

Preview every hotspot on desktop and mobile. Open each hotspot, follow its link, and test Quick buy on products with and without variant options before publishing the template.