Articles on: Mix & Match Bundle

How to Keep Your Shopify Product Page Layout and Add a Mix & Match Bundle Builder

Keep your product page layout, showcase your bundle, and let customers click “BUILD MY BOX” to start choosing items.
This layout introduces the entire bundle at the top of the page, then gives customers a dedicated selection area below:

  • At the top: Bundle images, price, description, and the BUILD MY BOX button.
  • Below: The uShopAid Mix & Match Bundle widget, where customers choose their items and add the bundle to their cart.


View the live demo


[Screenshot 1: Storefront overview showing the bundle introduction, BUILD MY BOX button, and selection area below.]


Before you start

Open uShopAid Bundle Builder. In the Bundles list, find the Mix & Match Bundle you want to edit.
Click the pencil icon in its Action column to open the bundle editor.
[Screenshot 2: Bundles list with the pencil icon highlighted for the selected bundle.]


Go to Bundle Settings → Bundle display type.
Under Where to display the bundle?, select:
Create a product for this bundle
[Screenshot 3: Bundle Settings with “Create a product for this bundle” selected.]


This creates a Shopify product that serves as your bundle page. Its images, price, and description introduce the entire bundle.
Prepare this content and configure your bundle’s eligible products and discount rules before continuing.

Important: This tutorial applies to Create a product for this bundle. It does not apply to Create landing page for this bundle (no product).

Step 1: Create a dedicated product template

  1. In Shopify, go to Online Store → Themes.
  2. Open the theme editor for the theme you want to use.
  3. Open the page selector at the top.
  4. Select Products → Create template.
  5. Enter a template name, such as build-your-box.
  6. Base it on your default product template and create it.
  7. Select your bundle product to preview the layout.

[Screenshot 4: Create template dialog showing the template name and the default product template selected as the basis.]


The template controls the page layout. The bundle’s images, price, and description come from the corresponding bundle product—you do not need to enter them again in the template.

Changes to a template apply to every product using it. Create a dedicated template for bundle pages that need this layout.

Step 2: Keep the product information layout

In the theme editor, open Product information.
Keep the components that display your bundle’s:

  • Images
  • Title
  • Price
  • Description

This preserves your theme’s familiar product page structure. For example, a desktop layout may display bundle images on the left and bundle information on the right.
Hide these default blocks:

  • Quantity selector
  • Buy buttons

Customers will select their items and add the bundle to their cart using the uShopAid widget below.
You can also hide any other blocks you do not need.
[Screenshot 5: Product information section with Quantity selector and Buy buttons hidden, while Title, Price, and Description remain visible.]


Step 3: Add the selection heading

  1. Click Add section → Rich text.
  2. Place this section below Product information.
  3. Set its Heading text to:
CHOOSE YOUR ITEMS

You can hide the Rich text section’s text and button blocks if you only want to display the heading.
[Screenshot 6: Rich text section with its Heading set to CHOOSE YOUR ITEMS and the text and button blocks hidden.]


This heading marks the start of the selection area. It also serves as the scroll destination for the BUILD MY BOX button.

Important: Use a Heading block for CHOOSE YOUR ITEMS, rather than paragraph text. Keep only one heading with this wording on the page. The button code finds it automatically, so you do not need to look up a section ID.

Step 4: Add the uShopAid bundle widget

  1. Click Add section.
  2. Open Apps.
  3. Add the uShopAid Mix & Match Bundle widget.
  4. Drag it directly below the Rich text section.

Depending on your theme, the widget may appear inside an Apps section.
Arrange the sections in this order:

  1. Product information — Bundle images, price, description, and the button you will add next.
  2. Rich text — CHOOSE YOUR ITEMS heading.
  3. Apps → Mix & Match Bundle — Item selection and add-to-cart controls.

[Screenshot 7: Theme editor sidebar showing Product information → Rich text → Apps with Mix & Match Bundle, in that order.]


Check the preview to confirm that your bundle selection area appears correctly.

Step 5: Add the BUILD MY BOX button

Inside Product information:

  1. Click Add block → Custom Liquid.
  2. Drag the block to your preferred position, such as below the bundle price or description.
  3. Paste the complete code below.
<div class="ush-box-actions">
  <a
    href="#choose-your-items"
    class="ush-box-actions__button"
    onclick="
      var target = Array.from(
        document.querySelectorAll('h1, h2, h3, h4, h5, h6')
      ).find(function (heading) {
        return heading.textContent.trim().replace(/\s+/g, ' ').toUpperCase()
          === 'CHOOSE YOUR ITEMS';
      });

      if (target) {
        event.preventDefault();

        window.scrollTo({
          top: target.getBoundingClientRect().top + window.scrollY - 100,
          behavior: 'smooth'
        });
      }
    "
  >
    BUILD MY BOX
  </a>

  <div class="ush-box-actions__gift">
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.7"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <rect x="3" y="8" width="18" height="4" rx="1"/>
      <path d="M5 12v9h14v-9M12 8v13"/>
      <path d="M12 8H8.5a3 3 0 1 1 3-3L12 8Z"/>
      <path d="M12 8h3.5a3 3 0 1 0-3-3L12 8Z"/>
    </svg>
    <span>FREE TRAVEL BOX INCLUDED</span>
  </div>
</div>

<style>
  .ush-box-actions {
    width: 100%;
    margin: 20px 0;
  }

  .ush-box-actions__button,
  .ush-box-actions__gift {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.6px;
    text-align: center;
  }

  .ush-box-actions__button {
    min-height: 49px;
    background: #111;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .ush-box-actions__button:hover {
    background: #333;
    color: #fff;
  }

  .ush-box-actions__button:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
  }

  .ush-box-actions__gift {
    gap: 9px;
    min-height: 52px;
    margin-top: 15px;
    background: #105600;
  }

  .ush-box-actions__gift svg {
    flex-shrink: 0;
  }
</style>

The code displays a black BUILD MY BOX button and a green gift message.
When clicked, the button finds the CHOOSE YOUR ITEMS heading and smoothly scrolls to it, leaving 100 pixels of space above the heading.
[Screenshot 8: Custom Liquid block selected in the theme editor, with the BUILD MY BOX button and green gift message visible in the preview.]


Customize the gift message

Replace this example text with a message that matches your offer:

FREE TRAVEL BOX INCLUDED

The message is for display only. It does not create a free gift offer. Configure any gift offer separately in your bundle settings.

If your bundle does not include a gift, remove the entire <div class="ush-box-actions__gift">...</div> block, including the SVG icon and message. Keep the BUILD MY BOX button and its outer container.

Step 6: Apply the template in uShopAid

Save your changes in the Shopify theme editor.
Then:

  1. Return to uShopAid Bundle Builder → Bundles.
  2. Find the corresponding Mix & Match Bundle.
  3. Click the pencil icon in the Action column.
  4. Go to Bundle Settings → Bundle product template.
  5. Under Product template for the created product, select your new template.
  6. Save your bundle settings.

If the new template does not appear in the list, click Sync, then check the list again.
[Screenshot 9: Bundle product template settings with the new template selected and the Sync link highlighted.]


Step 7: Test your bundle page

Open the bundle’s storefront page in a separate tab. Check both desktop and mobile layouts.
Confirm that:

  • The top of the page displays the entire bundle’s images, price, and description.
  • The default quantity selector and buy buttons are hidden.
  • Clicking BUILD MY BOX scrolls to CHOOSE YOUR ITEMS.
  • The bundle widget appears directly below the heading.
  • Customers can select items and add the bundle to their cart.

Troubleshooting

The button does not scroll

Check that the Rich text section uses a Heading block with the text:

CHOOSE YOUR ITEMS

If you change the heading, update the matching text in the button code too.
For example, if your heading is CHOOSE YOUR FLAVORS, change:

=== 'CHOOSE YOUR ITEMS';

to:

=== 'CHOOSE YOUR FLAVORS';

Use uppercase text in this code comparison, and avoid duplicate headings with the same wording.

The heading is hidden behind the sticky header

Find this line:

top: target.getBoundingClientRect().top + window.scrollY - 100,

Increase 100 to leave more space above the heading. Decrease it if there is too much space.

Can I reuse this template for other bundles?

Yes. Select the same template under Bundle Settings → Bundle product template for each bundle.
Each page will display its own bundle product’s images, price, and description. Content entered directly into the template—such as the button, selection heading, and gift message—will be shared across all products using it.

Updated on: 15/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!