Build a Box
- What is Build a Box
- What do my customers see?
- How do I set this up in my store?
- Pre-requisites to setup
- Configuring Box Subscriptions
- Customize the look and feel
- Adjust the copy to your liking
- Related articles
- Facing issues?
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.
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.
- Prerequisites to setup
- Configuring Box Subscriptions
- Customizing your Box page
- 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
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 color the box page to look and feel the way you like!
- Standard styles on Loop
- 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 |
-> Learn more about the Manual Installation of Bundle Cart Snippets and Build a box discounts.
Suggested Reads
Here are a few articles that you may find helpful, and we suggest you go through the same
- Guide to Install Bundle Snippets Manually
- Learn how Box Discounts work
- Hide Box selling plan on Subscription Widget
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