Shop the look
Overview
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.
Before you begin
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.
Good to know
A mobile image is optional. When it is empty, Radian uses the main image on mobile.
Add the section
Add Shop the look to the template where you want customers to see it.
- From Shopify admin, go to Online Store > Themes, find Radian, and select Customize.
- Use the page selector at the top of the Theme Editor to open the required template.
- In the template panel, select Add section, choose Shop the look, and select Save.
Set up the section
Start with the media and layout. Add text and purchasing controls only after the image displays at the intended size.
SECTION SETUP
| Section width | Use Full width for an edge-to-edge scene. Turn it off to choose Page, Content, Narrow, or Custom width. |
|---|---|
| Desktop height | Choose Adapt to media to preserve the image ratio, Percent of viewport for a screen-based hero, or Fixed for a consistent pixel height. |
| Mobile height | Set the mobile height independently so the scene remains readable on narrow screens. |
| Media | Select the main image, then add a Mobile image when the desktop crop does not work well on smaller screens. |
| Section text | Add the subheading, heading, and description. Use the style and alignment controls to match the selected color scheme. |
| Hotspot style | Thumbnail panel shows a product panel. Label expand uses a compact expandable label. |
| Quick buy | Enable Show quick buy when customers should be able to purchase an assigned product from the section. |
| Spacing | Use the desktop and mobile section spacing controls to separate the section from neighboring content. |
Add and position hotspots
Add one Hotspot block for each product or collection shown in the scene. The section supports up to six hotspots.
- Select Add block > Hotspot.
- Assign a Product or Collection. Add an override title only when the storefront label should differ from the assigned resource.
- Move Horizontal position and Vertical position until the marker sits on the correct item in the desktop image.
- Switch the Theme Editor to mobile preview and set Horizontal position (mobile) and Vertical position (mobile).
- Choose the label or panel position so the expanded content does not cover the product.
HOTSPOT OPTIONS
| Product | Displays product information and supports Quick buy. |
|---|---|
| Collection | Links the hotspot to a collection instead of a single product. |
| Override link | Provides a destination when the hotspot should open another page. |
| Desktop position | Controls the marker location on the main image. |
| Mobile position | Controls the marker location on the mobile image independently. |
| Label position | Places the expanded label to the left, right, top, or bottom of the marker. |
| Panel position | Places a Thumbnail panel on the left or right side of the section. |
Check the result
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.
Troubleshooting
COMMON ISSUES
| Hotspot is misplaced on mobile | Adjust the mobile position values. Do not change the desktop values to correct a mobile-only issue. |
|---|---|
| Quick buy does not appear | Confirm that the hotspot has a product assigned and Show quick buy is enabled. |
| Panel covers the subject | Change Panel position or move the hotspot farther from the image edge. |
| Image is cropped | Use Adapt to media or adjust the desktop or mobile height mode. |