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).

Adding a StellaMatch PDP Button

The best entry point into an analysis is the place where the user is facing a decision: on the product details page (PDP) where she needs to choose a variant. Exactly for this purpose we offer the "StellaMatch PDP Button" block in the Theme Editor. Like the "StellaMatch Analysis" block, you can drag and drop it to the place where you want it — usually between the variant selection and the add to cart button.

  • Go to the Theme Editor
  • Open your product template - it is safe to add this block to all product templates, we will automatically hide it on pages that show a product that is not recommended by any of your funnels.
  • Insert a new "StellaMatch PDP Button" block at your preferred location
  • Make sure to enable the "StellaMatch PDP Button" is enabled and customized to your likings in the settings in the Stella platform. Defined the appearance and wording on the company level and overwrite at specific funnels if needed (e.g. a different text for makeup products vs. skincare products).

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.