Do you want to let your customers build their own product box or select multiple products from a single landing page in Shopify? or Looking to give your customers a fun and flexible way to shop? Imagine a page where they can handpick products, check them off, and create their very own bundle — all without installing any apps.
That’s exactly what we’ll show you how to do in this guide.
Suggested Read: How to Add Custom Section to Shopify Product Page without App
Let’s build a “Build Your Own Box” landing page in Shopify using just a little Liquid and JavaScript. No apps. No subscriptions. Just a better experience for your customers — and more conversions for your store.
What Is a “Build Your Own Box” Page?
A Build Your Own Box page allows shoppers to choose multiple products from a list — like snacks, gifts, cosmetics, or supplements — and add them all to the cart at once.
This is perfect for:
- Gift boxes
- Subscription kits
- Bulk ordering
- Custom product bundles
How to Create a Custom Product Bundle Page in Shopify Without Apps
Take your online store to the next level with a skilled Shopify expert.
Whether you’re starting from scratch or need improvements on your existing store, I provide custom solutions to optimize performance, enhance user experience, and boost sales. With in-depth knowledge of Shopify, I specialize in creating seamless, responsive, and user-friendly e-commerce websites.
Step 1: Create a Collection for Your Box Products
First, you’ll group the products you want to show on the box-building page.
- Go to Shopify Admin → Products → Collections
- Click Create collection
- Name it something like:
Build Your Box Items - Set the handle to:
custom-box-products - Choose Manual or Automated (based on tags, vendor, etc.)
- Add your bundle items
Step 2: Create a Custom Page Template
Next, you’ll create a new page layout that displays your products with checkboxes.
- Go to Online Store → Themes → Edit Code
- Under Templates, click Add a new template
- Choose:
page, and name itcustom-box - Paste this below code:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
{% assign bundle_products = collections['custom-box-products'].products %} <div class="custom-box-wrapper"> <form id="custom-box-form"> {% for product in bundle_products %} {% assign variant = product.variants.first %} <div class="product-card"> <input type="checkbox" class="product-checkbox" value="{{ variant.id }}" id="product-{{ forloop.index }}"> <label for="product-{{ forloop.index }}"> {% if product.featured_image %} <img src="{{ product.featured_image | image_url: width: 300 }}" width="{{ product.featured_image.width }}" height="{{ product.featured_image.height }}" alt="{{ product.title | escape }}" loading="lazy" > {% else %} <img src="{{ 'placeholder.jpg' | asset_url }}" width="300" height="300" alt="No image"> {% endif %} <p>{{ product.title }}</p> </label> </div> {% endfor %} <button type="submit">Add Selected to Cart</button> </form> </div> <script> document.getElementById('custom-box-form').addEventListener('submit', function(e) { e.preventDefault(); const checkedBoxes = document.querySelectorAll('.product-checkbox:checked'); if (checkedBoxes.length === 0) { alert('Please select at least one product.'); return; } const items = Array.from(checkedBoxes).map(box => ({ id: parseInt(box.value), quantity: 1 })); fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: items }) }) .then(res => res.json()) .then(data => { window.location.href = '/cart'; }) .catch(err => { console.error('Error:', err); alert('Something went wrong. Please try again.'); }); }); </script> |
Step 3: Add a Page in Shopify
Now use this new template on a live page.
- Go to Online Store → Pages → Add Page
- Title it something like Build Your Own Box
- Under Theme template, choose:
page.custom-box - Save and publish
Visit yourwebsite.com/pages/build-your-own-box to see it live.
Take your online store to the next level with a skilled Shopify expert.
Whether you’re starting from scratch or need improvements on your existing store, I provide custom solutions to optimize performance, enhance user experience, and boost sales. With in-depth knowledge of Shopify, I specialize in creating seamless, responsive, and user-friendly e-commerce websites.
Why Do Custom Code?
- Lightweight – No third-party apps slowing you down
- Free – No monthly app costs
- Flexible – Easily add or remove products from the box
- Fast to implement – Just a single template and a form
Do you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request
Wrapping Words
Your customers love convenience — and letting them choose exactly what goes in their box is a great way to boost both satisfaction and sales.
Whether you’re offering a snack box, a beauty kit, or a custom gift pack, this “Build Your Own Box” landing page makes the experience smooth and fun.
You’ve transformed a regular Shopify page into a powerful custom tool — no extra cost involved.
Related Article: How to create customizable products in Shopify without an app
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
