Build a Box


What is Build a Box

In this subscription model, the user has the ability to pick and choose multiple products/variants that they want and add them all to a single bundle (or a box!). These products are then delivered to the customer basis the interval chosen by the customer. After purchase, we enable the customer to modify their box subscription directly from their customer portal.

Here’s a visual representation of the Build a Box subscription model.
enter image description here

What do my customers see?

A fully customized bundle page can look as shown below. This particular example has the frequency and box size options hidden.

If you have not customized the box page yet. This is how the default view looks. The image below explains the different sections which make up the bundle page.


How do I set this up in my store?

This section of the article will walk you through all the prerequisites and steps to get your own build-a-box page up and running on the store.

  1. Prerequisites to setup
  2. Configuring Box Subscriptions
  3. Customizing your Box page
  4. Adjust the copy to your liking

Prerequisites to setup

Before we start setting up Box subscriptions on Loop there are a few things that need to be set up prior. If you already have these set up on Loop you can skip this step

  1. Create a Selling Plan
  2. Map Products to Selling Plan
  3. Installing Loop widget

Note that the Build a Box feature is only available for customers who are on the GROWTH plan and above. You can update the plan by heading to Loop > Settings > Pricing Plans


Configuring Box Subscriptions

Following the steps listed below will ensure that you have a Box subscription page up and running on your store by the end of the article.

  • Step 1: Go to Loop > Bundles and select Create Bundle
  • Step 2: Give your bundle a Name, Description and Image.

  • Step 3: Link a selling plan to the Box and configure Box size options that the customer can choose from

  • Step 4: Choose a discount type and configure the same for every Box size.

Note that this discount is stacked over the selling plan discount. Learn more about selling plan discounts

  • Step 5: Use the automatic bundle cart snippet installer to install theme codes to your cart page to group bundle product purchases.

Callout yellow Note: If the installation fails, please follow the guide to manually install Bundle snippets.


Customize the look and feel

Loop allows you to customize the Box page to suit your brand’s style. Here are two methods that you can leverage to colour the box page to look and feel the way you like!

  1. Standard styles on Loop
  2. Custom CSS changes

Standard styles on Loop

You can use the Standard Customization Options found in Loop > Bundles > Styling

Option Name Type Default value
Selected product card border radius CONFIG 0.5em
Product discounted price color COLOR #000000
Add product button background color COLOR #000000
Add product button text color COLOR #000000
Add remove button background color COLOR #000000
Add remove button text color COLOR #ffffff
Footer background color COLOR #d9d9d9
Progress bar background color COLOR #ffffff
Progress bar fill color COLOR #000000
Selected product card background color COLOR #ffffff
Product price color COLOR #000000
Selected product card border color COLOR transparent
Total price label color COLOR #000000
Saved price label color COLOR #000000
Add to cart button background color COLOR #000
Add to cart button text color COLOR #ffffff
Display saved label OPTION block
Additional CSS CONFIG
Bundle image height CONFIG 250px
Selected button background color COLOR #000000
Heading color COLOR #000000
Text color COLOR #000000
Bundle title color COLOR #000000
Bundle image width CONFIG 400px
Display bundle size selector OPTION flex
Display bundle frequency selector OPTION flex
Discount text color COLOR #000000
Outline button color COLOR #000000
Page color COLOR #ffffff
Selected button text color COLOR #ffffff
Number of cards (Desktop) CONFIG 4
Number of cards (Mobile) CONFIG 1
Card background color COLOR transparent
Card border color COLOR transparent
Card border radius CONFIG 0.5em
Product image height CONFIG 210px
Product title color COLOR #000000

Custom CSS changes

If the standard options do not suit your requirements. You can feel free to inspect the box page and add the modifications in the Custom CSS field made available in the Styles pane.


Adjust the copy to your liking

Based on your requirements, you may have to offer the product in a different region/locale. In this
We support translating every single line of text that you see on the box page. Head over to Loop > Bundles > Translations  to change the copy.

Listed here are the options and the default value for each option.

Text Field Default Value
Select Box Select box size
Select Frequency Select frequency
Select Product Select your wines
Add To Cart ADD TO CART
Edit Cart EDIT CART
Show More show more
Show Less show less
TOTAL Total : {{currency}}{{total}}
Selected Product {{count}} of {{total}} selected
Save (Saved {{currency}}{{saved}})
Percentage discount label {{value}}% discount.
Fixed discount label Discount of amount {{currencySymbol}}{{value}}.
Single day {{number}} day
Single week {{number}} week
Single month {{number}} month
Single year {{number}} year
Multiple days {{number}} days
Multiple weeks {{number}} weeks
Multiple months {{number}} months
Multiple years {{number}} years
Toast Add To Cart Added to cart
Toast Error Added To Cart Failed to add some items
Toast Edit Cart Bundle Updated
Toast Error Edit Cart Failed to update items
Bundle change cart button Update Cart
Add to Box Add to box

Related articles

If you want to read more about Box subscriptions we have a few articles below that might interest you

  • Link to Build a Box Discounts
  • Manual Install of Bundle Cart Snippets

Facing issues?

If you have any queries or doubts about any of these steps. Please reach out to support@loopwork.co

Thanks
Loop Subscription Team

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us