Shopify Widget Integration

Owned by Andy Jiang
Last updated: Oct 23, 2024 by Chaoran Wang
1 min read

This section explains how to add the AI Shop Assistant widget script to your Shopify theme.

To install the widget, follow the steps outlined below:

  1. Login to Shopify store.

  2. Navigate to Online Store > Themes.

  3. Navigate to the desired theme for the widget, then select the 'Actions' drop-down.

  4. Select “Edit code“, this will take you to the theme code editor.

Note: If you have multiple testing themes in your store (dev, staging etc), you can test the widget in your testing theme before putting it on your live theme.

image-20241022-230117.png

  1. In the theme code editor, find the theme.liquid file.

  2. In your theme.liquid file, hit CMD + F (Mac) or CTRL + F (Windows) to open up a search bar.

  3. Enter </head> in the search. Please ensure to include the / in </head>

  4. Add the script by copying and pasting it on the line directly above the </head> tag.

<script src="https://widget.shopassistant-ai.com/preguide_ai.js" data-tenantid='<Please insert your tenant id here>' defer></script>

Please insert your tenant id in the 'data-tenantid' attribute.

For Example:

<script src="https://widget.shopassistant-ai.com/preguide_ai.js" data-tenantid='prz_123123123' defer></script>

Please ensure to include defer in the script tag.

image-20241022-235941.png

  1. Hit “Save“ button on the top right.

  2. Navigate to your Shopify store, you should be able to see the AI shop assistant widget on your page!