> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shop the Look

> Interactive shoppable images with clickable product dots positioned over lifestyle photography

The **Shop the Look** section creates shoppable lifestyle images by placing interactive product dots directly on styled photography. Customers click dots to discover products featured in the scene, creating an immersive shopping experience similar to Instagram Shopping posts.

## What this section controls

This section controls shoppable image displays with the following capabilities:

* Interactive product hotspot dots positioned over images
* Separate desktop and mobile images with independent dot positioning
* Unlimited product slide blocks per image
* Percentage-based dot positioning system (1-100% horizontal and vertical)
* Product quick-view with add-to-cart functionality
* Section heading and description with customizable sizes
* Color scheme, width, and spacing controls

## Key Features

<CardGroup cols={2}>
  <Card title="Clickable Dots" icon="circle-dot">
    Position interactive dots anywhere on your image to highlight products
  </Card>

  <Card title="Product Discovery" icon="magnifying-glass">
    Customers click dots to reveal product details and purchase
  </Card>

  <Card title="Mobile Optimized" icon="mobile">
    Separate images for desktop and mobile with independent dot positioning
  </Card>

  <Card title="Unlimited Products" icon="tag">
    Add as many product dots as needed to tag all items in the scene
  </Card>
</CardGroup>

## How It Works

<AccordionGroup>
  <Accordion title="Interactive Dots Concept">
    **Visual Shopping Experience:**

    * Upload a lifestyle or scene image (e.g., styled room, outfit, table setting)
    * Add product "slide" blocks - one for each product in the image
    * Position each dot precisely over the corresponding product in the image
    * Customers click dots to see product details and add to cart

    **Example Use Cases:**

    * Fashion: Model wearing multiple products (shoes, shirt, accessories)
    * Home decor: Styled room with furniture, lighting, and decor items
    * Beauty: Flatlay with multiple makeup or skincare products
    * Food: Recipe scene with ingredients or kitchen tools

    <Tip>
      This section works best with high-quality lifestyle photography where multiple products are naturally arranged in a scene. Professional product photography in context performs better than plain product images.
    </Tip>
  </Accordion>

  <Accordion title="Dot Positioning System">
    **How Positioning Works:**

    * Each product dot has horizontal and vertical position controls
    * Positions are percentage-based (1-100% for each axis)
    * **Horizontal**: 1% = far left, 50% = center, 100% = far right
    * **Vertical**: 1% = top, 50% = middle, 100% = bottom
    * Default: 50% horizontal, 50% vertical (center of image)

    **Positioning Tips:**

    * Use Theme Customizer preview to adjust positions visually
    * Fine-tune with 1% increments for precision
    * Consider responsive behavior - test on mobile
    * Dots should clearly point to products without overlapping

    <Note>
      Position percentages are relative to the image container, not the actual product in the photo. You'll need to visually align dots with products using the preview.
    </Note>
  </Accordion>

  <Accordion title="Desktop vs Mobile">
    **Separate Images:**

    * Upload different images for desktop and mobile
    * Mobile image is optional (uses desktop image if not provided)
    * Allows cropping or reformatting for different aspect ratios

    **Aspect Ratio Controls:**

    * Desktop: Auto, Square (1:1), Portrait (1:2, 2:3, 3:4, 4:5, 9:16), Landscape (3:2, 4:3, 5:4, 16:9, 2:1, 4:1, 8:1)
    * Mobile: Same options as desktop
    * Default: Auto (natural image dimensions)

    **Important:** Dot positions are the same for desktop and mobile. If you use different images with different composition, dots may not align correctly on mobile.

    <Warning>
      If using different desktop and mobile images, ensure products are in similar positions in both images, or dots will appear misaligned on one device.
    </Warning>
  </Accordion>

  <Accordion title="Product Display">
    **Product Grid:**

    * Products appear in a grid below or beside the image
    * Uses theme's standard product card component
    * Shows product images, titles, prices, and variants
    * Clicking a dot highlights the corresponding product card

    **Reverse Positions:**

    * When enabled: Product grid appears on opposite side
    * When disabled: Default positioning (typically image left, products right)
    * Helps create varied layouts when using multiple Shop the Look sections

    <Tip>
      The product grid provides an overview at a glance, while dots enable discovery within the styled context. Both work together for best UX.
    </Tip>
  </Accordion>
</AccordionGroup>

## Section Settings

<AccordionGroup>
  <Accordion title="Section Header">
    **Title**

    * Section heading text
    * Supports inline rich text (bold, italic, links)
    * Default: "Essentials"
    * Examples: "Shop the Look", "Get the Look", "Style This Outfit"

    **Heading Size**

    * H6 (XS), H5 (S), H4 (M), H3 (L), H2 (XL)
    * Default: H2 (XL)
  </Accordion>

  <Accordion title="Desktop Image">
    **Image (Desktop)**

    * Main lifestyle/scene image
    * Upload via image picker
    * Recommended: High-resolution images (1800-2400px wide)

    **Aspect Ratio (Desktop)**

    * **Auto**: Natural image dimensions (recommended for varied photography)
    * **Square**: 1:1 (perfect for Instagram-style content)
    * **Portrait**: 1:2, 2:3, 3:4, 4:5, 9:16 (vertical compositions)
    * **Landscape**: 3:2, 4:3, 5:4, 16:9, 2:1, 4:1, 8:1 (horizontal compositions)
    * Default: Auto

    <Tip>
      **Aspect Ratio Guidelines:**

      * **Fashion/Outfit**: 3:4 or 2:3 portrait (shows full outfit)
      * **Room/Interior**: 16:9 or 4:3 landscape (captures full space)
      * **Flatlay/Tabletop**: 1:1 square (centered composition)
      * **Wide scenes**: 2:1 or 4:1 landscape (panoramic feel)
    </Tip>
  </Accordion>

  <Accordion title="Mobile Image">
    **Image (Mobile)**

    * Optional mobile-specific image
    * Upload via image picker
    * If not provided, desktop image is used
    * Recommended: 800-1200px wide for mobile

    **Aspect Ratio (Mobile)**

    * Same options as desktop
    * Default: Auto
    * Often better to use portrait ratios on mobile (2:3, 3:4, 9:16)

    <Note>
      Mobile images are useful when desktop composition doesn't work vertically (e.g., wide landscape scene needs to be cropped/recomposed for mobile portrait view).
    </Note>
  </Accordion>

  <Accordion title="Layout Options">
    **Reverse Positions**

    * Swaps the position of image and product grid
    * Default: Disabled (image on left, products on right)
    * Enabled: Products on left, image on right
    * Useful for creating varied layouts with multiple sections

    **Show Dots**

    * Shows or hides the interactive product dots on the image
    * Default: Enabled
    * Disable if you only want product grid without interactive dots

    **Color Scheme for Dots**

    * Choose color scheme that applies to dot styling
    * Default: Scheme 1
    * Affects dot color, pulse animation, and hover states
    * Choose scheme with good contrast against your image

    <Tip>
      Use a contrasting color scheme for dots to ensure they're visible against your image. Light dots on dark images, dark dots on light images.
    </Tip>
  </Accordion>

  <Accordion title="Section Width & Color">
    **Section Width**

    * **Page**: Standard page width with margins
    * **Fluid**: Minimal side margins, edge-to-edge
    * **Full**: Complete full-width layout
    * Default: Page

    **Color Scheme**

    * Choose from available color schemes
    * Default: Scheme 1
    * Applies to section background and product grid area
  </Accordion>

  <Accordion title="Spacing & Borders">
    **Spacing Top**

    * Padding above section: None, S (1), M (2), L (4), XL (6)
    * Default: M (2)

    **Spacing Bottom**

    * Padding below section: None, S (1), M (2), L (4), XL (6)
    * Default: M (2)

    **Section Border**

    * None, Top, Bottom, or Both
    * Default: None
  </Accordion>
</AccordionGroup>

## Block Settings: Product Slide

Each "slide" block represents one product tagged in the image. Add one block per product featured in your scene.

<AccordionGroup>
  <Accordion title="Product Selection">
    **Product**

    * Select product from your catalog using product picker
    * Each product appears as a clickable dot on the image
    * Each product also appears in the product grid
    * No limit to number of products (add as many slide blocks as needed)

    <Warning>
      Ensure selected products are published and available. Unpublished or unavailable products may not display correctly.
    </Warning>
  </Accordion>

  <Accordion title="Dot Position">
    **Horizontal Position**

    * Range: 1-100%
    * Default: 50% (center horizontally)
    * Controls left-to-right placement
    * **1%** = Far left edge
    * **50%** = Horizontal center
    * **100%** = Far right edge

    **Vertical Position**

    * Range: 1-100%
    * Default: 50% (center vertically)
    * Controls top-to-bottom placement
    * **1%** = Top edge
    * **50%** = Vertical center
    * **100%** = Bottom edge

    <Tip>
      **Positioning Best Practices:**

      * Position dots directly on or very close to the product in the image
      * Avoid placing dots too close to image edges (5-95% range is safer)
      * Space dots apart to prevent overlap (especially on mobile)
      * Test positioning on both desktop and mobile previews
      * Use consistent positioning logic across multiple Shop the Look sections
    </Tip>
  </Accordion>
</AccordionGroup>

## Setup Guide

<Steps>
  <Step title="Prepare Lifestyle Image">
    Create or source a high-quality lifestyle photo featuring multiple products arranged in a natural scene. Ensure good lighting, composition, and clear product visibility.
  </Step>

  <Step title="Add Section">
    In Theme Customizer, add "Shop the Look" section to your homepage or desired page template.
  </Step>

  <Step title="Upload Image">
    Upload desktop image (and optionally mobile image). Set appropriate aspect ratios for best presentation.
  </Step>

  <Step title="Add Product Slides">
    For each product in your image:

    * Click **Add Product slide** block
    * Select the product from your catalog
    * Adjust horizontal and vertical position to align dot with product
    * Repeat for all products in the scene
  </Step>

  <Step title="Configure Display">
    Set heading text, color schemes for dots and section, spacing, and reverse positioning as desired.
  </Step>

  <Step title="Test & Refine">
    Preview on desktop and mobile to verify:

    * Dots align correctly with products
    * Dots are visible against image (adjust color scheme if needed)
    * Product grid displays properly
    * Clicking dots reveals correct products
  </Step>
</Steps>

## Best practices

<CardGroup cols={2}>
  <Card title="Photography guidelines" icon="camera">
    Use high-resolution images (min 1800px wide for desktop) with even lighting across the scene. Arrange products with clear separation for easier dot positioning. Avoid overly busy backgrounds that compete with products. Keep number of products manageable (3-8 products ideal) and maintain consistent styling across multiple Shop the Look sections.
  </Card>

  <Card title="Dot positioning strategy" icon="location-dot">
    Position dots slightly offset from product center (not directly on top). Create visual flow with dot placement (left to right, top to bottom). Avoid clustering dots in one area. Test responsive behavior on actual mobile devices and consider using larger products in the center, smaller in periphery.
  </Card>

  <Card title="Product selection" icon="box-open">
    Feature products from same collection or style theme. Include variety of price points (high-low mix). Ensure all products are in stock when launching section. Consider featuring complementary products (complete the look) and update regularly with seasonal or trending products.
  </Card>

  <Card title="Image quality" icon="image">
    Avoid using low-resolution or poorly-lit images. Don't tag too many products (overcrowding dots). Position dots away from image edges (may get cut off on mobile) and use consistent desktop/mobile images to prevent dot misalignment.
  </Card>

  <Card title="Testing requirements" icon="mobile-screen">
    Always test on actual mobile devices before launching. Verify dots align correctly with products, remain visible against the image, and that product grid displays properly. Check that clicking dots reveals correct products across all screen sizes.
  </Card>

  <Card title="Product availability" icon="circle-check">
    Never use products that are out of stock or discontinued. Check inventory levels before featuring products. Update sections regularly to remove sold-out items and replace with available alternatives to maintain customer trust.
  </Card>
</CardGroup>

## Use Case Examples

<CardGroup cols={2}>
  <Card title="Fashion Outfit" icon="shirt">
    **Scene**: Model wearing complete outfit

    Tagged products: Shirt, pants, shoes, belt, watch, bag, sunglasses

    Best for: Apparel stores, fashion boutiques
  </Card>

  <Card title="Home Office Setup" icon="house-laptop">
    **Scene**: Styled desk workspace

    Tagged products: Desk, chair, lamp, laptop stand, plant, artwork, storage

    Best for: Home goods, furniture stores
  </Card>

  <Card title="Skincare Routine" icon="droplet">
    **Scene**: Flatlay of skincare products

    Tagged products: Cleanser, toner, serum, moisturizer, eye cream, sunscreen

    Best for: Beauty and cosmetics stores
  </Card>

  <Card title="Outdoor Adventure" icon="mountain">
    **Scene**: Camping or hiking gear arrangement

    Tagged products: Tent, backpack, sleeping bag, stove, water bottle, boots

    Best for: Outdoor and sports equipment
  </Card>
</CardGroup>

## Technical Details

<AccordionGroup>
  <Accordion title="Image Optimization">
    **Recommended Specifications:**

    * Format: JPG or PNG (JPG for photos, PNG for graphics with transparency)
    * Desktop: 1800-2400px wide, 72-150 DPI
    * Mobile: 800-1200px wide, 72-150 DPI
    * File size: Under 500KB (compress images before uploading)
    * Color mode: RGB (not CMYK)

    **Performance Tips:**

    * Use Shopify's image optimization (automatic)
    * Compress images before uploading (TinyPNG, ImageOptim, etc.)
    * Consider WebP format for modern browsers (if theme supports)
    * Avoid extremely large files that slow page load
  </Accordion>

  <Accordion title="Responsive Behavior">
    **Desktop:**

    * Image and product grid displayed side-by-side (or reversed)
    * Dots appear on image with hover states
    * Product cards in scrollable grid

    **Mobile:**

    * Image stacked above product grid
    * Dots use tap interaction (no hover)
    * Product cards in vertical scroll
    * Mobile image used if provided, otherwise desktop image

    **Dot Positions:**

    * Same percentage positions apply to both desktop and mobile
    * May need adjustment if using different image compositions
    * Test thoroughly on actual mobile devices
  </Accordion>

  <Accordion title="Interaction Behavior">
    **Desktop:**

    * Hover over dot: Pulse animation or highlight effect
    * Click dot: Scrolls or highlights corresponding product card
    * Hover product card: May highlight corresponding dot

    **Mobile:**

    * Tap dot: Opens product quick view or scrolls to product card
    * Tap product card: Opens product page
    * No hover states (tap-only interaction)

    **Accessibility:**

    * Dots are keyboard-accessible (tab navigation)
    * Screen reader support for dot labels and products
    * Sufficient color contrast for dot visibility
  </Accordion>
</AccordionGroup>

## Common Questions

<AccordionGroup>
  <Accordion title="How many products can I tag?">
    **Technically unlimited**, but practical limits apply:

    * 3-8 products is ideal for most images
    * More than 10 products can feel crowded
    * Consider image size and product spacing
    * Too many dots = confusing user experience

    **Best practice**: Tag only the most important or distinctive products in the scene. Less is often more.
  </Accordion>

  <Accordion title="Do dot positions work on both desktop and mobile?">
    **Yes**, dot positions (%) are applied to both desktop and mobile images.

    **However**: If you use different desktop and mobile images with different compositions, dots may not align correctly.

    **Solution**: Either use the same image for both (cropped/scaled), or ensure products are in similar positions in both images.
  </Accordion>

  <Accordion title="Can I change dot colors or styling?">
    Yes, via the **Color Scheme for Dots** setting. This applies a theme color scheme to dot styling.

    For further customization (size, shape, animation), you would need to edit the theme's CSS code.
  </Accordion>

  <Accordion title="What happens if a product becomes unavailable?">
    Depends on your product card configuration:

    * Product may show as "Sold Out"
    * Dot may remain visible but product card disabled
    * Or dot may be hidden entirely

    **Best practice**: Regularly update Shop the Look sections to feature in-stock products, or use products that are consistently available.
  </Accordion>

  <Accordion title="Can customers add products to cart directly?">
    Depends on your product card settings and theme configuration. Typically:

    * Clicking dot scrolls to or highlights product card
    * Customer can then add to cart from product card
    * Or customer clicks to open full product page

    Check your theme's product card component settings for quick add or cart button options.
  </Accordion>
</AccordionGroup>

## Preset Configuration

Default preset includes:

* 3 Product slide blocks
* First slide: Dot at 25% horizontal, 25% vertical (top-left)
* Second slide: Dot at 50% horizontal, 50% vertical (center)
* Third slide: Dot at 75% horizontal, 75% vertical (bottom-right)
* Category: Products

This creates a balanced starting point with dots distributed across the image.

## Related Sections

* **Featured Products**: Traditional product grid without lifestyle imagery
* **Product Recommendations**: AI-powered related product suggestions
* **Shoppable Section**: Similar concept with different implementation
* **Image with Text**: Alternative for single-product feature with lifestyle image