Magic Add-ons

Dynamically create product bundles with add-ons, featuring custom titles and images, which can be displayed at checkout.

How it works?

1. To activate the Magic Add-ons you need to select your connected project from the Smootify dashboard and enable the Magic Box add-on available in the Sites add-ons section.

2. Only after enabling the Magic Box add-on will you be able to enable the Magic Add-ons on the same page.

3. The first step in your Shopify dashboard is to select the recommended products (add-ons) for each product you want to show as product bundle. These products will form the “combinations” or bundles that customers will see in their cart and checkout once added to the cart. To do this, choose your main product from the product list in your Shopify dashboard and go to the product page. Here, in the Product Metafields section, select Add-ons and add your recommended products to form the product bundle.

4. Once you’ve added the add-ons to create your bundles, the next step is to customize the possible combinations. After enabling the two add-ons from the Smootify dashboard (Magic Box and Magic Add-ons), the system will automatically create a new Custom Data (in the Settings section of your Shopify) called Combinations.

5. From here, you can easily create your product combinations by adding a title and image. This will also be reflected in the Shopify checkout.

6. Once you’ve created your combinations, to link them to a main product, simply open the product sheet and add the created combinations in the product metafields section.

7. All that’s left is to complete the configuration in Webflow. In the product page of your project, simply add the component you’ll find at the bottom.

Magic Add-ons

Copy Webflow element

8. Once you’ve added the component onto your product page, you’ll need to establish a link between your Shopify account (identified by your Shopify ID) and the custom product element (Smootify Product) in the Settings / Custom attributes section of your project. This connection is essential for the custom element to function correctly within your Shopify store. Refer to the example below for a visual guide on how to complete this process.

9. Note that the component copied into the product page comes with various options for displaying your add-ons (checkboxes, dropdowns, selects, and swatches). Choose the element you prefer to showcase your add-ons and delete the ones you don’t intend to use directly from your project’s navigator.