Magic Box

The Smootify Magic Box is a Mix-and-match bundle: a bundle made of interchangeable products. Your customer composes the bundle by choosing from the products and associated variants.

How it works?

1. To activate the Magic Box add-on 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. This action will add a new metaobject definition to your Shopify panel.

3. Here, you can create custom product boxes with a title, image, and a discount percentage.

4. Now you only need to copy and paste the following Webflow component to your Webflow project:

Magic Box

Copy Webflow element

Note

Don’t forget to connect the Smootify Product DOM element inside the Magic Box grid to your Shopify ID if you’re using Webflow CMS collections or to Smootify dynamic products (like Best Sellers, etc…).

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

The magic box consists of several different DOM Elements, let’s see the main ones!

Smootify Magic Box

This dom element is basically the wrapper of all products and of the magic box cart, it controls the logic of the box using different custom attributes.

Magic Box Metaobject

To select a magic box you need to use the custom attribute

Name

data-handle

Value

handle of your magic box

You can find the handle in your Shopify dashboard after creating some magic box

Static Magic Box

Alternatively if you don’t want to use metaobjects you can use 2 custom attributes to define a magic box (you can’t add a discount percentage in this way)

Name

data-title

Value

Title of your Box

Name

data-image

Value

shopify-cdn-image-url

The image url must be on the Shopify cdns, so upload a file in your Shopify Dashboard > Content > Files and copy the url from there

Magic Box Options

You can define many options by adding custom attributes to the smootify-magic-box custom element

Min Quantity

Minimuum quantity to enable the add to cart

Name

data-min

Value

6

Max Quantity

Maximuum quantity to enable the add to cart

Name

data-max

Value

6

Step

Step allowed from min to max, 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.

Name

data-step

Value

3

Unique Items

Prevents adding multiple quantities of each product

Name

data-unique

Value

true

Add to cart errors

Since you can limit how many items you can add to box there could be some additional errors popping up on the add to cart elements, you can control them by using custom attributes

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

Too many items

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

Smootify Magic Box Cart

This element is basically a form that contains a list of box-item and a submit button. You can add any custom form field you wish (for example a gift message) and those will be added as properties of the first item of the box

The submit button will dynamically be disabled when is not allowed to be use.

Dynamic elements

Inside the Magic box cart you can use the following attributes:

Current Quantity

The current quantity of items in the box

Name

data-prop

Value

currentQuantity

Max Quantity

The max quantity of items in the box

Name

data-prop

Value

maxQuantity

Left Quantity

The left quantity of items in the box

Name

data-prop

Value

leftQuantity

Left Quantity Width

The left quantity of items in the box expressed as a style width percentage

Name

data-prop

Value

leftQuantityWidth

Left Quantity Percentage

The left quantity of items in the box expressed as a percentage

Name

data-prop

Value

leftQuantityPercentage

Discount Percentage

The discount percentage of the box

Name

data-prop

Value

discount-percentage

Dynamic Visibility

Inside the Magic box cart you can use the following attributes to dynamically show/hide elements:

Can Purchase

The element with the following attribute will show up only if the box can be purchased

Name

box-condition

Value

can-purchase

Cannot Purchase

The element with the following attribute will show up only if the box cannot be purchased

Name

box-condition

Value

cannot-purchase

JS API

Events

Every time an element is added or removed from the box there is an event dispatched on the document body, you can use it to dynamically modify title and image of the box

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
});

Functions

The magic box elements expose 2 functions

Modify Title

This function allows you to modify the box title at runtime, is adviced to use it directly inside the event listener, so that you can avoid manually querying the magic box dom element.

E.G: below an example to how to modify the title based on quantity

/*

  SmootifyMagicBox.modifyBoxTitle(newTitle: string)

*/

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

 element.modifyBoxTitle(`${currentQuantity} wine box`)
});

Modify Image

This function allows you to modify the box image at runtime, is adviced to use it directly inside the event listener, so that you can avoid manually querying the magic box dom element.

E.G: below an example to how to modify the image based on quantity. Note that the image must be on shopify cdn!

/*

  SmootifyMagicBox.modifyBoxImage(newImage: string)

*/

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")
 }


});