Skip to main content

How to Hide Shopify Elements from the Bundle Page

Raunak Rana avatar
Written by Raunak Rana
Updated today

How to Hide Shopify Elements from the Bundle Page

When setting up your product bundles in Kefi Bundle Builder, you may want to hide certain default Shopify elements — like the Add to Cart button, product price, or other sections — to avoid redundancy and create a cleaner bundle display.

You can easily do this using the Hide Shopify Elements feature available in the Advanced tab of your bundle settings.

Steps to Hide Elements

  1. Go to your desired bundle in Kefi Bundle Builder that you want to edit

    • Navigate to the Advanced tab.
      ​

  2. Find the “Hide Shopify Elements” Section
    ​

    • Scroll down until you see the section labeled Hide Shopify Elements.
      ​

    • Here, you can add CSS selectors for any elements you wish to hide.
      ​

  1. Add the Selectors of Elements You Want to Hide

In the input box, enter the CSS class or ID of the element you want to hide.

NOTE - If you are using a class, start with a dot (.), and if you are using an ID, start with a hash(#)

For example: .product__price .product-form__buttons for class

#AddToCart for ID

These examples will hide the product price and the default Add to Cart buttons.

How to Find the CSS Selectors

If you’re not sure what class or ID to use for the element you want to hide, you can easily find it using your browser’s Inspect Element tool.

Here’s how:

  1. Right-click on the element you want to hide (e.g., price, button, description) on your Shopify product page.
    ​

  2. Click Inspect (or Inspect Element).
    ​

  3. In the developer tools panel, you’ll see the HTML structure of the page.
    ​

  4. Look for a class name (starting with a dot .) or an ID (starting with a hash #).
    ​

    • Example: <div class="product__price"> → selector is .product__price
      ​

    • Example: <button id="AddToCart"> → selector is #AddToCart
      ​

  5. Copy that selector and paste it into the Hide Shopify Elements field in Kefi Bundle Builder.

Why Use This Feature?

Hiding unnecessary Shopify elements ensures your bundle page looks clean and focused. It helps prevent duplicate content (like showing both your bundle Add to Cart and the default one) and creates a more seamless shopping experience for customers.

Did this answer your question?