Widget Installation

The DemandLoop widget automatically appears on out-of-stock product pages, replacing the "Add to Cart" button with "Notify Me When Available." No coding required.

Requirements

• Shopify store with admin access
• DemandLoop app installed from the Shopify App Store
• A Shopify Online Store 2.0 compatible theme (for automatic installation)
• Available on all plans (Free and Growth)

Automatic Installation (Recommended)

How It Works

When you install DemandLoop, the widget is automatically added to your theme using Shopify's Theme App Extensions.

What happens:

1. You install DemandLoop from Shopify App Store
2. App asks for theme access permission
3. You approve
4. Widget is instantly live on all product pages

Time to install: Under 2 minutes

Checking Installation

To verify the widget is working:

1. Find an out-of-stock product in your store
2. Visit the product page (in your live store, not admin)
3. You should see "Notify Me When Available" button

If you don't see it: Check Troubleshooting section below.

Manual Installation (Advanced)

Only use manual installation if:

• You have a heavily customized theme
• Automatic installation didn't work
• You're using vintage/unsupported themes

Steps for Manual Installation

1. Go to Settings → Theme Customization

In DemandLoop dashboard:

• Click "Settings" in sidebar
• Select "Widget Settings"
• Copy the widget code snippet

2. Edit Your Theme Code

In Shopify Admin:

• Go to Online Store → Themes
• Click Actions → Edit code
• Find sections/product-template.liquid (or similar)

3. Add Widget Code

Paste this where "Add to Cart" button is located:

{% if product.available %}
  <!-- Existing Add to Cart button -->
  <button type="submit">Add to Cart</button>
{% else %}
  <!-- DemandLoop Widget -->
  <div data-demandloop-widget 
       data-product-id="{{ product.id }}"
       data-variant-id="{{ variant.id }}">
  </div>
{% endif %}

4. Save and Test

• Save theme changes
• Visit out-of-stock product page
• Verify widget appears

Customizing the Widget

Basic Customization

Go to: Settings → Widget Settings

What you can customize:

Button Text

Default: "Notify Me When Available"
Custom: "Join the Waitlist" or "Get Restock Alert"

Button Colors

• Primary color (button background)
• Text color
• Border color
• Hover state colors

Modal Appearance

• Header text: "Get notified when this item is back in stock"
• Success message: "Thanks! We'll email you when it's available"
• Input placeholder: "Enter your email address"

Preview Changes

Use the Preview button to see changes before saving:

1. Make customization changes
2. Click "Preview"
3. See live preview in modal
4. Save when satisfied

Widget Behavior

When Widget Shows

The widget automatically appears when:

• Product inventory = 0
• Product is published and active
• Variant is available for purchase (not discontinued)

When Widget Hides

Widget is hidden when:

• Product has inventory available
• Product is archived/draft
• Variant is discontinued
• Product type is excluded in settings

Multi-Variant Products

For products with multiple variants (sizes, colors):

Behavior:

• Widget tracks inventory per variant
• Shows "Notify Me" only for out-of-stock variants
• If Red/Small is out but Red/Medium is available, customer can:
  • Buy Red/Medium (Add to Cart shows)
  • Subscribe to Red/Small (Notify Me shows)

How it looks:

Size selector: [S] [M] [L]
Color selector: [Red] [Blue] [Black]

Selected: Red / Small
Inventory: 0
Button: "Notify Me When Available" ← widget

Selected: Red / Medium  
Inventory: 5
Button: "Add to Cart" ← default Shopify

Theme Compatibility

Fully Compatible Themes

DemandLoop works automatically with all modern Shopify themes:

Shopify Official Themes

• Dawn (2.0+)
• Sense
• Studio
• Craft
• All Online Store 2.0 themes

Popular Third-Party Themes

• Impulse
• Turbo
• Prestige
• Empire
• District

Custom Themes

• Built on Shopify 2.0 architecture
• Uses standard Liquid structure

Partial Compatibility

Some older themes may need manual installation:

• Themes built before 2021
• Heavily customized themes
• Themes with non-standard product templates

If your theme isn't working: Contact support with your theme name, and we'll help with setup.

Mobile Experience

The widget is fully responsive and works perfectly on:

• iPhone/iOS devices
• Android devices
• Tablets (iPad, etc.)

Mobile optimizations:

• Touch-friendly button size (min 44x44px)
• Simplified modal layout
• Optimized input fields for mobile keyboards
• Fast loading (< 100kb JavaScript)

Translation & Localization

Multi-Language Support

If you sell in multiple languages using Shopify Markets:

Automatic translation:

• Widget detects customer's language
• Displays in appropriate language automatically
• Supports 15+ languages

Supported languages:

• English, Spanish, French, German, Italian
• Portuguese, Dutch, Polish, Czech
• Swedish, Danish, Norwegian, Finnish
• Japanese, Korean

Custom translations: Go to Settings → Widget Settings → Translations to customize text for each language.

Performance

Widget Loading

Load time: < 50ms
File size: 85kb (compressed)
Impact on store: Minimal (loads async, non-blocking)

How it loads:

1. Page loads normally
2. Widget script loads in background
3. Widget appears when ready
4. No impact on "Add to Cart" functionality

Caching Friendly

Widget works with all caching solutions:

• Shopify CDN
• Cloudflare
• Third-party CDN providers

Troubleshooting

Widget Not Showing

Check these items:

1. Product is actually out of stock

• Go to Shopify Admin → Products
• Verify inventory = 0 for the variant
• Check if "Track quantity" is enabled

2. Theme app extension is enabled

• Go to Shopify Admin → Online Store → Themes
• Click "Customize"
• Check App Embeds section
• Ensure DemandLoop is toggled ON

3. Widget is enabled in settings

• Go to DemandLoop Settings
• Check "Widget Enabled" toggle is ON
• Verify product isn't excluded

4. Browser cache

• Hard refresh page (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows)
• Try incognito/private browsing mode
• Clear browser cache

5. Theme conflicts

• Check browser console for JavaScript errors (F12)
• Look for conflicting apps
• Try disabling other apps temporarily

Widget Shows But Doesn't Work

If clicking button does nothing:

Check these:

1. JavaScript errors in console (F12)
2. Ad blockers or privacy extensions blocking widget
3. Theme JavaScript conflicts
4. Customer's browser outdated

Solution: Contact support with:

• Theme name and version
• Browser name and version
• Screenshot of issue
• Console error messages (if any)

Widget Looks Broken

Visual issues (wrong colors, misaligned):

Common causes:

1. Theme CSS conflicts
2. Custom CSS overriding widget styles
3. Recent theme updates

Quick fixes:

1. Reset widget customization to defaults
2. Clear theme cache
3. Check for theme updates
4. Add custom CSS to fix specific issues

Custom CSS example:

/* Fix widget alignment */
[data-demandloop-widget] {
  margin-top: 1rem;
  width: 100%;
}

Add this in Settings → Widget Settings → Custom CSS

Testing the Widget

Before Going Live

Test checklist:

• Widget appears on out-of-stock product
• Modal opens when button clicked
• Email subscription works
• Confirmation email arrives
• Widget hides when product in stock
• Mobile experience is good
• Widget matches brand colors

Test Mode

Use test mode to verify without affecting real customers:

1. Go to Settings → Widget Settings
2. Enable "Test Mode"
3. Test widget (subscriptions go to test inbox)
4. Disable test mode when ready

FAQ

Q: Can I use a different button text?
Yes! Go to Settings → Widget Settings → Button Text and customize.

Q: Does the widget slow down my store?
No. Widget loads asynchronously and has minimal performance impact (< 85kb).

Q: Can customers subscribe without seeing the widget?
No. Widget must be visible on product page for customers to subscribe.

Q: What if I have multiple "out of stock" apps?
Only one can control the button. Disable other back-in-stock apps to avoid conflicts.

Q: Can I hide widget on specific products?
Yes. Go to Settings → Widget Settings → Excluded Products and add product IDs.

Q: Does widget work with subscription products?
Yes, but we recommend using widget for one-time purchases and handling subscriptions separately.

Q: Can I A/B test different widget designs?
Not built-in, but you can manually test different designs with different customer segments. Contact support for guidance.

Next Steps

• How Customers Subscribe - Understand customer experience
• Troubleshooting Guide - Fix common issues