Shopify
Table of Contents
Installation
Our "StellaAI" app can be found in the Shopify App Store.
- Install the app
- Open the app's settings in the Theme Editor
- Enable the app. The app should work out of the box (if your accounts is already properly set up in our platform).
This will display our Stella widget on all of your pages, helping your customers with their questions and allowing them to do an AI colour analysis and see their personal recommendations.
(If StellaAssist (the chat) is not enabled in your account yet, the widget will only be shown on PDPs of recommended products.)
Adding the analysis funnel to a page
If you have (or want to create) an advisor page to link from your main menu to, you can embed the analysis funnel to that page.
- Go to the Theme Editor
- Open the page you want to embed the funnel to
- Insert a new "StellaMatch Analysis" block at your preferred location
- Add the subdomain of the funnel you want to add, e.g.
my-funnel
if the URL of your funnel is https://my-funnel.askstella.ai (most customers only have one funnel and then you can leave this empty).
Opening the funnel in a popup
If you want to open the funnel in a popup, you can do so by adding a function call to any button or link in your shop.
- Go to the Theme Editor
- Add a button to your page, e.g. below the variants selection
- We need to add a JavaScript function call to the button to open the funnel. If your theme doesn't support this directly, you can add a custom liquid like this:
<button onClick="window.stellaAnalysisPopup.open();">Do a color analysis to find your perfect match</button>
Optionally you can also add a parameter to the function call to open another (non-default) funnel, e.g.window.stellaAnalysisPopup.open('my-other-funnel');
Add to cart settings
We offer the option to show "add to cart" buttons on the analysis result page. To make them work, this needs to be aligned with how your used Shopify theme is handling the cart. We have a couple of pre-defined scripts for prominent themes that can be selected in your company's settings. In case your theme is not supported, you will need to check with your theme's documentation or agency how to handle our stella-add-to-cart
event to automatically add items to the cart. Details about the events we are triggering from the analysis can be found in our technical documentation. The resulting Javascript code can be pasted into your company settings, or can be inserted directly in your theme.
If this is not feasible right now for you, you can also deactivate the "add to cart" buttons in the funnel's settings until this is resolved.
Adding the chat on a separate page
We recomment to also create a dedicated AI Landing Page that contains the StellaAssist chat widget. You can link to it from your support page, footer or even main menu. In addition it can be a great target for a call to action in emails, like newsletters are cart abandonment emails. Just open the page in the Theme Editor and insert the "StellaAssist Chat" block at your preferred location.
Settings for the PDP widget
The PDP widget is a widget that is automatically added to your pages as a floating button. It will encourage the user to do an analysis or, in case they have already done an analysis, show the recommendation of the current product directly on the page, as well as being the entry point to our AI chat StellaAssist. You can customize the widget's appearance and functionality in your company settings.