This section explains how to add the AI Shop Assistant PDP script to your Shopify theme.
To install the PDP, follow the steps outlined below:
Login to Shopify store.
Navigate to Online Store > Themes.
Navigate to the desired theme for the widget, then select the 'Actions' drop-down.
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 PDP in your testing theme before putting it on your live theme.
In the theme code editor, find the main-product.liquid file.
In your main-product.liquid file, find the place where you want to place the PDP on the page
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>' data-app-type="pdp" 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' data-app-type=”pdp” defer></script>
Please ensure to include defer in the script tag.
Hit “Save“ button on the top right.
Navigate to your Shopify store product page, you should be able to see the AI shop assistant PDP on your page!
If PDP layout is off, please add an outer container to the script like below
<div style="display: block; width: 100%;"> <script src="https://widget.shopassistant-ai.com/preguide_ai.js" data-tenantid='prz_123123123' data-app-type=”pdp” defer></script> </div>
Note: The AI Shop Assistant PDP will be loaded on the specific page where you put the script.