Products & Collections

Magic Add-Ons

Products & Collections / Add Ons

Dynamically create product bundles with add-ons

Generate customizable product bundles with add-ons, complete with unique titles and images, and display them seamlessly at checkout.

Shopify Checkout

This functionality uses Shopify Checkout Extensions in order to create a real bundle of products even at the checkout!

All plans

This Add-On is included in all plans.

Activate add-on

This Add-On requires activation. You need to enable the add-on on the Smootify Dashboard of the site you are designing.

Dependencies

This Add-On requires Magic Box add-on to be activated.

How to configure [Shopify]

Activate the Magic Box Add-on

To turn on the Magic Add-ons feature, go to your project in the Smootify dashboard and activate first the Magic Box addon it within Sites add-ons.

Activate the Magic Add-ons Add-on

To turn on the Magic Add-ons feature, go to your project in the Smootify dashboard and activate first it within Sites add-ons.

Set the metafields as readable

When you activate the Magic Add-ons add-on, 2 metafields definition will be automatically added to your Shopify. To ensure proper functionality, go to your Shopify Dashboard > Settings > Custom Data > Products. Find the 'Combinations' and 'Add-ons' metafield definitions and enable Storefronts access.

Set the metaobject as readable

When you activate the Magic Add-ons add-on, a metaobject definition will be automatically added to your Shopify. To ensure proper functionality, go to your Shopify Dashboard > Settings > Custom Data > Metaobjects. Find the 'Combinations' metaobject definition and enable Storefronts access.

Create your combinations

Create your combinations inside Shopify > Content > Metaojbects > Combinations. Combinations are basically a way to dynamically change title and image of the box based on the combinations added to the cart.

Inside each Combination you don't have to add the main product but only the addon variants selected.

E.g: you have a main product called Tablet and two add-ons Pen and Keyboard. To cover all the combinations you have to create 3 combinations with respectively:

  • Pen
  • Keyboard
  • Pen and Keyboard

Select your add-ons

Within the Shopify product dashboard, utilize the 'Add ons' metafield to associate products that should be offered as part of a bundle with the current product.

How to configure [Webflow]

Add a Flex or Grid element

Design your flex/grid by keeping in mind that the replication of your product items will only occur on the live website, where your placeholder will be transformed into the full product listing, remember to add this element inside the Add to Cart Element

Design the Product Template item

Copy and paste the Product Custom Element inside the flex/grid element you created.

Product Custom Element

Product integration's heart. Where the magic happens.

Copy Element

Inside the Product Custom Element you can insert any static Webflow element.

But you must add one of our Add-on selectors.

Add-on Checkbox

Allows to toggle the add-on by using a Webflow checkbox element, use this if you don't need to have variable add-ons

Copy Element

Add-on Dropdown

Allows to choose a variable add-on by using a Webflow dropdown element

Copy Element

Add-on Select

Allows to choose a variable add-on by using a Webflow select element

Copy Element

Add-on Swatches

Allows to choose a variable add-on by using button swatches

Copy Element

Add the data-id attribute

To retrieve the correct data from Shopify, add the necessary data-id attribute.

In this case you to select products from the add-ons metafield, so use:

Name
data-id
Value
metafields.custom.add_ons

Add the data-parent-id attribute

To retrieve the correct data from Shopify, add the mandatory data-parent-id attribute. The attribute must be connected to the Shopify ID Webflow CMS field and just indicates that you want to load for example related products from the parent product selected by that ID

Name
data-parent-id
Value
Shopify ID

JS Extensibility

If you don't want to use Combinations to modify the Box Title or Box Image you have 2 ways:

Attributes

You can add these 2 attributes on the Add to Cart Element.

Name
box-title
Value
Box Title
Name
box-image
Value
Box Image

Remember that the Box Image url must be on shopify cdn otherwise it will not be accepted.

You can modify those attributes with JS, they will be re-read everytime the add to cart button will be pressed.

Custom Function

You can create a function attached to the window object that can process the items that are being added to the cart and return an object with title and image

window.smootifyAddOnsBox = (cartItems) => {
    /*
        cartItems is an array of objects {
            product: Product,
            variant: ProductVariant,
            attributes: Object[],
            quantity: number
        }
    */
 
   // Do your own code here
 
   return {
    title: "My Title",
    image: "My Image"
   }
}

Previous

Magic Box

Next

Product File Upload

On this page