> ## 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. # Shoppable > Social media-inspired shoppable image gallery with interactive product hotspots in the Sahara Shopify theme 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 **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. **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. **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) **Setting ID:** `grid_items`\ **Type:** Select\ **Options:** * `3` - 3 columns * `4` - 4 columns ⭐ Default **Applies to:** Grid layout only Number 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 **Setting ID:** `tag_items_slides_perview`\ **Type:** Range\ **Range:** 5 - 8\ **Default:** 7 **Applies to:** Tags layout only Number 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. **Setting ID:** `show_dots`\ **Type:** Checkbox\ **Default:** Enabled **Applies to:** Carousel and Slider layouts Display dot navigation indicators below carousel/slider. **When to Disable:** * Minimalist design preference * Very few posts (navigation obvious) * Custom navigation styling **When to Enable:** * Multiple posts (helps users track position) * Clear navigation indicators needed * Improves accessibility *** ### Header Configuration **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 **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. **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 Profile Integration **Setting ID:** `social_avatar`\ **Type:** Image Picker Default profile picture displayed for the section's social account. **Image Specs:** * **Dimensions:** 200x200px minimum * **Aspect Ratio:** 1:1 (square) * **Format:** JPG, PNG, WebP * **Content:** Brand logo or profile photo **Use Cases:** * Your brand's Instagram profile photo * Influencer headshot * Brand logo in circular format This is the section-level default. Each individual post can override with its own avatar. **Setting ID:** `social_username`\ **Type:** Text\ **Default:** "Sahara" Social media username or handle displayed in posts. **Format Examples:** * `@yourbrand` (with @) * `yourbrand` (without @) * `Your Brand Name` **Common Uses:** * Instagram handle: `@fashionbrand` * TikTok username: `@styleinspo` * Brand name: `Fashion Brand Co.` **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" **Setting ID:** `social_url`\ **Type:** URL Link to your social media profile. **URL Examples:** * Instagram: `https://instagram.com/yourbrand` * TikTok: `https://tiktok.com/@yourbrand` * Pinterest: `https://pinterest.com/yourbrand` Use your actual social profile URL. When customers click "Follow," they'll be taken directly to follow you on that platform. **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 **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. **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" **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 **Setting ID:** `color_scheme`\ **Type:** Color Scheme\ **Default:** `scheme-1` Main background color scheme for the entire section. **Setting ID:** `color_scheme_drawer`\ **Type:** Color Scheme\ **Default:** `scheme-1` Color 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. **Setting ID:** `color_scheme_for_items`\ **Type:** Color Scheme\ **Default:** `scheme-1` Color 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 **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) **Setting ID:** `spacing_top`\ **Type:** Select\ **Options:** 0, 1 (S), 2 (M), 4 (L), 6 (XL)\ **Default:** 2 (M) **Setting ID:** `spacing_bottom`\ **Type:** Select\ **Options:** 0, 1 (S), 2 (M), 4 (L), 6 (XL)\ **Default:** 2 (M) **Setting ID:** `section_border`\ **Type:** Select\ **Options:** none, top, bottom, both\ **Default:** none *** ## Shoppable Social Item Blocks Each block represents one shoppable post with an image/video and up to 4 product hotspots. ### Post Content **Block Setting ID:** `social_post_image`\ **Type:** Image Picker\ **Required:** Yes Main lifestyle image for the shoppable post. **Image Guidelines:** * **Minimum:** 1080x1080px (for square posts) * **Recommended:** 1200x1200px or higher * **Aspect Ratio:** Match your layout aspect ratio setting * **Format:** JPG, PNG, WebP * **File Size:** Optimize to 200-500KB **Content Best Practices:** * High-quality, professional photography * Products clearly visible and well-lit * Aspirational lifestyle context * On-brand aesthetic and styling * Clean composition for hotspot placement **Avoid:** * Overly cluttered scenes (hard to spot products) * Poor lighting or blurry images * Heavy filters obscuring product colors * Too many products (max 4 works best) **Block Setting ID:** `social_post_content`\ **Type:** Rich Text\ **Default:** Sample text with hashtags Caption/description for the post (Instagram caption style). **Example:** ```html theme={null}

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

#summerstyle #ootd #shopthelook

``` **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 (`

` 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) **Block Setting ID:** `social_post_url`\ **Type:** URL Optional link to the original social media post. **Use Cases:** * Link to original Instagram post * Link to TikTok video * Link to Pinterest pin * Attribution for UGC (user-generated content) **When to Use:** * Reposting influencer content (give credit) * Driving traffic back to social profiles * Encouraging social engagement **When to Skip:** * Original content created for your site * Focus on product sales, not social traffic *** ### Social Stories (Video) **Block Setting ID:** `tag_story`\ **Type:** Text\ **Default:** "hashtag" **Applies to:** Tags layout only Tag 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 **Block Setting ID:** `social_story_video`\ **Type:** Video **Applies to:** Tags layout only Upload 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. *** ### Block-Level Social Profile **Block Setting ID:** `social_avatar`\ **Type:** Image Picker Profile 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 **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 **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: **Block Setting IDs:** `product_01`, `product_02`, `product_03`, `product_04`\ **Type:** Product Picker Select 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. **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 **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:** 1. **Beach Day:** Swimwear, sunglasses, beach bag 2. **Brunch Outfit:** Sundress, sandals, sunhat 3. **Vacation Packing:** Luggage with folded clothes 4. **Poolside Glam:** Resort wear, accessories 5. **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 Use high-resolution, professional photos. Lifestyle context sells better than plain product shots. Place hotspots directly on products, not randomly. Test on mobile for tap accuracy. 2-3 products per post is ideal. 4 maximum. More creates clutter and decision paralysis. Write engaging captions with storytelling, hashtags, and clear CTAs. Copy successful social media formats. Keep consistent aesthetic across all posts - color grading, style, composition. Builds brand identity. Majority of social shoppers use mobile. Verify hotspots are tappable and layout looks good on small screens. Refresh content frequently to match current inventory, seasons, and trending styles. 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:** 1. **Plan Product Placement:** * Know which products you'll tag before shooting * Arrange products with clear sight lines * Avoid overlapping items 2. **Lighting:** * Even, natural lighting shows products accurately * Avoid heavy shadows obscuring products * Consider color accuracy for clothing/accessories 3. **Composition:** * Leave clean space around tagged products * Use shallow depth of field to focus on featured items * Include lifestyle context (model, setting) 4. **Styling:** * On-brand aesthetic * Season-appropriate * Target audience alignment * Multiple styling angles (flat lay, on model, close-up) *** ### Caption Writing Formula **Effective Caption Structure:** 1. **Hook (First Line):** * Grab attention immediately * Pose question or bold statement * Example: "Weekend plans? We've got you covered" 2. **Context (Middle):** * Describe the look/products * Share styling tips * Example: "This breezy linen set is perfect for warm days..." 3. **Call to Action (End):** * Direct instruction * Example: "Tap to shop each piece!" 4. **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 **Problem:** Product hotspot dots don't show on posts **Solutions:** 1. **Verify Product Selected:** * Check that product is actually selected in block settings * Empty product field = no hotspot 2. **Check Hotspot Position:** * Hotspots at 0% or 100% may be off-screen * Verify X and Y positions are in 10-90% range 3. **Image Upload:** * Ensure post image is uploaded and visible * Hotspots won't render without base image 4. **Browser Cache:** * Hard refresh (Ctrl+Shift+R) * Clear browser cache * Check in incognito mode 5. **Theme Updates:** * Verify you're running latest theme version * Check for JavaScript console errors **Problem:** Clicking hotspot dot does nothing **Solutions:** 1. **JavaScript Errors:** * Open browser Developer Tools (F12) * Check Console tab for errors * May indicate theme conflict 2. **Product Availability:** * Verify product exists and is published * Check product isn't deleted or archived 3. **Theme Conflicts:** * Disable other apps temporarily * Test with default theme settings * Check for custom code interfering 4. **Mobile Testing:** * Test on actual device vs. browser resize * Some mobile browsers have different behavior 5. **Clickable Element:** * Ensure hotspot isn't covered by another element * Check CSS z-index values **Problem:** Post images cutting off important areas **Solutions:** 1. **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 2. **Image Positioning:** * Images crop from center by default * Ensure focal point of image is centered * Consider theme's object-fit settings 3. **Upload Correct Aspect Ratio:** * Match upload aspect ratio to layout setting * Example: 1/1 layout = upload square images * Prevents cropping entirely 4. **Object Fit Setting:** * Check if theme uses object-fit: cover vs contain * Cover fills space (may crop), contain shows full image **Problem:** Grid/carousel/tags not rendering correctly **Solutions:** 1. **Verify Layout Setting:** * Double-check `layout` setting value * Re-save section after changing 2. **Block Count:** * Grid looks best with 4+ blocks * Carousel needs 2+ blocks * Tags needs 3+ for effect 3. **Browser Compatibility:** * Test in different browsers (Chrome, Safari, Firefox) * Check for browser-specific CSS issues 4. **Section Width:** * Some layouts work better with fluid width * Try changing section\_width setting 5. **Clear Cache:** * Browser cache may show old layout * Theme cache may need refresh * Hard reload page **Problem:** Story videos don't load or play **Solutions:** 1. **Video Format:** * Use MP4 format (best compatibility) * Convert other formats to MP4 * Check codec is H.264 2. **File Size:** * Videos over 10MB may fail to load * Compress video for web * Optimize resolution (1080x1920 max) 3. **Upload Confirmation:** * Verify video fully uploaded (check file size) * Re-upload if incomplete 4. **Browser Support:** * Test in different browsers * Mobile browsers may have restrictions * Check video plays in browser's video player 5. **Hosting:** * Shopify has file size limits * Consider external video hosting (YouTube, Vimeo) if needed * Check Shopify file upload limits **Problem:** Follow button doesn't redirect to social profile **Solutions:** 1. **URL Format:** * Use full URL: `https://instagram.com/username` * Not just `@username` or partial URL 2. **HTTPS vs HTTP:** * Use HTTPS (secure) * HTTP may be blocked 3. **Verify Social URL Field:** * Check `social_url` setting has value * Empty field = broken link 4. **Test Link:** * Copy URL and paste in new browser tab * Verify it actually goes to your profile * Check for typos in username 5. **Link Target:** * Should open in new tab * Check if popup blockers interfering **Problem:** Hotspots in correct place on desktop but wrong on mobile **Solutions:** 1. **Percentage-Based Positioning:** * Hotspots use percentage (%), should be responsive * If using old version of theme, may be pixel-based 2. **Image Aspect Ratio:** * If aspect ratio changes mobile vs desktop, positions shift * Use same aspect ratio on all devices 3. **Browser Zoom:** * Reset browser zoom to 100% * Test on actual mobile device, not browser resize 4. **Test on Real Device:** * Browser responsive mode isn't perfect * Always verify on actual phone/tablet 5. **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 ```json theme={null} { "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 *** ## Related Sections * **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.