Can I change the display price of bundle products on the collection page?

For price discount, we set the bundle price to the price you set. For the  percentage off or fixed-amount off discounts, we set the initial price to $100. 

Please note that this price is only used for display on the collection listing. It does not represent the final purchase price for the latter 2 types of discounts. The price is only calculated after customers press the add-bundle-to-cart button.

Most themes assume the products are using the standard template. Don't be too surprised if the collection cannot display the correct result. It's not a bug but the theme cannot display our custom bundle products.

How to change the price?

If you want to change this price, you can search the product with the bundle name in the Shopify product admin. After that, set the price of the first variant (with default name, default items). 

In general, you should change the bundle data in our app. And our app is going to sync the bundle data to this product. 

As a rule of thumb, you should NOT directly change the product vendor and options. But the compare at price and the first variant price are not synced in our app so it's alright.

How to hide the price and the add to cart button?

There are 2 ways:

  1. Change the liquid files of your theme. Our products can be identified with the vendor or type equal to 'BYOB'. Please consult your theme developer if necessary 
  2. Add a custom liquid section to your collection 
    For OS 2.0 themes like Dawn, you can add a custom liquid to the collection. Please follow the steps below:
    1. Prepare the collection handle if the collection link is https://byob.myshopify.com/collections/vans. The collection handle is 'collections/vans'
    2. Set the product price to a special price like $25.5 or any price you like. Please note that all prices under the collection will be removed
    3. Prepare the class name of the price element. This is a bit harder. You have to use the inspector on Chrome. Open it with Ctrl + Shift + I or F12 or right-click => Inspect. For Dawn theme, the class name is 'price':

    4. In the theme editor, go to Collections => Default Collection. Add a custom liquid to your theme. After that, Copy and paste the code below. Replace the handle, price, and class name with your own (the first 2 - 4 lines):
      <script>
      let collection_handle = 'collections/YOUR-COLLECTION-NAME';
      let price = 'YOUR PRICE';
      let classname = 'YOUR CLASSNAME';
      
      if (window.location.pathname.includes(collection_handle)) {
      	let elements = document.getElementsByClassName(classname);
      	for (el of elements) {
      		if (el.innerText.includes(price)) {
      			while (el.firstChild) {
      				el.removeChild(el.firstChild);
      			}
      			// remove extra sibling element like direct add to cart button
      			if (el.nextElementSibling) el.parentNode.removeChild(el.nextElementSibling);
      			
      		}		
      	}
      }	
      </script>
      		

      You can also watch this video for the whole process (the sample theme is Dawn):

    5. You may need to type a space and save it again. The theme editor is slow and not saving the changes occasionally. 

Still need help? Contact Us Contact Us