Shopify Widget Integration

Modern Shopify themes (Online Store 2.0) support a 'Custom Liquid' block. This is the easiest method and doesn't require editing theme files.

Step-by-Step Instructions

1. Get your embed code

   • Log in to GizmoSauce and open your widget
   • Click the Get Code button
   • Copy the entire <script> tag

2. Open the Shopify Theme Editor

   • Go to your Shopify Admin dashboard
   • Navigate to Online Store → Themes
   • Click the green Customize button on your active theme

3. Navigate to your target page

   • Use the dropdown at the top to select the page type (Home, Product, Collection, etc.)
   • Click where you want the widget to appear

4. Add the Custom Liquid block

   • Click + Add section or + Add block
   • Search for Custom Liquid and select it
   • A new block will appear in your layout

5. Paste your code

   • Click on the Custom Liquid block
   • In the right sidebar, find the Liquid code text area
   • Paste your GizmoSauce embed code
   • Click Save in the top-right corner

✅ Your widget should now be visible in the preview!

For widgets that should appear on every page of your store—like WhatsApp Chat, Popup Builder, or Announcement Bars—you need to add the code to your theme's main layout file.

Step-by-Step Instructions

1. Open the Theme Code Editor

   • Go to Online Store → Themes
   • Click the ⋯ (three dots) menu next to your active theme
   • Select Edit code

2. Find the theme.liquid file

   • In the left sidebar, expand the Layout folder
   • Click on theme.liquid

3. Add your widget code

   • Scroll to the very bottom of the file
   • Find the closing </body> tag
   • Paste your GizmoSauce code just before this tag:

   <!-- GizmoSauce Widget -->
   <script src="https://embed.gizmosauce.com/..."></script>
   </body>
   

4. Save your changes

   • Click Save in the top-right corner
   • The widget will now appear on all pages

Tip: Test on your live store URL, not in the theme editor preview.

Widget not showing?

• Preview issue: The Shopify theme editor may not execute custom scripts. Visit your actual store URL (e.g., yourstore.myshopify.com) to see the widget.
• Cache: Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or open in an incognito window.
• Theme compatibility: Ensure you're using a Shopify 2.0 theme (Dawn, Sense, Taste, etc.). Older themes may require Method 2.

Widget appears behind other elements?

• GizmoSauce widgets use Shadow DOM isolation, so style conflicts are rare.
• If your floating widget (e.g., chat) is hidden behind a menu or banner, contact our support team for a z-index override.

Widget looks different than expected?

• Check your widget settings in the GizmoSauce editor.
• Ensure your Shopify theme isn't applying custom CSS that affects iframes or scripts.