> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/blocks/shop-the-look.md). # Shop the look Upload a lifestyle image and tag products with interactive hotspot pins — customers click pins to view and buy items directly.
The Shop the Look block turns a lifestyle photo into an interactive shopping experience. Upload a single image — like a styled outfit, a decorated room, or a product arrangement — and place clickable product pins directly on it. When customers click a pin, they see the product details and can add it to cart without leaving the page. This block bridges the gap between inspiration and purchase. Instead of browsing a flat product grid, customers discover products in a real-world context. ### 1. What you can do * Upload a lifestyle image and overlay interactive product hotspot pins * Choose between full-width (pins over image) or split (image beside product list) layouts * Link each pin to a specific product with live pricing and variants * Add an "Add all to cart" button for one-click bundle purchasing * Customize product card appearance, hover effects, and badges * Control image aspect ratio, overlay, and positioning for both desktop and mobile *** ### 2. Where you can use this block | Section | Maximum per section | | ---------------------- | ------------------- | | **Any Custom Section** | Unlimited | *** ### 3. How to add this block 1. In the **Theme Editor (Customize)**, click the section where you want the shoppable image. 2. Click **Add block** and select **Shop the Look**. 3. Upload your lifestyle image. 4. Add **Product pin** blocks inside — each one represents a clickable hotspot. 5. For each pin, select the product and set the pin's position on the image. 6. Adjust the layout and appearance settings below. 7. Click **Save**. {% hint style="info" icon="note-sticky" %} **Note:** The pin positions (where each hotspot appears on the image) are configured inside each individual **Product pin** child block — not in the main Shop the Look settings. {% endhint %} *** ### 4. Block settings #### Layout **Type** Controls the overall layout structure. | Option | Description | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Full** | The lifestyle image fills the entire block, with product pins floating as interactive overlays on top. Customers click a pin to see the product details. Best for immersive, visual-first experiences. | | **Split** | The image takes one half, and a product list takes the other half. Customers can browse the products alongside the image. Best for a more structured, informative layout. | *** #### Image settings **Image** Upload the lifestyle photograph that will serve as the background for your product pins. Choose an image that shows your products in context — styled outfits, decorated spaces, or curated product arrangements. {% hint style="success" icon="lightbulb" %} **Tip:** Use professional-quality lifestyle photography where the products are clearly visible. Dark or busy images make it harder for customers to spot the hotspot pins. {% endhint %} *** **Overlay** Add a semi-transparent layer over the image to ensure hotspot pins and any text remain visible regardless of the image content. * **Style** — Choose between *Solid* (flat color) or *Gradient* (fading effect). *** **Aspect ratio** Controls the image's shape and proportions: * **Full layout:** *Landscape / Portrait / Square* * **Split layout:** *Portrait / Square* All aspect ratios support mobile-specific overrides for optimal phone display. *** #### Split layout settings (Split only) **Gap** Controls the spacing between the image and the product list. *** **Add all to cart** Adds a button that lets customers add every tagged product to their cart in a single click — perfect for outfit bundles or curated sets. *** **Media position** Controls which side the image appears on. **Options:** *Left / Right* *** #### Product card appearance These settings override your global product card settings specifically for products displayed within this block. **Visual settings** * **Corner radius** — Round the corners of product cards. * **Color scheme** — Apply a specific color scheme to the product cards. * **Quick actions** — Show "Quick View" or "Add to Cart" buttons on product cards. * **Information alignment** — Control text alignment within product cards. *** **Hover effects** Define what happens when customers hover over a product card: * **Reveal second image** — Swaps to an alternate product image on hover. * **Image carousel** — Shows a mini image carousel within the product card on hover. * **Zoom-in / Grayscale** — Subtle visual effects for desktop interactivity. *** **Product data display** Control which product information is visible: * **Vendor** — Show or hide the brand/vendor name. * **Categories** — Show or hide product categories. * **Badges** — Show or hide "Sale" and "Sold out" badges. * **Typography** — Override the default text styling for product names and prices. *** ### 5. How to use it effectively #### Creating a shoppable outfit 1. Upload a lifestyle photo of a model wearing your products. 2. Add a **Product pin** for each visible item (shirt, pants, shoes, accessories). 3. Position each pin directly over the corresponding product in the image. 4. Use the *Full* layout for an immersive, magazine-style experience. 5. Enable the overlay if the image is bright or busy. #### Building a "Shop the room" section 1. Upload a photo of a styled room featuring your home goods. 2. Add **Product pins** for each visible item (lamp, cushion, rug, art). 3. Use the *Split* layout to show the room on one side and a product list on the other. 4. Enable **Add all to cart** so customers can buy the complete look. 5. Set the image aspect ratio to *Landscape* for room-wide shots. *** ### 6. Tips & best practices {% hint style="success" %} **Tip:** * Position hotspot pins directly on top of the product they represent — not beside or below it. Customers instinctively expect the pin to be on the item. *** * Don't overload a single image with too many pins. 3–6 products per image keeps the experience clean and focused. If you have more items, consider using multiple Shop the Look blocks. {% endhint %} {% hint style="info" %} **Note:** On mobile, hotspot pins may overlap if placed too close together. Preview the mobile layout and adjust pin positions if needed. {% endhint %}