Installing the Widget on Shopify

Overview

This guide will show you how to install our JavaScript widget on your Shopify store. The widget will appear on all pages of your store once installed.

Installation Steps

Step 1: Access Your Theme Code

1. Log in to your Shopify admin dashboard
2. In the left sidebar, click Online Store
3. Click on Themes
4. Find your current active theme (it will have a "Current theme" badge)
5. Click the Actions button (three dots)
6. Select Edit code from the dropdown menu

Step 2: Open the theme.liquid File

1. In the left sidebar, you'll see a list of files organized by folders
2. Under the Layout folder, click on theme.liquid
3. This is the main template file that controls your entire store

Step 3: Add Your Widget Script

1. In the code editor, scroll down to the bottom of the file
2. Find the closing </body> tag (usually near the end)
3. Click just before the </body> tag to position your cursor
4. Paste your widget script:

<!-- Your Widget Script -->
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
</body>

5. Replace YOUR_API_KEY with your actual API key from your dashboard

Step 4: Save Your Changes

1. Click the green Save button in the top right corner
2. Wait for the confirmation message "File saved"

Step 5: Verify Installation

1. Open your store in a new browser tab
2. The widget should now be visible on your storefront
3. Check multiple pages (homepage, product pages, collection pages) to ensure it appears everywhere
4. If you don't see it immediately, try refreshing the page or clearing your browser cache (Ctrl+Shift+R or Cmd+Shift+R)

Installing on Specific Pages Only

If you only want the widget to appear on certain pages, you can add conditional logic.

For Homepage Only

<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
For Product Pages Only
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
For Collection Pages Only
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
For Cart Page Only
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
Alternative Installation Methods
Method 2: Using Additional Scripts Section (Shopify Plus Only)
If you have Shopify Plus, you can use the built-in scripts section:
Go to Online Store → Themes
Click Actions → Edit code
Look for Settings → checkout.liquid or use the Scripts section in checkout settings
Add your widget script there
Note: This method is only available for Shopify Plus merchants.
Method 3: Using a Third-Party App
Go to the Shopify App Store
Search for "Script Manager" or "Custom Code" apps
Install an app like "Custom Liquid" or "Script Manager"
Follow the app's instructions to add your widget script
Theme-Specific Instructions
Dawn Theme (Shopify's Default)
The standard installation method works perfectly with Dawn. Follow the main installation steps above.
Debut Theme
The standard installation method works with Debut. Follow the main installation steps above.
Other Themes
Most Shopify themes follow the same structure. If you're using a premium theme and encounter issues:
Check your theme's documentation
Look for a "Custom Scripts" or "Tracking Code" section in the theme settings
Contact your theme developer for assistance
Contact our support team for help
Troubleshooting
Widget Not Appearing
Clear your browser cache:
Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
Try viewing in an incognito/private browser window
Verify the code was saved:
Go back to Online Store → Themes → Actions → Edit code
Open theme.liquid and check if your code is still there
Check for errors:
Right-click on your store page and select "Inspect" or "Inspect Element"
Click the "Console" tab
Look for any red error messages
Share these with our support team
Verify your API key:
Make sure you've replaced YOUR_API_KEY with your actual key
Check for extra spaces, estimates, or special characters
Log in to your dashboard and verify the API key is correct
Widget Appears Multiple Times
You may have added the script in multiple locations
Check theme.liquid and any other template files you may have edited
Remove duplicate installations
Widget Not Working After Theme Update
Theme updates can overwrite your customizations
You'll need to reinstall the widget following the steps above
Consider documenting where you added the code for future reference
Widget Conflicts with Other Apps
Some Shopify apps may conflict with custom scripts
Try temporarily disabling other apps to identify conflicts
Contact our support team for compatibility assistance
Important Notes
⚠️ Before Making Changes:
Consider duplicating your theme first (Actions → Duplicate) as a backup
Test changes on a duplicate theme before applying to your live theme
⚠️ Theme Updates:
Custom code added to theme files may be overwritten when you update your theme
Always backup your customizations before updating
You'll need to re-add the widget after major theme updates
⚠️ App Blocks (Shopify 2.0 Themes):
Some newer themes support app blocks
We're working on an app block version for easier installation
For now, use the manual installation method above
Best Practices
Always duplicate your theme before making changes
Test on a preview before publishing to your live store
Keep your API key secure - don't share it publicly
Document your changes - note where you added the code
Check after theme updates - re-add the widget if needed
Need Help?
If you encounter any issues or have questions:
Check our FAQ at [your-support-url]
Contact our support team at [your-support-email]
Include your Shopify store URL and theme name when reaching out
Take screenshots of any error messages
Removing the Widget
If you ever need to remove the widget:
Go to Online Store → Themes → Actions → Edit code
Open theme.liquid
Find and delete the widget script you added
Click Save
Refresh your store to confirm removal