Skip to main content
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

Clickable Dots

Position interactive dots anywhere on your image to highlight products

Product Discovery

Customers click dots to reveal product details and purchase

Mobile Optimized

Separate images for desktop and mobile with independent dot positioning

Unlimited Products

Add as many product dots as needed to tag all items in the scene

​
How It Works

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
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.
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
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.
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.
If using different desktop and mobile images, ensure products are in similar positions in both images, or dots will appear misaligned on one device.
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
The product grid provides an overview at a glance, while dots enable discovery within the styled context. Both work together for best UX.

​
Section Settings

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)
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
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)
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)
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).
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
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.
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
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

​
Block Settings: Product Slide

Each “slide” block represents one product tagged in the image. Add one block per product featured in your scene.
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)
Ensure selected products are published and available. Unpublished or unavailable products may not display correctly.
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
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

​
Setup Guide

1

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.
2

Add Section

In Theme Customizer, add “Shop the Look” section to your homepage or desired page template.
3

Upload Image

Upload desktop image (and optionally mobile image). Set appropriate aspect ratios for best presentation.
4

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
5

Configure Display

Set heading text, color schemes for dots and section, spacing, and reverse positioning as desired.
6

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

​
Best practices

Photography guidelines

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.

Dot positioning strategy

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.

Product selection

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.

Image quality

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.

Testing requirements

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.

Product availability

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.

​
Use Case Examples

Fashion Outfit

Scene: Model wearing complete outfitTagged products: Shirt, pants, shoes, belt, watch, bag, sunglassesBest for: Apparel stores, fashion boutiques

Home Office Setup

Scene: Styled desk workspaceTagged products: Desk, chair, lamp, laptop stand, plant, artwork, storageBest for: Home goods, furniture stores

Skincare Routine

Scene: Flatlay of skincare productsTagged products: Cleanser, toner, serum, moisturizer, eye cream, sunscreenBest for: Beauty and cosmetics stores

Outdoor Adventure

Scene: Camping or hiking gear arrangementTagged products: Tent, backpack, sleeping bag, stove, water bottle, bootsBest for: Outdoor and sports equipment

​
Technical Details

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
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
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

​
Common Questions

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.
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.
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.
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.
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.

​
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.
  • 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