Shoppable - DigiFist Documentation

The Shoppable section creates Instagram/TikTok-style social media feeds with interactive product hotspots, transforming social content into a direct shopping experience. Display lifestyle images or videos where customers can click on tagged products to see details and add to cart. This section improves engagement and conversion rates by helping customers discover products naturally through aspirational imagery, perfect for social commerce, influencer content, and shop-the-look experiences.

What this section controls

This section controls social commerce displays with the following capabilities:

Five layout styles (list, grid, carousel, tags, slider)
Interactive product hotspots (up to 4 per post)
Social media profile integration (avatar, username, follow button)
Video support with story-style tags
Instant product quick-view drawers
Metaobject support for dynamic content management
Caption customization with character limits
Responsive column controls for grid layouts
Autoplay settings for carousel and slider modes

Section Settings

Layout Configuration

Layout Style

Setting ID: layout
Type: Select
Options:

list - Vertical feed (Instagram-style) ⭐ Default
grid - Multi-column grid (Pinterest-style)
carousel - Horizontal slider with navigation
tags - Story-style tags with video support
slider - Full-width slider presentation

Choose how shoppable posts are displayed.Layout Comparison:

Layout	Best For	Visual Style	Mobile
List	Social feed aesthetic	Single column	Scrollable feed
Grid	Gallery presentation	3-4 columns	2 columns
Carousel	Featured content	Horizontal slider	Swipeable
Tags	Story highlights	Circular tag bubbles	Compact
Slider	Hero-style showcase	Full-width slides	Full-width

Each layout has its own preset with recommended settings. You can customize any layout after selection.

Content Source

Setting ID: source_of_slide
Type: Select
Options:

manual - Manually add blocks in theme customizer ⭐ Default
metaobject - Pull content from metaobjects

Choose whether to manually create posts or dynamically pull from metaobjects.Manual Source:

Add each post as a block in Theme Customizer
Full control over content and order
Best for curated, stable content
No technical setup required

Metaobject Source:

Define posts as metaobjects
Update content without touching theme
Programmatic content management
Requires metaobject setup

Start with manual mode to understand the section, then migrate to metaobjects for easier content management at scale.

Aspect Ratio (Layout)

Setting ID: aspect_ratio_for_layout
Type: Select
Default: 1/1 (Square)Controls the aspect ratio of post images in the layout.Available Ratios:Auto:

auto - Original image dimensions

Square:

1/1 - Perfect square (Instagram classic) ⭐ Default

Landscape:

4/3 - Standard photo (1.33:1)
3/2 - Classic 35mm (1.5:1)
5/4 - Slightly wide (1.25:1)
16/9 - Widescreen (1.78:1)
2/1 - Panoramic (2:1)
4/1 - Ultra-wide banner (4:1)
8/1 - Extreme panorama (8:1)

Portrait:

3/4 - Vertical photo (0.75:1)
2/3 - Portrait orientation (0.67:1)
4/5 - Instagram portrait (0.8:1)
9/16 - Vertical video (0.56:1)
1/2 - Tall portrait (0.5:1)

Recommendations by Layout:

List: 1/1 or 4/5 (Instagram aesthetic)
Grid: 1/1 (uniform grid)
Carousel: 4/3 or 16/9 (wider view)
Tags: 1/1 (circular cropping)
Slider: 16/9 or 2/1 (cinematic)

Grid Items per Row

Setting ID: grid_items
Type: Select
Options:

3 - 3 columns
4 - 4 columns ⭐ Default

Applies to: Grid layout onlyNumber of posts displayed per row in grid layout.Desktop View:

3 columns: Larger images, more prominent
4 columns: Compact grid, more content visible

Mobile View:

Always displays 2 columns regardless of this setting
Optimized for mobile screen width

Tag Items Slides Per View

Setting ID: tag_items_slides_perview
Type: Range
Range: 5 - 8
Default: 7Applies to: Tags layout onlyNumber of circular tag items visible at once in the tags layout.Recommendations:

5-6: Larger tag bubbles, easier to tap
7: Default balanced view ⭐
8: Compact, more tags visible

On mobile, this number automatically reduces to fit screen width while maintaining readability.

Show Dots Navigation

Header Configuration

Header Layout Style

Setting ID: header_layout
Type: Select
Options:

compact - Minimal header ⭐ Default
extended - Larger header with more spacing

Controls the size and spacing of the section header area.Compact:

Minimal vertical space
Title and social info close together
Modern, efficient use of space

Extended:

More generous spacing
Prominent section title
Better for hero-style sections

Header Title

Setting ID: header_title
Type: Inline Rich Text
Default: “Shoppable”Main heading for the section.Common Titles:

“Shop The Look”
“Get The Look”
“Shop Our Feed”
“As Seen On Instagram”
“Trending Now”
”#[YourBrandHashtag]”
“Style Inspiration”

Use hashtags or branded phrases to reinforce social media connection and encourage user-generated content.

Heading Size

Setting ID: heading_size
Type: Select
Options:

h6 - Extra Small (XS)
h5 - Small (S)
h4 - Medium (M)
h3 - Large (L)
h2 - Extra Large (XL) ⭐ Default

Size of the section title heading.Size Recommendations:

h2 (XL): Homepage hero sections, main focal point
h3 (L): Standard section headers
h4 (M): Secondary sections, lower on page
h5-h6 (S-XS): Subtle headers, minimal emphasis

Social Avatar (Section-Level)

Social Username

Follow Button Label

Setting ID: follow_button_label
Type: Text
Default: “Follow Us”Text for the social profile follow button.Button Label Ideas:

“Follow Us”
“Follow on Instagram”
“Follow @username”
“Get More Inspiration”
“Join Our Community”

Social Profile URL

Follow Button Style

Setting ID: button_style
Type: Select
Options:

button--filled - Solid filled button
button--outlined - Outlined border style ⭐ Default
link - Simple link style

Visual style for the follow button.Style Guide:

Filled: High contrast, primary CTA
Outlined: Subtle, secondary action
Link: Minimal, non-intrusive

Product Display Settings

Product Image Aspect Ratio

Setting ID: aspect_ratio
Type: Select
Default: auto (Original dimensions)Aspect ratio for product images in the quick-view drawer.Available Options:

auto - Original image dimensions ⭐ Default
1/1 - Square
1/2 - Tall portrait
2/3 - Standard portrait
3/4 - Classic portrait
4/5 - Instagram portrait
9/16 - Vertical (phone screen)

This setting only affects product images in the drawer, not the main shoppable post images.

Shop Button Label

Setting ID: button_label
Type: Text
Default: “Shop The Look”Label for the main call-to-action button on each post.CTA Ideas:

“Shop The Look”
“Shop This Post”
“Get The Look”
“View Products”
“Tap to Shop”
“See Products”

Shop Button Style

Setting ID: button_label_style
Type: Select
Options:

button--filled - Solid filled button ⭐ Default
button--outlined - Outlined border style
link - Simple link style

Visual style for the “Shop The Look” button.

Color Schemes

Section Color Scheme

Setting ID: color_scheme
Type: Color Scheme
Default: scheme-1Main background color scheme for the entire section.

Drawer Color Scheme

Setting ID: color_scheme_drawer
Type: Color Scheme
Default: scheme-1Color scheme for the product quick-view drawer that opens when clicking hotspots.

Use a contrasting color scheme for the drawer to make it visually distinct from the background and draw attention to products.

Items Color Scheme

Setting ID: color_scheme_for_items
Type: Color Scheme
Default: scheme-1Color scheme for individual shoppable post items/cards.Design Strategy:

Match section scheme for seamless integration
Contrast with section for card-style appearance
Coordinate with drawer for visual consistency

Section Width & Spacing

Section Width

Setting ID: section_width
Type: Select
Options:

page - Page width (contained) ⭐ Default
fluid - Fluid width (wider)

Maximum width of the section container.Recommendations by Layout:

List: Page width (focused feed)
Grid: Fluid (more gallery space)
Carousel: Fluid or Page
Tags: Page (compact works well)
Slider: Fluid (cinematic width)

Spacing Top

Setting ID: spacing_top
Type: Select
Options: 0, 1 (S), 2 (M), 4 (L), 6 (XL)
Default: 2 (M)

Spacing Bottom

Setting ID: spacing_bottom
Type: Select
Options: 0, 1 (S), 2 (M), 4 (L), 6 (XL)
Default: 2 (M)

Section Border

Setting ID: section_border
Type: Select
Options: none, top, bottom, both
Default: none

Each block represents one shoppable post with an image/video and up to 4 product hotspots.

Post Content

Social Post Image

Social Post Content

Block Setting ID: social_post_content
Type: Rich Text
Default: Sample text with hashtagsCaption/description for the post (Instagram caption style).Example:

<p>Embrace the summer with our curated looks. Discover 
the styles we love, inspired by you. Shine in the 
season's favorite outfits.</p>

<p>#summerstyle #ootd #shopthelook</p>

Caption Writing Tips:

Start with engaging first line
Describe the look or mood
Include relevant hashtags
Keep under 150 words for readability
Use line breaks (<p> tags) for structure
Add emojis sparingly (copy/paste into editor)

Hashtag Strategy:

Brand hashtags (#yourbrand)
Campaign hashtags (#summercollection2024)
Discoverable hashtags (#ootd, #styleinspo)
3-5 hashtags per post (avoid spam)

Social Post URL

Story Tag

Block Setting ID: tag_story
Type: Text
Default: “hashtag”Applies to: Tags layout onlyTag label displayed on the circular story bubble.Examples:

#newin
#sale
summer
trending
bestseller

Best Practices:

Keep very short (1-2 words)
Use hashtag or keyword
Should fit in small circular space
Descriptive of content theme

Story Video

Block Setting ID: social_story_video
Type: VideoApplies to: Tags layout onlyUpload a vertical video for Instagram/TikTok-style story presentation.Video Specifications:

Aspect Ratio: 9:16 (vertical/portrait)
Resolution: 1080x1920px recommended
Duration: 15-60 seconds
Format: MP4, WebM
File Size: Under 10MB (optimize for web)

Video Content Tips:

Show products in use/context
Quick styling demonstrations
Product reveals or unboxing
Behind-the-scenes content
User testimonials or reviews

Videos are displayed in a story-style full-screen overlay when users tap the story tag. Include product hotspots to make videos shoppable.

Avatar (Block-Level)

Block Setting ID: social_avatar
Type: Image PickerProfile picture for this specific post (overrides section-level avatar).When to Use Block-Level Avatar:

Featuring influencer/partner content (use their photo)
User-generated content (customer’s profile pic)
Multiple brand accounts (different brand avatars)
Campaign-specific branding

When to Use Section-Level:

All posts from your brand account
Consistent brand identity
Simpler management

Avatar Object Fit

Block Setting ID: social_avatar_object_fit
Type: Select
Options:

cover - Fill circle, may crop ⭐ Default
contain - Fit entire image, may show background

How the avatar image fits within the circular frame.Cover:

Image fills entire circle
May crop edges to fill space
Best for photos/headshots

Contain:

Entire image visible
May show background if not square
Best for logos with padding

Username (Block-Level)

Block Setting ID: social_username
Type: Text
Default: “Sahara”Username for this specific post (overrides section-level username).Use Cases:

Influencer collaborations: @influencername
Customer features: @customername
Partner brands: @partnerbrand
Default to section username for your content

Product Hotspots (4 Products Max)

Each shoppable post can tag up to 4 products with interactive hotspots.

Product Selection & Positioning

The section supports 4 product slots: Product 01, Product 02, Product 03, Product 04. Each product has identical settings:

Product Selection

Block Setting IDs: product_01, product_02, product_03, product_04
Type: Product PickerSelect a product from your Shopify store to tag in this post.Strategic Product Selection:

Choose visually distinct products (different colors/shapes)
Select products actually shown in the image
Prioritize high-margin or bestselling items
Consider color coordination with image
Limit to 2-3 products for clarity (4 max)

Don’t feel obligated to use all 4 hotspot slots. Often 2-3 well-placed hotspots are more effective than 4 crowded ones.

Hotspot X Position

Block Setting IDs: product_01_dot_x, product_02_dot_x, product_03_dot_x, product_04_dot_x
Type: Range
Range: 1% - 100%
Default: 50%Horizontal position of the product hotspot dot on the image.Positioning Guide:

0-20%: Left edge of image
20-40%: Left-center area
40-60%: Center area (⭐ Default 50%)
60-80%: Right-center area
80-100%: Right edge of image

Best Practices:

Place hotspot directly on or near the product
Avoid extreme edges (10-90% safe zone)
Consider mobile tap targets (not too close together)
Test on actual image to verify placement

Hotspot Y Position

Block Setting IDs: product_01_dot_y, product_02_dot_y, product_03_dot_y, product_04_dot_y
Type: Range
Range: 1% - 100%
Default: 50%Vertical position of the product hotspot dot on the image.Positioning Guide:

0-20%: Top of image
20-40%: Upper area
40-60%: Middle area (⭐ Default 50%)
60-80%: Lower area
80-100%: Bottom of image

Placement Strategy:

Place on focal point of product
Avoid overlapping text/faces
Distribute hotspots across image (not clustered)
Consider visual balance

X and Y coordinates work like a grid: X is left-to-right, Y is top-to-bottom. (50%, 50%) places the hotspot at the exact center of the image.

Example Product Hotspot Setup

Scenario: Instagram post featuring summer outfit Image: Model wearing hat, sunglasses, dress, and shoes Product Configuration: Product 01 - Wide Brim Hat

Product: “Summer Straw Hat - Natural”
X Position: 50% (centered on head)
Y Position: 15% (top of image, on hat)

Product 02 - Sunglasses

Product: “Aviator Sunglasses - Gold”
X Position: 55% (slightly right of face)
Y Position: 25% (face level, on sunglasses)

Product 03 - Linen Dress

Product: “Breezy Linen Dress - White”
X Position: 50% (center of dress)
Y Position: 55% (mid-torso area)

Product 04 - Leave Empty

Only using 3 hotspots for clarity

Result: Clean, easy-to-tap hotspots on each featured product without clutter.

Layout Presets

The Shoppable section includes 5 pre-configured presets optimized for different use cases.

1. List Layout Preset

Preset Name: “Shoppable - List”
Category: Features Default Settings:

Layout: list
Aspect Ratio: 1/1 (square)
Section Width: page
1 sample block included

Best For:

Classic Instagram feed aesthetic
Scrollable social media-style presentation
Mobile-first designs
Long-form content browsing

Appearance:

┌────────────────────────┐
│   @username  [Follow]  │
│   ┌──────────────────┐ │
│   │                  │ │
│   │   Post Image     │ │
│   │   [Hotspots]     │ │
│   │                  │ │
│   └──────────────────┘ │
│   Caption text...      │
│   [Shop The Look]      │
├────────────────────────┤
│   Next Post...         │
└────────────────────────┘

2. Grid Layout Preset

Preset Name: “Shoppable - Grid”
Category: Features Default Settings:

Layout: grid
Grid Items: 4 (4 columns)
Aspect Ratio: 1/1 (square)
4 sample blocks included

Best For:

Gallery-style product discovery
Showcasing multiple looks at once
Pinterest-style inspiration boards
Visual product catalogs

Appearance:

Header Title
┌─────┬─────┬─────┬─────┐
│ IMG │ IMG │ IMG │ IMG │
│  [•] │  [•] │  [•] │  [•] │
├─────┼─────┼─────┼─────┤
│ IMG │ IMG │ IMG │ IMG │
│  [•] │  [•] │  [•] │  [•] │
└─────┴─────┴─────┴─────┘

Mobile:

Automatically adjusts to 2 columns
Maintains square aspect ratio
Swipe scroll

3. Carousel Layout Preset

Preset Name: “Shoppable - Carousel”
Category: Features Default Settings:

Layout: carousel
Show Dots: true
Aspect Ratio: 1/1
5 sample blocks included

Best For:

Featured content slider
Curated seasonal collections
Homepage hero sections
Storytelling sequences

Appearance:

        Header Title
┌──────────────────────────────┐
│  ◀  [Post Image w/ Hotspots]  ▶ │
│       [Shop The Look]         │
└──────────────────────────────┘
         ● ○ ○ ○ ○

Features:

Arrow navigation
Swipe/drag functionality
Dot indicators
Auto-play optional (theme dependent)

4. Tags Layout Preset

Preset Name: “Shoppable - Tags”
Category: Features Default Settings:

Layout: tags
Tag Slides Per View: 7
5 sample blocks with tag stories
Different hashtag tags: #hashtag, #shop, #product, #new, #sale

Best For:

Instagram/TikTok stories aesthetic
Category browsing by hashtag
Video content with product tags
Campaign-specific content hubs

Appearance:

     Header Title
┌─────────────────────────────┐
│   Story Tags (Horizontal):  │
│  ○      ○      ○     ○      │
│ #hash  #shop  #new  #sale   │
└─────────────────────────────┘

Click tag → Full-screen story
         with video + hotspots

Features:

Circular tag bubbles
Hashtag labels
Story-style video overlays
Shoppable video support

5. Slider Layout Preset

Preset Name: “Shoppable - Slider”
Category: Features Default Settings:

Layout: slider
Show Dots: true
Section Width: fluid (recommended: switch to fluid)
5 sample blocks included

Best For:

Full-width hero sections
Cinematic product showcases
Landing page features
Campaign announcements

Appearance:

┌───────────────────────────────────┐
│                                   │
│    Full-Width Post Image          │
│    [Product Hotspots]             │
│                                   │
│    [Shop The Look]                │
│                                   │
└───────────────────────────────────┘
           ● ○ ○ ○ ○

Features:

Edge-to-edge images
Bold, impactful presentation
Navigation controls
Slide transition effects

Common Use Cases

1. Instagram Feed Integration

Goal: Replicate your Instagram aesthetic with shoppable products Configuration:

Layout: List
Aspect Ratio: 1/1 (square) or 4/5 (portrait)
Header Title: “Shop Our Instagram”
Social Username: Your Instagram handle
Social URL: Your Instagram profile
Follow Button: “Follow on Instagram”

Block Setup:

Pull recent Instagram posts
Upload same images to theme
Copy captions to post content
Tag products shown in each image
Link social_post_url to original Instagram post

Result: Seamless integration that drives social engagement while converting followers to customers.

2. Influencer Collaboration Gallery

Goal: Feature multiple influencer partnership posts Configuration:

Layout: Grid (4 columns)
Header Title: “As Seen On…”
Section Width: Fluid

Per-Block Configuration:

Different avatar for each influencer (their photo)
Different username for each influencer
Social_post_url linking to their original post
Attribution in caption

Example:

Post 1: @fashioninfluencer1
Post 2: @styleexpert
Post 3: @beautyb blogger
Post 4: @lifestyleguru

Benefits:

Social proof from trusted voices
Diverse styling inspiration
Proper attribution/credit
Drives influencer collaboration ROI

3. Seasonal Campaign: “Summer Essentials”

Goal: Showcase summer collection with lifestyle imagery Configuration:

Layout: Carousel
Header Title: “Summer Essentials”
Heading Size: h2 (XL)
Aspect Ratio: 4/3 (landscape)
Button Label: “Get The Look”

5 Carousel Posts:

Beach Day: Swimwear, sunglasses, beach bag
Brunch Outfit: Sundress, sandals, sunhat
Vacation Packing: Luggage with folded clothes
Poolside Glam: Resort wear, accessories
Sunset Drinks: Evening outfit, bag, jewelry

Each Post:

2-3 product hotspots
Aspirational lifestyle setting
Cohesive color palette
Descriptive caption with #summerstyle

Result: Immersive campaign experience that tells a story while showcasing products in context.

4. Shop the Look: Outfit Styling

Goal: Help customers visualize complete outfits Configuration:

Layout: List or Grid
Header Title: “Complete the Look”
Button Label: “Shop This Outfit”

Post Strategy:

Full outfit on model (head to toe)
Tag ALL items (top, bottom, shoes, accessories)
Use 4 product hotspots maximum
Caption with styling tips

Example Post:

Image: Model in casual weekend look

Products Tagged:
1. Oversized Sweater (chest area)
2. High-Waist Jeans (waist/legs)
3. Ankle Boots (feet)
4. Leather Tote Bag (shoulder/side)

Caption: "Weekend vibes Keep it cozy but chic 
with our new fall essentials. Tap to shop each piece!
#weekendstyle #fallfashion"

Result: Customers can instantly shop entire styled looks, increasing average order value.

5. Product Launch: Story-Style Reveal

Goal: Create buzz for new product with story-style video Configuration:

Layout: Tags
Header Title: “NEW ARRIVALS”
Tag Slides Per View: 5

Story Tags Setup:

Tag 1: #sneakpeek (Teaser video)
Tag 2: #reveal (Product reveal video)
Tag 3: #details (Close-up features)
Tag 4: #styling (How to wear)
Tag 5: #shopnow (Final CTA with hotspots)

Each Story:

15-30 second vertical video
Product hotspots on final frame
Countdown/urgency messaging
Swipe-through narrative

Result: Engaging, TikTok/Instagram-style product launch that drives excitement and sales.

Best practices

Quality Imagery

Use high-resolution, professional photos. Lifestyle context sells better than plain product shots.

Strategic Hotspot Placement

Place hotspots directly on products, not randomly. Test on mobile for tap accuracy.

Limit Products Per Post

2-3 products per post is ideal. 4 maximum. More creates clutter and decision paralysis.

Compelling Captions

Write engaging captions with storytelling, hashtags, and clear CTAs. Copy successful social media formats.

Maintain Visual Consistency

Keep consistent aesthetic across all posts - color grading, style, composition. Builds brand identity.

Test on Mobile

Majority of social shoppers use mobile. Verify hotspots are tappable and layout looks good on small screens.

Update Regularly

Refresh content frequently to match current inventory, seasons, and trending styles.

Track Performance

Monitor which posts drive clicks and sales. Double down on successful content styles.

Design Tips

Hotspot Placement Strategy

The Rule of Thirds:

Divide image into 3x3 grid
Place hotspots at intersection points
Creates balanced, professional layout

Avoid:

Clustering all hotspots in one area
Placing on faces or important composition elements
Too close to image edges (tap difficulty)
Overlapping hotspots (confusing)

Best Practices:

Spread hotspots across image
Place on actual products shown
Leave breathing room between dots
Consider mobile finger size (~44px tap target)

Creating Shoppable Content

Photo Shoot Tips:

Plan Product Placement:
- Know which products you’ll tag before shooting
- Arrange products with clear sight lines
- Avoid overlapping items
Lighting:
- Even, natural lighting shows products accurately
- Avoid heavy shadows obscuring products
- Consider color accuracy for clothing/accessories
Composition:
- Leave clean space around tagged products
- Use shallow depth of field to focus on featured items
- Include lifestyle context (model, setting)
Styling:
- On-brand aesthetic
- Season-appropriate
- Target audience alignment
- Multiple styling angles (flat lay, on model, close-up)

Caption Writing Formula

Effective Caption Structure:

Hook (First Line):
- Grab attention immediately
- Pose question or bold statement
- Example: “Weekend plans? We’ve got you covered”
Context (Middle):
- Describe the look/products
- Share styling tips
- Example: “This breezy linen set is perfect for warm days…”
Call to Action (End):
- Direct instruction
- Example: “Tap to shop each piece!”
Hashtags (Separate Line):
- 3-5 relevant hashtags
- Mix brand, campaign, and discoverable tags
- Example: “#summerstyle #linenset #shopnow”

Length:

Aim for 50-150 words
Front-load important info
Use line breaks for readability

Accessibility Considerations

Ensure shoppable content is accessible to all users, including those using assistive technologies.

Accessibility Checklist

Image Alt Text:

Provide descriptive alt text for all images
Describe products and scene
Example: “Woman in white linen dress and straw hat on beach”

Keyboard Navigation:

All hotspots accessible via Tab key
Enter/Space to activate hotspot
Escape to close product drawer
Logical tab order (left-to-right, top-to-bottom)

Screen Reader Support:

Hotspots announce product names
Captions readable by screen readers
Drawer content properly labeled
Navigation controls have aria-labels

Color Contrast:

Hotspot dots have sufficient contrast with images
Text meets WCAG AA standards (4.5:1 ratio)
Don’t rely on color alone to convey information

Touch Target Size:

Hotspots at least 44x44px (mobile)
Adequate spacing between hotspots (avoid accidental taps)
Buttons large enough for easy tapping

Video Accessibility:

Captions for video content
Audio descriptions where needed
Pause/play controls visible
No autoplay with sound

Troubleshooting

Hotspots not appearing on images

Problem: Product hotspot dots don’t show on postsSolutions:

Verify Product Selected:
- Check that product is actually selected in block settings
- Empty product field = no hotspot
Check Hotspot Position:
- Hotspots at 0% or 100% may be off-screen
- Verify X and Y positions are in 10-90% range
Image Upload:
- Ensure post image is uploaded and visible
- Hotspots won’t render without base image
Browser Cache:
- Hard refresh (Ctrl+Shift+R)
- Clear browser cache
- Check in incognito mode
Theme Updates:
- Verify you’re running latest theme version
- Check for JavaScript console errors

Product drawer not opening when clicking hotspot

Problem: Clicking hotspot dot does nothingSolutions:

JavaScript Errors:
- Open browser Developer Tools (F12)
- Check Console tab for errors
- May indicate theme conflict
Product Availability:
- Verify product exists and is published
- Check product isn’t deleted or archived
Theme Conflicts:
- Disable other apps temporarily
- Test with default theme settings
- Check for custom code interfering
Mobile Testing:
- Test on actual device vs. browser resize
- Some mobile browsers have different behavior
Clickable Element:
- Ensure hotspot isn’t covered by another element
- Check CSS z-index values

Images cropping incorrectly

Problem: Post images cutting off important areasSolutions:

Aspect Ratio Mismatch:
- Check aspect_ratio_for_layout setting
- If set to 1/1 but image is 16/9, it will crop
- Use auto to preserve original dimensions
Image Positioning:
- Images crop from center by default
- Ensure focal point of image is centered
- Consider theme’s object-fit settings
Upload Correct Aspect Ratio:
- Match upload aspect ratio to layout setting
- Example: 1/1 layout = upload square images
- Prevents cropping entirely
Object Fit Setting:
- Check if theme uses object-fit: cover vs contain
- Cover fills space (may crop), contain shows full image

Layout not displaying as expected

Problem: Grid/carousel/tags not rendering correctlySolutions:

Verify Layout Setting:
- Double-check layout setting value
- Re-save section after changing
Block Count:
- Grid looks best with 4+ blocks
- Carousel needs 2+ blocks
- Tags needs 3+ for effect
Browser Compatibility:
- Test in different browsers (Chrome, Safari, Firefox)
- Check for browser-specific CSS issues
Section Width:
- Some layouts work better with fluid width
- Try changing section_width setting
Clear Cache:
- Browser cache may show old layout
- Theme cache may need refresh
- Hard reload page

Videos not playing in story tags

Problem: Story videos don’t load or playSolutions:

Video Format:
- Use MP4 format (best compatibility)
- Convert other formats to MP4
- Check codec is H.264
File Size:
- Videos over 10MB may fail to load
- Compress video for web
- Optimize resolution (1080x1920 max)
Upload Confirmation:
- Verify video fully uploaded (check file size)
- Re-upload if incomplete
Browser Support:
- Test in different browsers
- Mobile browsers may have restrictions
- Check video plays in browser’s video player
Hosting:
- Shopify has file size limits
- Consider external video hosting (YouTube, Vimeo) if needed
- Check Shopify file upload limits

Social profile link not working

Hotspot positions wrong on mobile

Problem: Hotspots in correct place on desktop but wrong on mobileSolutions:

Percentage-Based Positioning:
- Hotspots use percentage (%), should be responsive
- If using old version of theme, may be pixel-based
Image Aspect Ratio:
- If aspect ratio changes mobile vs desktop, positions shift
- Use same aspect ratio on all devices
Browser Zoom:
- Reset browser zoom to 100%
- Test on actual mobile device, not browser resize
Test on Real Device:
- Browser responsive mode isn’t perfect
- Always verify on actual phone/tablet
Adjust for Mobile:
- May need to fine-tune X/Y positions
- Consider mobile-first design approach

Technical Details

Section Limits

No Limit: Add multiple instances of this section per page if desired.

Block Types

shoppable-social-item:

Single block type for posts
Add unlimited blocks
Each block = one shoppable post

Schema Structure

{
  "name": "t:sections.shoppable.name",
  "tag": "section",
  "class": "section-shoppable",
  "settings": [
    // Layout, header, social, color, spacing settings
  ],
  "blocks": [
    {
      "type": "shoppable-social-item",
      "settings": [
        // Image, caption, video, avatar, 4 products with X/Y positions
      ]
    }
  ],
  "presets": [5 layout-specific presets]
}

JavaScript Functionality

The section relies on JavaScript for:

Interactive hotspot clicks
Product drawer slide-ins
Carousel/slider navigation
Story video overlays
Add-to-cart functionality

Dependencies:

Theme’s main JavaScript bundle
Product quick-view functionality
Carousel library (if using carousel/slider)

Performance Optimization

Image Optimization

File Size:

Target 150-300KB per image
Use tools like TinyPNG, ImageOptim
Shopify auto-optimizes but pre-optimize for best results

Format:

WebP for modern browsers (best compression)
JPEG fallback for compatibility
Avoid PNG for photos (larger files)

Lazy Loading:

Theme should implement lazy loading
Images load as user scrolls
Improves initial page load time

Video Optimization

Compression:

Use H.264 codec
30fps max for web video
Bitrate: 2-5 Mbps for 1080p

Duration:

Keep under 60 seconds
Shorter = smaller file size
Attention span optimization

Consider External Hosting:

For many videos, use YouTube/Vimeo
Embed instead of upload
Saves Shopify file storage
Better streaming infrastructure

SEO Considerations

Image SEO

Alt Text:

Descriptive, keyword-rich
Mention products in image
Example: “Woman wearing blue summer dress and straw hat on beach”

File Names:

Descriptive before upload
summer-dress-beach-outfit.jpg not IMG_1234.jpg
Hyphens, not underscores

Product Discovery

Rich Snippets:

Shoppable sections can enhance product schema
Products get additional exposure
Consider structured data markup

Internal Linking:

Each hotspot links to product page
Improves site crawlability
Distributes page authority

Integration with Other Features

Combine with Other Sections

Before Shoppable:

Hero Banner - Campaign intro
Rich Text - “Shop our latest Instagram posts”

After Shoppable:

Testimonials - Social proof
Newsletter - Stay connected CTA
Featured Products - More shopping options

Page Templates

Homepage:

Place below hero, above featured products
Showcase trending/new content
4-6 posts in grid or carousel

Collection Pages:

Show styled looks featuring collection items
List or grid layout
3-5 posts max (avoid overwhelming)

Dedicated Pages:

Create /pages/shop-the-feed
Full Instagram gallery experience
12+ posts in grid layout

Shop the Look - Similar functionality, different visual style
Featured Products - Standard product grid
Carousel - Image carousel without product tagging
Instagram Feed - Static feed without shopping (if theme has this)

Quick Reference

Layout Quick Comparison

Layout	Columns	Best Use	Mobile	Navigation
List	1	Social feed	Scroll	Scroll
Grid	3-4	Gallery	2 col	Scroll
Carousel	1	Featured	Swipe	Arrows + Dots
Tags	Varies	Stories	Compact	Tap tags
Slider	1	Hero	Full-width	Arrows + Dots

Hotspot Setup Checklist

High-quality lifestyle image uploaded
Product 1 selected and positioned
Product 2 selected and positioned (optional)
Product 3 selected and positioned (optional)
Product 4 selected and positioned (optional)
Caption written with hashtags
Social username set
“Shop The Look” button label set
Test hotspots clickable on mobile

Summary

The Shoppable section transforms social media content into interactive shopping experiences: 5 Layout Options: List, Grid, Carousel, Tags, Slider
Interactive Hotspots: Up to 4 tagged products per post
Social Integration: Profile, username, follow button
Video Support: Story-style shoppable videos
Flexible Content: Manual blocks or metaobject-driven
Mobile-Optimized: Responsive layouts and touch-friendly
Quick-View Drawers: Instant product details and add-to-cart
Brand Consistency: Color schemes and styling controls

Pro Strategy: Combine with your actual Instagram content. Create posts on Instagram for organic reach, then replicate the same content in this Shoppable section with product tags to convert that social engagement into sales.

Perfect For:

Fashion and apparel brands
Home decor and lifestyle products
Beauty and cosmetics
Influencer collaborations
User-generated content campaigns
Social commerce strategies

The Shoppable section bridges the gap between social media inspiration and e-commerce conversion, meeting customers where they already spend time while making purchase decisions frictionless.

Overview

Theme Settings

Header

Footer

Products

Collections

Pages & Templates

Sections

​What this section controls

​Section Settings

​Layout Configuration

​Header Configuration

​Social Profile Integration

​Product Display Settings

​Color Schemes

​Section Width & Spacing

​Shoppable Social Item Blocks

​Post Content

​Social Stories (Video)

​Block-Level Social Profile

​Product Hotspots (4 Products Max)

​Product Selection & Positioning

​Example Product Hotspot Setup

​Layout Presets

​1. List Layout Preset

​2. Grid Layout Preset

​3. Carousel Layout Preset

​4. Tags Layout Preset

​5. Slider Layout Preset

​Common Use Cases

​1. Instagram Feed Integration

​2. Influencer Collaboration Gallery

​3. Seasonal Campaign: “Summer Essentials”

​4. Shop the Look: Outfit Styling

​5. Product Launch: Story-Style Reveal

​Best practices

Quality Imagery

Strategic Hotspot Placement

Limit Products Per Post

Compelling Captions

Maintain Visual Consistency

Test on Mobile

Update Regularly

Track Performance

​Design Tips

​Hotspot Placement Strategy

​Creating Shoppable Content

​Caption Writing Formula

​Accessibility Considerations

​Accessibility Checklist

​Troubleshooting

​Technical Details

​Section Limits

​Block Types

​Schema Structure

​JavaScript Functionality

​Performance Optimization

​Image Optimization

​Video Optimization

​SEO Considerations

​Image SEO

​Product Discovery

​Integration with Other Features

​Combine with Other Sections

​Page Templates

​Related Sections

​Quick Reference

​Layout Quick Comparison

​Hotspot Setup Checklist

​Summary

What this section controls

Section Settings

Layout Configuration

Header Configuration

Social Profile Integration

Product Display Settings

Color Schemes

Section Width & Spacing

Shoppable Social Item Blocks

Post Content

Social Stories (Video)

Block-Level Social Profile

Product Hotspots (4 Products Max)

Product Selection & Positioning

Example Product Hotspot Setup

Layout Presets

1. List Layout Preset

2. Grid Layout Preset

3. Carousel Layout Preset

4. Tags Layout Preset

5. Slider Layout Preset

Common Use Cases

1. Instagram Feed Integration

2. Influencer Collaboration Gallery

3. Seasonal Campaign: “Summer Essentials”

4. Shop the Look: Outfit Styling

5. Product Launch: Story-Style Reveal

Best practices

Design Tips

Hotspot Placement Strategy

Creating Shoppable Content

Caption Writing Formula

Accessibility Considerations

Accessibility Checklist

Troubleshooting

Technical Details

Section Limits

Block Types

Schema Structure

JavaScript Functionality

Performance Optimization

Image Optimization

Video Optimization

SEO Considerations

Image SEO

Product Discovery

Integration with Other Features

Combine with Other Sections

Page Templates

Related Sections

Quick Reference

Layout Quick Comparison

Hotspot Setup Checklist

Summary