Prerequisites

Before you begin, make sure you have:

A Glowstudio account with a configured AI agent

Admin access to your Shopify store

​
Integration Steps

1

Access Your Glowstudio Dashboard

Log in to your Glowstudio account and navigate to your agent’s settings. Note down your unique agent ID.
You’ll find an agents unique ID on its dedicated card in the Agents tab or in the URL from the agent designer ex. https://glowstudio.ai/app/eu/agents/gib2no07kqdy1f2m/overview
2

Log in to Shopify

Access your Shopify admin panel.
3

Edit Theme Code

  1. Go to Online Store > Themes
  2. Find your current theme and click Actions (three dots) > Edit code
4

Locate theme.liquid

In the list of template files, find and click on theme.liquid.
5

Add Integration Code

Scroll to the bottom of the theme.liquid file. Just before the closing </body> tag, paste the following code:
<div id="VG_OVERLAY_CONTAINER"></div>
<script defer>
    (function() {
        window.VG_CONFIG = {
            ID: "YOUR_AGENT_ID", // Replace with your actual agent ID
            region: 'eu', // or 'na' for North America
            render: 'bottom-right', // or 'bottom-left'
            stylesheets: [
                "https://vg-bunny-cdn.b-cdn.net/vg_live_build/styles.css",
            ],
        }
        var VG_SCRIPT = document.createElement("script");
        VG_SCRIPT.src = "https://vg-bunny-cdn.b-cdn.net/vg_live_build/vg_bundle.js";
        VG_SCRIPT.defer = true;
        document.body.appendChild(VG_SCRIPT);
    })()
</script>
Remember to replace YOUR_AGENT_ID with your actual Glowstudio agent ID.
6

Save Changes

Click the Save button in the top right corner of the code editor.
7

Test Your Integration

Visit your Shopify store’s frontend and verify that the widget appears and functions correctly.

​
Customization Options

You can customize your widget’s behavior and appearance by adjusting the VG_CONFIG options:

​
Troubleshooting

If you encounter issues with your Glowstudio widget integration:
  1. Verify that you’ve copied the entire code snippet correctly.
  2. Double-check that you’ve replaced “YOUR_AGENT_ID” with your actual Glowstudio agent ID.
  3. Ensure the code is placed just before the closing </body> tag in your theme.liquid file. If this does not work, try placing it at the bottom of the </header> tag at the top of the theme.liquied file.
  4. Clear your browser cache and refresh your Shopify store to see changes.
If you’re using a third-party Shopify theme, the process might vary slightly. Consult your theme’s documentation or contact the theme developer for specific instructions on adding custom code.