> ## Documentation Index
> Fetch the complete documentation index at: https://docs.convocore.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> Integrate your Convocore Agent into your Shopify store.

<Card title="Prerequisites" icon="check">
  Before you begin, make sure you have:

  <CardGroup cols={2}>
    <Card title="" icon="face-smile-wink">
      A Convocore account with a configured AI agent
    </Card>

    <Card title="" icon="shopify">
      Admin access to your Shopify store
    </Card>
  </CardGroup>
</Card>

## Integration Steps

<Steps>
  <Step title="Access Your Convocore Dashboard">
    Log in to your Convocore account and navigate to your agent's settings. Note down your unique agent ID.

    <Info>
      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://www.convocore.ai/app/eu/agents/gib2no07kqdy1f2m/overview](https://www.convocore.ai/app/eu/agents/gib2no07kqdy1f2m/overview)
    </Info>
  </Step>

  <Step title="Log in to Shopify">
    Access your **Shopify admin panel.**
  </Step>

  <Step title="Edit Theme Code">
    1. Go to `Online Store` > `Themes`
    2. Find your current theme and click `Actions` (three dots) > `Edit code`
  </Step>

  <Step title="Locate theme.liquid">
    In the list of template files, find and click on `theme.liquid`.
  </Step>

  <Step title="Add Integration Code">
    Scroll to the bottom of the `theme.liquid` file. Just before the closing `</body>` tag, paste the following code:

    ```html theme={null}
    <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'
                // modalMode: true, // Set this to 'true' to open the widget in modal mode
                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>
    ```

    <Warning>
      Remember to replace **YOUR\_AGENT\_ID** with your actual Convocore Agent ID.
    </Warning>
  </Step>

  <Step title="Save Changes">
    Click the `Save` button in the top right corner of the code editor.
  </Step>

  <Step title="Test Your Integration">
    Visit your Shopify store's frontend and verify that the widget appears and functions correctly.
  </Step>
</Steps>

## Customization Options

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

<AccordionGroup>
  <Accordion title="Change Position">
    Modify the `render` option to 'bottom-left' or 'bottom-right' to change the widget's position.
  </Accordion>

  <Accordion title="Autostart Chat">
    Add `autostart: true,` to the `VG_CONFIG` object to have the widget open automatically when a user visits your store.
  </Accordion>

  <Accordion title="Custom Styling">
    Add your own CSS file to the `stylesheets` array for custom styling:

    ```javascript theme={null}
    stylesheets: [
        "https://vg-bunny-cdn.b-cdn.net/vg_live_build/styles.css",
        "https://your-custom-css-url.css"
    ],
    ```
  </Accordion>
</AccordionGroup>

## Troubleshooting

If you encounter issues with your Convocore Agent 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 Convocore 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.

<Note>
  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.
</Note>