Static Build-a-Box setup guide

Overview

• Build-a-Box is a feature within Skio that allow you to easily bundle products together to increase AOV and the subscription experience

• A box has a set number of units (variants) with a set price that will recur for every order

• Skio's customer portal makes it very easy to customize the variants that make up the box subscription

What is Build-a-Box?

Static boxes allows merchants to create a product available in Skio that groups child variants together. Boxes will have a set number of variants that can be selected to put within the box and a static price that will recur for every order, regardless of which variants are added to the box.

This is an amazing feature that offers a more customized subscription experience for your customers. Instead of creating pre-built bundles, why not let your subscribers choose for themselves? Allowing customization for subscribers will help to increase overall satisfaction and can help improve average order value (AOV), lifetime value (LTV), as well improving overall retention.

Build-a-Box requires:

1. Shopify 2.0 theme in Shopify for the code snippet to work

How to enable Build-a-Box within Skio

Setting up Build-a-Box will be done in two steps:

1. Creating the Build-a-Box product within Skio

   1. Go to the Build-a-Box page within the Skio and click “+ Static Box"

   2. Select a name for your box (this will be visible to the customer in your storefront)

   3. Choose the products that are available within the box

   4. Choose the number of items that can be added to the box

   5. Set the price that subscribers will pay for this custom box

   6. Click save!

2. Adding custom code into your Shopify theme (don't worry, this doesn't require a developer)

   1. Navigate to Online Store in the Shopify Admin

   2. Select “Customize” on the proper theme (live)

   3. Navigate from the home page to the product pages using to top middle dropdown

   4. Select default product

   5. Under product information, select “Add Block”, then “Custom Liquid”

   6. Copy and paste the code snippet provided (see section below)

   7. Click save

After creating the box in Skio, the box product will be created in Shopify as a draft product. Make sure to set it to Active when you're ready for it to appear in your storefront!

Skio's Build-a-Box code

Simply copy and paste this code below in the "custom liquid" step when editing your Shopify theme:

{% if product.type == 'Classic Box' or product.type == 'Dynamic Box' %} 
  <script> 
    (() => { 
      document.addEventListener('DOMContentLoaded', () => { 
        const form = document.querySelector('form[action="/cart/add"]'); 
        if(!form) { console.error('Skio: No form found'); return; } 
        const addToCart = form.querySelector('button[type="submit"]'); 
        if(!addToCart) { console.error('Skio: No add to cart button found'); return; } 
        const customize = addToCart.cloneNode(true); 
        customize.removeAttribute('name'); 
        customize.type = 'button'; 
        customize.querySelector('span').innerHTML = 'Customize my Box'; 
        customize.addEventListener('click', (event) => { 
          const formData = new FormData(form); 
          const variant = formData.get('id'); 
          const sellingPlan = formData.get('selling_plan');
          let redirect;
          {% if product.type == 'Classic Box' %} 
            if (sellingPlan) { redirect = `/a/account/custom-tools/build-a-box?variant=${variant}&selling_plan=${sellingPlan}`; } 
            else { redirect = `/a/account/custom-tools/build-a-box?variant=${variant}`; }
          {% else %} 
            redirect = `/a/account/custom-tools/dynamic-box?product={{product.id}}`; 
          {% endif %} 
          window.location = redirect; 
        }); 
        const buttonParent = addToCart.parentElement; 
        buttonParent.insertBefore(customize, addToCart); 
        addToCart.remove(); 
        let remove_button = form.querySelector('[data-shopify="payment-button"]'); 
        if (remove_button) remove_button.remove(); 
      }); 
    })(); 
  </script> 
{% endif %}

Setting up Build-a-Box in Skio

On the Build-a-Box page in Skio, choose the Static box option. Input a name, choose the eligible products, and set the size and pricing that the subscriber will pay. Remember that this is a fixed price so whatever the combination of products, the price is what the subscriber will pay even if the variants in Shopify have different prices. If products have different pricing, we recommend setting up a dynamic box: Dynamic build-a-box setup guide.

After clicking Save, Skio will create the product in Shopify for you. Next up:

1. Go to the Product page in Skio

2. Click "Add product" and select your new static box product (the one Skio created for you)

3. After adding the product, setup selling plans so the subscriber can choose different delivery frequencies

4. Once selling plans are added, make sure you go to the product in Shopify to set it to an Active product

   • Note: By default, the product will be set to draft and won't be available on your storefront

5. In Shopify, you can add a product image

   • Note: Make sure to click "Sync products" on the Shopify page to pull in the new image

How do subscription orders get processed?

The Build-a-Box product Skio creates in your Shopify store is going to act as the parent product, this is the subscription the subscriber has been subscribed to. When Skio renews the box subscription, we pass through the items in the box as order line items in Shopify at $0 prices (via a manual discount).

The subscriber's subscription would just be the box itself and each order their products will populate in their Shopify order. Subscribers can edit the items in their box at any time in customer portal.

Here's an example of how an order would appear in Shopify: