PictureData Tutorial for Shopify
Testing steps:
1. Install the PictureData app.
2. Setup the Account ID, Site ID and Server ID in the Shopify Admin > Picture Data. The IDs are available in the ChatBeacon WebAdmin App.
Login in ChatBeacon WebAdmin App with the info below:
address: https://livechat.chatbeacon.io/webadmin
user: ****
pass: ****
Click on "Install Chat Window on Website".
You will find the ChatBeacon chat window code containing the AccountID, Site ID and the Server ID in the javascript tag.
Example:
<script type="text/javascript" src="https://livechat.chatbeacon.io/chatbeacon/scripts/chatbeacon.js?accountId=4&siteId=1000&queueId=66&m=1&i=1&b=1&c=1&theme=frame" defer></script>
We notice the IDs inside the tag above:
AccountID = 4
SiteID = 1000
Server ID = https://livechat.chatbeacon.io
Enter the values in the PictureData App in your Shopify Admin then then click "Register with ChatBeacon" button.
3. Add the ChatBeacon Website Script to your Shopify template. Retrieve the tag from the https://livechat.chatbeacon.io/webadmin > Click on "Install Chat Window on Website". > Copy the Code to your clipboard.
Locate your Shopify Store Theme/Template and Edit Code > locate the file theme.liquid or responsiable for your <head> section Paste the code before the closing </head> tag. and save.
This will add a Chat Button in the bottom right side of your Store.
4. Visit the demo store (Please make public upon verification):
https://store.chatbeacon.io (password is chatbeacon)
5. Click on the Chat button in the bottom right side of the page then start a new chat by submitting the form.
6. The PictureData AI Assistant will automatically answer the chat, and will be ready for questions:
7. The demo store is a jewelry store, so please ask some of the questions below (one at a time)
Show me rings in Dallas Texas
Show me sapphire rings
Show me ring suggestions for my wife.
Show me bracelets under $2000
8. Notice the Chat Window will show the new PictureData Slider with the product results.
9. Click on any product image and get extended attributes.
10. You may click on "Add to cart" below the product attributes.
11. Continue to ask questions and complete your test.