> For the complete documentation index, see [llms.txt](https://themessupport.gitbook.io/lollipop-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themessupport.gitbook.io/lollipop-theme/sections/shop-the-look.md).
# 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.