Widget Not Showing

If the "Notify Me When Available" button isn't appearing on out-of-stock products, follow this systematic troubleshooting guide to identify and fix the issue.

What you'll accomplish

• Systematically diagnose why the widget is not appearing
• Verify inventory settings, theme app embed, cache, and JavaScript
• Resolve theme compatibility and variant-specific issues
• Confirm the widget works correctly across devices and browsers

Quick Diagnostic Checklist

Before diving into detailed troubleshooting, verify these basics:

• App is installed and active
• Product variant is actually out of stock
• Theme app embed is enabled
• No browser cache issues
• JavaScript is enabled in browser

If all checked, proceed to detailed diagnostics below.

---

Step 1: Verify Product Is Out of Stock

Check Inventory Status

The widget only appears when a variant is out of stock. Verify in Shopify:

Method 1: Admin panel

Shopify Admin → Products → [Your Product]
→ Check "Quantity" for each variant
→ Must be 0 for widget to show

Method 2: Product page

Visit product page in incognito browser:

• If "Add to Cart" button shows → Product is IN STOCK- If "Sold Out" or custom text shows → Product is OUT OF STOCK- If nothing shows → Potential theme issue

Inventory Tracking Must Be Enabled

Critical requirement: Shopify must track inventory for the variant.

Check in Shopify:

Product → Variant → Inventory section
→ "Track quantity" must be checked→ "Continue selling when out of stock" must be unchecked```

**If unchecked:**
- Shopify doesn't report variant as out-of-stock
- DemandLoop can't detect stockout
- Widget won't show

**Fix:**
1. Enable "Track quantity"
2. Set quantity to 0
3. Uncheck "Continue selling"
4. Save product
5. Refresh storefront page

---

## Step 2: Check Theme App Embed

DemandLoop uses **Theme App Extensions** (recommended Shopify approach). The embed must be enabled in your theme.

### Enable App Embed

**Step 1: Open Theme Editor**

Shopify Admin → Online Store → Themes → Click "Customize" on active theme

**Step 2: Check App Embeds**

Left sidebar → Click "App embeds" (bottom section) → Find "DemandLoop - Back in Stock" → Toggle must be ON (blue)```

Step 3: Save Changes

Click "Save" (top right)
→ Widget activates immediately

Common App Embed Issues

Issue: Can't find "App embeds" section

Solution:

• You're on older Shopify theme (pre-2.0)
• See "Manual Installation" section below
• Consider upgrading to Shopify 2.0 theme

Issue: DemandLoop not in list

Possible causes:

1. App not fully installed
2. Browser cache issue
3. Theme incompatibility

Fix:

1. Dashboard → Settings → Reinstall app embed
2. Wait 2 minutes
3. Hard refresh theme editor (Ctrl+Shift+R)
4. Check app embeds again

Issue: Toggle is ON but widget still not showing

Proceed to Step 3 (cache and JavaScript checks)

---

Step 3: Clear Cache Issues

Browser Cache

Old cached pages may not show the widget even after enabling.

Clear browser cache:

Chrome:

1. Press Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac)
2. Select "Cached images and files"
3. Click "Clear data"
4. Reload product page

Safari:

1. Preferences → Privacy → Manage Website Data
2. Remove all for your store domain
3. Reload product page

Firefox:

1. Ctrl+Shift+Delete → Cache
2. Clear
3. Reload

Universal method (works on all browsers):

Visit product page in Incognito/Private mode
→ If widget shows: Cache issue→ If widget doesn't show: Proceed to Step 4

Shopify Theme Cache

Some themes cache product pages aggressively.

Clear theme cache:

Method 1: Theme settings

Theme Editor → Theme Settings
→ Look for "Performance" or "Cache" section
→ Click "Clear cache" or "Purge cache"

Method 2: Contact theme developer

If your theme has custom caching:

• Contact theme support
• Ask how to clear product page cache
• Mention DemandLoop widget issue

CDN Cache (Advanced)

If using external CDN (Cloudflare, Fastly):

Cloudflare:

1. Cloudflare dashboard → Caching
2. "Purge Everything" or "Purge by URL"
3. Enter product page URL
4. Wait 5 minutes
5. Check product page

---

Step 4: Check JavaScript Errors

The widget requires JavaScript to load. Check browser console for errors.

Open Developer Console

Chrome/Edge:

Press F12 or Ctrl+Shift+I
→ Click "Console" tab

Safari:

Develop → Show JavaScript Console
(Enable Developer menu in Preferences first)

Firefox:

Press F12 or Ctrl+Shift+K
→ Click "Console" tab

Look for DemandLoop Errors

Reload product page with console open.

Successful loading looks like:

[DemandLoop] Widget initialized
[DemandLoop] Product variant: 123456789
[DemandLoop] Status: out_of_stock

Error indicators:

[DemandLoop] Failed to load widget
Uncaught TypeError: Cannot read property 'init'
404 Not Found: widget.js

Common JavaScript Issues

Issue: Script blocked by Content Security Policy

Error message:

Refused to load script from 'https://demandloop.metigro.io/widget.js'
because it violates Content Security Policy

Solution:

1. Contact [email protected] with this error
2. We'll provide CSP whitelist instructions
3. Add to your theme's CSP headers

Issue: jQuery conflict

Error message:

$ is not defined
or
jQuery is not defined

Solution:

• Widget loads its own dependencies
• Usually self-resolves after cache clear
• If persists: Dashboard → Settings → "Legacy jQuery mode"

Issue: Theme JavaScript breaks widget

Symptoms:

• Console shows theme errors unrelated to DemandLoop
• Widget doesn't initialize

Solution:

1. Disable other apps one by one
2. Identify conflicting app
3. Contact conflicting app support
4. Request compatibility fix

---

Step 5: Theme Compatibility Check

Supported Themes

DemandLoop works with all Shopify 2.0 themes automatically.

Compatible themes (tested):

• Dawn (Shopify default)- Sense- Craft- Studio- Most 2.0 themes Legacy themes (pre-2.0):
• May require manual installation
• Some require theme code edits
• Contact support for guidance

Check Theme Version

Determine your theme version:

Shopify Admin → Online Store → Themes
→ Click "..." on active theme → "Edit code"
→ Open theme.liquid
→ Look for {% schema %} blocks

If you see {% schema %}:

• Shopify 2.0 theme
• Full widget support
• App embeds should work

If no {% schema %}:

• Legacy theme (pre-2.0)
• See "Manual Installation" below
• Consider theme upgrade

Theme-Specific Issues

Issue: Custom product templates

Some themes use custom product templates that override widget placement.

Check:

Theme code → Templates → product.custom-name.liquid

If custom template exists:

• Widget might not show on custom template products
• Dashboard → Settings → "Force widget on all templates"
• Or assign products to default template

Issue: Quick view modals

Many themes have quick view/quick shop modals.

Expected behavior:

• Widget shows in quick view for out-of-stock products- If not showing, it's a known theme limitation
• Customers can still click to full product page

Workaround:

Dashboard → Settings → Widget Settings
→ "Disable in quick view modals" (optional)

---

Step 6: Manual Installation (Legacy Themes)

If theme doesn't support App Embeds, use manual installation.

Check If Manual Installation Needed

You need manual installation if:

• Pre-2.0 theme (no App Embeds)
• Widget doesn't show despite all checks
• Theme developer recommends it

Installation Steps

Step 1: Get widget snippet

DemandLoop Dashboard → Settings → Installation
→ Click "Manual installation instructions"
→ Copy provided code snippet

Step 2: Edit theme code

Shopify Admin → Online Store → Themes → Edit code
→ Open: Snippets → [create new] bis-widget.liquid
→ Paste widget code
→ Save

Step 3: Include in product template

Open: Sections/product-template.liquid (or product.liquid)
→ Find the "Add to Cart" button section
→ Add after the form:
{% render 'bis-widget' %}
→ Save

Step 4: Test

Visit out-of-stock product page
→ Widget should appear```

**If still not showing:**
- Contact [email protected]
- Include theme name and version
- We'll provide custom installation

---

## Step 7: Variant-Specific Issues

### Multiple Variants

**Issue:** Widget shows for some variants but not others.

**Check in Dashboard:**

Dashboard → Subscriptions → Queue Status → Filter by product → Verify all variants listed

**If variant missing:**
- Shopify may not be syncing variant properly
- Dashboard → Settings → "Resync products"
- Wait 5 minutes, check again

### Variant Inventory Policies

**Issue:** Variant has inventory but shows widget anyway.

**Check Shopify:**

Product → Variant → Inventory → Verify quantity is actually 0 → Check "Continue selling when out of stock" is OFF → Check "Track quantity" is ON

**Multiple locations:**

If using multiple inventory locations: → Variant must be 0 at ALL locations → Or set specific location in DemandLoop settings

### Pre-Order Confusion

**Issue:** Product is available for pre-order, widget shouldn't show.

**Expected behavior:**
- Widget only shows when truly out of stock
- Pre-orders are separate feature (see roadmap)

**Current workaround:**
- Use Shopify's "Continue selling when out of stock"
- Widget won't show (by design)
- Or disable DemandLoop for pre-order products

---

## Step 8: Advanced Diagnostics

### Check Widget API Response

**For technical users:**

Open browser console and run:
```javascript
fetch('https://demandloop.metigro.io/api/widget/check', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    shop: 'YOUR-SHOP.myshopify.com',
    productId: PRODUCT_ID,
    variantId: VARIANT_ID
  })
})
.then(r => r.json())
.then(console.log)

Expected response:

{
  "shouldShow": true,
  "variantStatus": "out_of_stock",
  "widgetEnabled": true,
  "subscriptionCount": 5
}

If shouldShow: false:

• Check "reason" field in response
• Address specific issue mentioned

Network Tab Investigation

Check if widget resources load:

Browser DevTools → Network tab:

Reload product page
→ Filter by "widget" or "demandloop"
→ Check status codes:
   200 OK   404 Not Found   403 Forbidden```

**If 404 errors:**
- Widget script not loading
- Check app installation status
- Dashboard → Settings → "Reinstall widget"

**If 403 errors:**
- Domain authentication issue
- Contact [email protected]
- Include shop domain

---

## Common Scenarios & Solutions

### Scenario 1: Widget Worked Yesterday, Gone Today

**Likely causes:**
- App embed accidentally disabled
- Theme was updated/changed
- Shopify maintenance

**Fix:**

1. Check app embed is still ON
2. Clear cache (browser + theme)
3. Check theme version (wasn't changed)
4. If theme updated → reinstall app embed

### Scenario 2: Shows on Some Products, Not Others

**Likely causes:**
- Products use different templates
- Inventory tracking inconsistent
- Variant-level settings

**Fix:**

1. Verify inventory tracking ON for all variants
2. Check product templates (use default)
3. Dashboard → Settings → "Force on all products"
4. Resync products from settings

### Scenario 3: Shows in Desktop, Not Mobile

**Likely causes:**
- Theme has separate mobile template
- Mobile cache issue
- Theme's mobile CSS hides widget

**Fix:**

1. Clear mobile browser cache
2. Check theme's mobile product template
3. Contact theme developer
4. Dashboard → Settings → "Mobile widget placement"

### Scenario 4: Shows on Storefront, Not in Theme Preview

**This is expected behavior.**

**Explanation:**
- Theme preview mode has limitations
- Widget only fully works on live storefront
- Preview shows placeholder

**Verification:**

Visit actual storefront (not preview) → Widget should work normally```

Scenario 5: Custom "Out of Stock" Button Conflicts

Issue: Theme has custom "Out of Stock" styling that conflicts.

Solution:

Dashboard → Settings → Widget Appearance
→ "Match theme's out-of-stock styling"
→ Or customize colors to avoid clash

---

When to Contact Support

Reach out to [email protected] if:

1. Completed all troubleshooting steps- Everything checked, still not working

2. Error messages in console- Provide screenshots of errors

• Include product URL

3. Theme-specific issues

• Mention theme name and version
• Tried manual installation, didn't work

4. Recent changes broke widget

• Mention what changed (theme update, other app)
• When it stopped working

5. Custom theme needs help

• Complex custom theme code
• Need developer-level assistance

Information to Include

When contacting support, provide:

• Shop domain (your-shop.myshopify.com)
• Affected product URL
• Theme name and version
• Screenshots of:
  • Product admin (inventory settings)
  • App embeds section
  • Browser console errors
• Steps you've already tried

---

Prevention Tips

Avoid Future Issues

1. Before theme changes:

Screenshot your app embed settings
Note which customizations you have
Test widget after theme update

2. Regular checks:

Weekly: Spot-check 2-3 out-of-stock products
Monthly: Full widget audit on all products
After app updates: Verify widget still works

3. Development/staging themes:

Test widget on staging theme first
Only push to production after verification
Keep rollback-ready theme backup

4. Documentation:

Keep notes on:
- Custom widget placements
- Theme code edits (if any)
- Integration settings
- Support ticket resolutions

---

Testing Checklist

After fixing the issue, verify everything works:

[ ] Widget appears on out-of-stock products

• Test on desktop browser
• Test on mobile browser
• Test in incognito/private mode

[ ] Widget doesn't show on in-stock products

• Verify "Add to Cart" shows when in stock
• Widget only appears when quantity = 0

[ ] Subscription modal opens

• Click "Notify Me" button
• Modal appears with email form
• Form submits successfully

[ ] Multiple variants work

• Test different color/size options
• Widget updates per variant status
• Each variant shows correct status

[ ] JavaScript console clean

• No red errors related to DemandLoop
• Successful initialization messages
• No 404/403 network errors

---

Additional Resources

• Widget installation guide: Widget Installation
• Theme compatibility list: Dashboard → Settings → Supported Themes
• Manual installation docs: Dashboard → Settings → Installation

Still stuck?

Email [email protected] with:

• Your shop domain
• Product URL showing the issue
• Console error screenshots

We'll respond within 24 hours with a solution.