Products & Collections

Magic Box

Products & Collections / Add Ons

Dynamic Mix and Match bundles

A "mix and match bundle" is a sales strategy that gives customers the freedom to create their own personalized product sets. Unlike traditional bundles with pre-selected items, mix and match bundles allow customers to choose the specific products they want within a designated group. Often, mix and match bundles are offered at a discounted price compared to purchasing each item individually. This incentivizes customers to buy more and increases the average order value for the business.

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.

How to configure [Shopify]

Activate the Add-on

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

Create the Magic Boxes

If you wish to easily show a different title, image and offer a discount price to your customers create Magic Boxes metaobjects from your Shopify dashboard > Content > Metaobjects > Magic Box

How to configure [Webflow]

Copy the Component

To kickstart your Magic box just copy the component below

Magic Box

Give your customers the freedom to create their own personalized product sets

Copy Element

Style it

Style it based on your own style!

Component Structure

The component is made by 2 main Custom Elements:

  • Magic Box Wrapper
  • Magic Box Cart

Magic Box Wrapper

The magic box wrapper is a Custom Element with tag smootify-magic-box. This element requires to include inside it 2 elements:

The products that you want to allow to be purchasable in the box

Inside this element you can create the listing of the products in any way you wish either CMS or Attributes to load them directly from Shopify

Magic box Cart

Is a special Add to Cart element that will allow you to effectively add the selected products to the cart as a unique box

Options

Let's see all customization options you can use on the Magic Box Wrapper.

First of all you have to associate the wrapper to a Magic box! You have 2 ways:

If you created a metaobject magic box and you want to associate the wrapper to it, just use the Custom Attribute:

Name
data-handle
Value
handle of your shopify magic box

Where the handle can be found on the Shopify Backend

Min/Max/Step Quantities

You can modify minimuum, maximuum and steps required to enable the add to cart with respectively 3 attributes:

Name
data-min
Value
number
Name
data-max
Value
number
Name
data-step
Value
number

E.g: if you set min to 3, max to 12 and step to 3, users can purchase the box if it contains 3,6,9 or 12 products.

Unique Items

If you want to prevent adding multiple quantities of each product you can add the attribute

Name
data-unique
Value
true

Categories

For certain situations you might want to divide products in different categories and avoid purchasing multiple items for the same category.

To define a category you have to wrap each product group in a different Custom Element with tag smootify-box-category.

On the Category Custom Element you have to add the attribute:

Name
data-name
Value
Category name

Categorization is pretty usefull if you need to create for example a product like a Desktop Computers where you can create your own computer by adding a piece of each category (Motherboard, GPU, ram, hdd, etc..)

Automatically when you add a product inside a smootify-box-category and you've designed the categories to be inside a Slider / Tab, the Slider / Tab will move to the next Slide / Tab.

If you want to prevent adding multiple quantities of each category you can add the attribute:

Name
data-unique-per-category
Value
true

If you want to automatically remove products when selecting a new product of the same category add the attribute:

Name
data-auto-remove-category
Value
true

If you want to allow purchasing only if there is at least one item per category add the attribute:

Name
data-all-categories
Value
true

Add to Cart Errors

The Magic Box Wrapper can trigger a lot of different errors when you add products to the cart, for example you can limit how many items you can add to the box. So you can customize the different errors that will trigger by adding the following custom attributes on the Add to Cart element

Box is full

This error pops up when you try to add more items to the box but it already reached the maximuum

Name
data-full-error
Value
Box is full
Too many items

This error pops up when you try to add a quantity of items to the box that will overfill it

Name
data-too-many-error
Value
You can add a maximum of {quantity} products
Only one

This error pops up when you try to add a product that is already in the box and the option unique items is active

Name
data-only-one
Value
You can add only 1 item inside the cart
Only one per category

This error pops up when you try to add a product of a category that is already in the box and the option unique per category is active

Name
data-only-one-per-category
Value
You can add only 1 item of {category} inside the cart

Magic Box Cart

The Magic Box Cartis a Custom Element with tag smootify-magic-box-cart and is basically the list of items added to box and a submit button. The submit button is made with the same exact structure of the Add to Cart Button.

Items List

The items list is made with a Custom Element placeholder that has the tag box-item. This placeholder will be repeated once for each item added to the box.

Inside this custom element you can use several attributes to dynamically design the element.

Product Title

The "product title" is simply the name you give to your product, you can render it on any text element by just adding the attribute

Name
product
Value
title
URL

Any link element can be replaced with the Product URL by just using the attribute:

Name
product
Value
url

Inform Smootify about your Product CMS collection slug

To prevent 404 errors, particularly when your Product CMS collection slug is not 'product', accurately specify the slug you used in the Webflow CMS collection within the Smootify script configurations.

Price

Price that reflects the selected item and the customer's market, beyond the initial variant price synced in the Webflow CMS, this specific Smootify Custom Element is required.

Price

The price of the product, varies according the selected variant and market

Copy Element

Description

The product description allows you to convey essential details about your product, such as its features, materials, dimensions, and usage instructions. You can render it inside any Rich Text Element by just adding the attribute

Name
product
Value
description
Vendor

In Shopify, the "vendor" field designates the manufacturer, supplier, or brand of a product. It's a way to track and display the source of your products.

You can render the vendor on any text/link element by using the attribute:

Name
product
Value
vendor

This is the specific image associated with the variant added to the box. It's a crucial visual element that helps customers understand the differences between the various options of a product. You can render the featured image on any Image or Div (as a background image) just by using the attribute:

Name
variant
Value
image
Line Item Quantity

This is the quantity of that specific item added to the box. You can mark any text element with the Custom Attribute:

Name
box-item
Value
quantity
Line Item Category

This is the category associated to the item if you used Magic Box Wrapper categories. You can mark any text element with the Custom Attribute:

Name
box-item
Value
category
Remove from Box

To create a remove from box element, you have to create a Custom Element with tag button and add the attribute:

Name
data-action
Value
remove

Box Cart Elements

There are many dynamic elements that you can use in order to enhance the UX of your cart, for example to let your customer know that he needs to add other items to the box in order to purchase it, etc.

Current Quantity

You can mark any text element with the attribute:

Name
data-prop
Value
currentQuantity

to show the current quantity of items added to the box.

Max Quantity

You can mark any text element with the attribute:

Name
data-prop
Value
maxQuantity

to show the max quantity of items added to the box.

Left Quantity

You can mark any text element with the attribute:

Name
data-prop
Value
leftQuantity

to show the left quantity of items.

Left Quantity Width

You can mark any div element with the attribute:

Name
data-prop
Value
leftQuantityWidth

to set the size of the div as the left quantity of items as a percentage.

Discount Percentage

You can mark any text element with the attribute:

Name
data-prop
Value
discountPercentage

to show the max quantity of items added to the box.

Missing Categories

You can mark any text element with the attribute:

Name
data-prop
Value
missingCategories

to show the categories that are missing in the box to allow the purchase.

By default the missing categories are divided by , . You can change this behaviour by adding another custom attribute:

Name
separator
Value
your separator

If you use as value repeat, the item itself will be duplicated once for each missing category.

Box Cart Visibility

To dynamically show/hide elements based on the box cart state you can use Custom Attributes like:

Can purchase

The element with the following attribute will show up only if the box can be purchased (so for example, min, max, steps and categories are satisfied)

Name
box-condition
Value
can-purchase
Cannot purchase

The element with the following attribute will show up only if the box cannot be purchased (so for example, min, max, steps and categories are not satisfied)

Name
box-condition
Value
cannot-purchase

Box Cart Properties

Just like the Add to Cart component, even the Magic Box Cart supports custom properties, you have just to add additional inputs in the form provided by the component!

JS Extensibility

Each time an item is added or removed from the box, an event is triggered on the document body.

document.body.addEventListener('smootify:magic_box_change', e => {
 
  /*    
    @Types
    element: SmootifyMagicBox
    currentQuantity: Number
    cartItems: {
      lineItem: CartLineItem,
      variant: ProductVariant
    }[]
  */
  const {element, cartItems, currentQuantity} = e.detail;
 
 // Do something here
});

Use this event to dynamically update the box's title and image.

The SmootifyMagicBox element exposes the following interface:

type  = {
        /* Modifies Box title */
     : (: string) => void;
 
      /* Modifies Box Image if the image url is valid 
      and served by Shopify CDN */
     : (: string) => void;
}

Example

For example you can modify the title of the magic box and the image based on the items added or removed

document.body.addEventListener('smootify:magic_box_change', e => {
 
  const {element, cartItems, currentQuantity} = e.detail;
 
  /* element: SmootifyMagicBox
     currentQuantity: Number
     cartItems: {
      lineItem: CartLineItem,
      variant: ProductVariant
     }[]
  */
 
 // Do something here
 
 if (currentQuantity > 3) {
    element.modifyBoxImage("shopify-cdn-url-of-a-3-items-box");
 } else {
    element.modifyBoxImage("shopify-cdn-url-of-a-2-items-box");
 }
 
 element.modifyBoxTitle(`${currentQuantity} wine box`);
 
});

Previous

Wishlist

Next

Magic Add-Ons

On this page