Use Cases

Table of Contents

Highlight a recommended product or variant

On the product detail page or on a product collection or search result page, you might want to highlight the recommended product or variant to your users, if they already have done an analysis. This will result in a personalized shopping experience throughout your entire shop.

You can achieve this by having a developer extend your theme. Whenever your shop system is using the internal variant ID somewhere on a page, that ID can be matched with the recommended IDs of the current user. These recommended IDs are stored in the local storage of the user's browser by our shop components. See our Local Storage Documentation for more details.
If a recommended product or variant is found, you can highlight the element in any way you want.

Store the analysis result in the user's account

If you store the analysis result in the user's account, your user will have access to the result data on all platforms (after logging in) and with that provide an enhanced personalized shopping experience.

If you are using our shopify app, this is already done for you. The app will sync the analysis result with the user's account in case the user is logged in.

For any other shop system, you can listen to the stella-analysis-finished event and store the analysis result in the user's account by copying our local storage values to your database. If a user is logging-in and analysis data is stored in your database, you can load that data into the local storage of the user and with that restore all the functionality of our components in the shop. To update the components on the current page (if you are not doing a full page reload after restoring that data), dispatch the event stella-data-updated on the window object to inform any component on the current page
See Local Storage Documentation for more details.

Shoot a confetti canon after an analysis was finished

Want to bring a smile on the face of your users after an analysis was finished? Add this line to your page header:<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>

And this code somewhere on your page:
<script>
  document.addEventListener("stella-analysis-finished", () => {
    window.confetti({
      particleCount: 100,
      spread: 70,
      disableForReducedMotion: true,
    });
  });
</script>

Have fun!