> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.ushopaid.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://ushopaid-demo-store.myshopify.com/products/fixed-bundle-template-12-demo)

**\[Screenshot 1: Storefront overview showing the bundle introduction, BUILD MY BOX button, and selection area below.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1m0wnsm.png)

## 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.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_obi85q.png)

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.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1njnath.png)

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.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1ij1yi4.png)

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.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_29sedy.png)

## 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.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1n7pn43.png)

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.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1ti8otx.png)

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.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_cxgb9a.png)

### 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.]**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_14uexoj.png)

## 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.