Dynamic Sets

If you are offering sets that allow users to define which variants of a group of products they want to buy, you can use our dynamic sets feature to create a set that is tailored to the user's preferences.

Examples:

  • Eyeshadow Palette - The user can select the colors they want from the available refills and the set will be created with the selected colors.
  • Concealer & Foundation Set - Sell both products together as a set and let the user choose which color shade they want for each product.

Sets will be displayed in the analysis result page is a special product card. It will be prefilled with the products/variants that the analysis is recommending to the user. The user still has the option to change the variants by clicking the "Edit Set" button and choose different variants/products.

For the best user experience, it is needed to implement a good integration in your shop system to handle the user's selection. Details are described in the next section.

Note: This is only about those dynamic sets that contain variants Stella would assist the user in finding the right one. "Static" sets like one that contains one specific Blush together with a brush, where the user has no additional options to choose the content, can be handled like normal products in our system.

Table of Contents

Setup

To set up a dynamic set, go to your products list in our platform. Find the product that is sold on your platform as a custom set and edit it. In the edit form you find a checkbox to mark this product as a dynamic set.

The product will now be listed at the bottom of the page as a dynamic set. You can edit the set by clicking on the "Products" pill next to it. In the modal that opens, you can define the products that this set contains. For each product you can define a maximum quantity of items that can be chosen of this product and at the top you define the total size of the set.

Examples

Eyeshadow Palette

  • Total size: 4
  • Product: Eyeshadow Refill
    • max items: 4

Concealer & Foundation Set

  • Total size: 2
  • Product: Concealer
    • max items: 1
  • Product: Foundation
    • max items: 1

Choose 3 glow items for just 20 €

  • Total size: 3
  • Product: Glow Blush
    • max items: 3
  • Product: Glow Foundation
    • max items: 3
  • Product: Glow Highlighter
    • max items: 3

Pre-fill the set on the PDP

When the user clicks on a set on our result page, we will open the PDP of the set and attach the chosen variants as query parameter. You can use this query parameters to pre-fill the set with the requested items, to give the user the best user experience.https://yourshop.com/products/awesome-set?variants=123123445,1235623,23452345654,1234653435Enhance your theme, to look out for the variants parameter and pre-select these variants in the set.

Adding a set to the cart

In the company's settings, you can enable the "Add to cart" button for sets. When enabled, the user will be able to add his configured set directly from our result page to the shopping cart.
To make this work, your add-to-cart script needs to be extended to support your shops logic on how to add sets to the cart. Your add-to-cart script is either implemented directly in your shop's theme or added in the company settings in our platform.
If the item that wants to be added to the cart is a set, then the payload of the stella-add-to-cart event is containing a set_id with the product ID of the set and the items list the variants to be added to the set.
See Analysis Events Documentation for more details.

Allow clicks on the variants in our widget

On PDPs of sets our widget will display all the variants that are available in the set and are recommended to the current user. By default clicking on a variant is disabled (in contrast to normal products).

To offer users the possibility to click on a variant, you need to implement a script that will catch this click and add the selected variant to the set.
1. Set the renderSetVariantsAsLinks property of the <stella-widget /> element to true.
2. Listen to the stella-variant-clicked event and add the selected variant to the set (details on the which variant is clicked is in the event payload).
See Widget's Events Documentation for more details.