Shop the look

Showcase a featured image with interactive product hotspots, allowing customers to discover and shop featured products directly from the image.

How to access

1. Go to Shopify Admin → Online Store → Themes.

2. Click Customize on your active theme.

3. Click Add section on the page and choose Shop the look.

Section Settings

Setting	Description
Layout
Expand to full width	Extends the section to the full browser width.
Color scheme	Sets the background and text colors.
Background opacity	Controls the background opacity.
Content
Heading	Sets the section heading text.
Heading size	Controls the size of the heading. Choose from Small, Medium, or Large.
Text	Adds supporting text to the section.
Text position	Shows the text above or below the heading.
Desktop content alignment	Aligns the section content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered.
Image settings
Color scheme	Sets the color scheme for the image area.
Show hotspots	Displays hotspot indicators when the associated product is in stock.
Desktop image	Selects the image displayed on desktop devices. For best results, use an image with a resolution of 1340 × 1420 px.
Mobile image	Selects the image displayed on mobile devices. For best results, use an image with a resolution of 550 × 560 px.
Desktop image placement	Sets the image position on desktop. Choose from Image first or the available placement options.
Layout split	Displays the image and product list in an equal-width layout.
Product settings
Show vendor	Displays the product vendor.
Show description	Displays the product description.
Show card swatch	Displays color swatches on the product card.
Show secondary image on hover	Displays the product's secondary image when hovering over the product card.
Show quick add option	Displays the Quick Add button on product cards.
Desktop content alignment	Aligns the product content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered.
Aspect ratio	Sets the product image aspect ratio. Choose from Square, Portrait, or Adapt to image.
Carousel settings
Desktop	Sets the number of product cards displayed per slide on desktop. Choose from 1 or 2.
Change slides every	Sets the delay between automatic slide transitions. Enter 0 to disable autoplay.
Gap	Sets the space between product cards.
Pagination	Sets the carousel navigation style. Choose from Dots, Arrows, or None.
Pagination style	Sets the appearance of the carousel navigation. Choose from the available pagination styles.
Section padding
Top side	Sets the space above the section.
Bottom side	Sets the space below the section.
Section divider
Shapes	Adds a decorative divider to the section. Choose from Curve top, Curve bottom, Curve both, None, Border top, Border bottom, or Both border.

Blocks

Add blocks to this section in the theme editor. Each block is a separate item you can add, remove, and reorder.

Product

Displays a product with an optional hotspot on the featured image.

Setting	Description
Product	Selects the product displayed in this block.
Spots
Position from left	Sets the horizontal position of the hotspot on the image.
Position from top	Sets the vertical position of the hotspot on the image.

Common Questions

How do I add hotspots to the image?

Add a Product block, select a product, then adjust the Position from left and Position from top settings.

Can I use different images for desktop and mobile?

Yes. Upload separate images using the Desktop image and Mobile image settings.

Why are hotspot indicators not visible?

Enable the Show hotspots setting. Hotspots appear only for products that are in stock.