Build Your Own Box: Shopify Custom Landing Page Without App

Pradeep Maurya

3 days ago

Build Your Own Box: Shopify Custom Landing Page With Checkboxes

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

Looking for a Freelance Shopify Expert?

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.

Hire Shopify Expert Now

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 it custom-box
Paste this below code:


{% 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>

{% assign bundle_products = collections['custom-box-products'].products %}

{% for product in bundle_products %}

{% assign variant = product.variants.first %}

{% 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 %}

{% endif %}

<p>{{ product.title }}</p>

</label>

</div>

{% endfor %}

<button type="submit">Add Selected to Cart</button>

</form>

</div>

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.

Looking for a Freelance Shopify Expert?

Hire Shopify Expert Now

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.

Pradeep Maurya

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