How to Add a “Build Your Bundle” Scroll Button to a Shopify Product Page

This guide explains how to add a Build Your Bundle button to a Shopify bundle product page. When a customer clicks the button, the page smoothly scrolls down to the bundle product selection area.
This solution uses a dedicated scroll target, so it does not depend on headings such as “CHOOSE YOUR PIECES.” You can change or remove the heading without affecting the button.

Expected Result

When a customer visits the bundle product page:

1. They click Build Your Bundle.
2. The page smoothly scrolls down.
3. It stops above the bundle product selection area.
4. The customer can begin selecting products for the bundle.

This method only requires Custom Liquid blocks in the Shopify theme editor. You do not need to edit the theme’s source code.

Step 1: Open the Bundle Product Template

1. Go to your Shopify admin.
2. Select Online Store → Themes.
3. Find your current theme and click Edit theme.
4. Open the template selector at the top of the theme editor.
5. Select Products.
6. Open the product template used by your bundle products.

For example:

ushopaid-mix-match

Make sure you are editing the dedicated bundle template so these changes do not affect regular product pages.

Step 2: Add the Build Your Bundle Button

In the left sidebar, open:

Product information

Add a Custom liquid block inside Product information, then move it to the position where you want the button to appear.
Paste the following complete code into the Custom Liquid block:

<button
  type="button"
  id="build-your-bundle-button"
  class="button button--full-width"
  style="width: 100%;"
>
  Build Your Bundle
</button>

<script>
  document.addEventListener(
    'click',
    function (event) {
      const button = event.target.closest('#build-your-bundle-button');

      if (!button) return;

      event.preventDefault();
      event.stopImmediatePropagation();

      const targets = document.querySelectorAll(
        '[data-bundle-scroll-target]'
      );

      const target = Array.from(targets).find(function (element) {
        const rect = element.getBoundingClientRect();

        return rect.width > 0 && rect.height > 0;
      });

      if (!target) {
        console.error('Visible bundle scroll target was not found.');
        return;
      }

      const targetTop =
        target.getBoundingClientRect().top +
        window.scrollY -
        10;

      window.scrollTo({
        top: targetTop,
        behavior: 'smooth'
      });
    },
    true
  );
</script>

Click Save in the upper-right corner of the theme editor.

Step 3: Add the Bundle Scroll Target

Next, you need to specify where the page should scroll.
Add a new Custom liquid section immediately above the UShopAid bundle product list.
Paste the following code into it:

<div
  data-bundle-scroll-target
  aria-hidden="true"
  style="
    display: block;
    width: 100%;
    height: 1px;
    font-size: 0;
    line-height: 0;
    scroll-margin-top: 10px;
  "
>
  &nbsp;
</div>

The sections in the theme editor should be arranged approximately like this:

Product information
Other page content
Custom liquid: Bundle scroll target
UShopAid bundle product list

The scroll target must be placed immediately above the bundle product list.
Click Save when finished.

Step 4: Manage the Original “Buy It Now” Button

If the page still displays the original Buy it now button:

1. Open Product information.
2. Select the Buy buttons block.
3. Turn off Show dynamic checkout buttons.

If the bundle page does not need the regular Add to cart button, you can also remove or hide the entire Buy buttons block from this bundle template.
As long as you are editing the dedicated bundle product template, regular product pages using other templates will not be affected.

Step 5: Test the Button

Test the feature on the actual storefront product page, not only inside the theme editor preview.
Confirm that:

1. The Build Your Bundle button is displayed.
2. Clicking the button smoothly scrolls down.
3. The page stops above the bundle product list.
4. The button still works after changing or removing the section heading.
5. The behavior works on both desktop and mobile.
6. Regular product pages are unaffected.

Adjusting the Scroll Position

The scroll-target code contains:

scroll-margin-top: 10px;

The button code also contains:

window.scrollY - 10

The value 10 creates a 10-pixel offset above the target.
If the store has a sticky header that covers the bundle section after scrolling, increase both values. For example:

scroll-margin-top: 100px;

And:

window.scrollY - 100

For consistency, use the same value in both places.

Changing the Button Text

Find this text inside the button code:

Build Your Bundle

You can replace it with another label, such as:

Choose Your Pieces

Or:

Start Building

Changing the button label will not affect the scrolling behavior.

Updated on: 26/08/2026