Top

Customize Product Bundles

Customizing Product Bundles

If you are looking to customize your Bundles widget you're in the right place. Click on the tabs above to see different customizations you can implement into your theme.

Note
Some of these changes are written into your store's theme code so if you change or update your theme you may need to reimplement the code.

Making the Product Bundles Widget More Mobile Friendly

On some smaller devices the widget may not scale properly and appear squished for some users. Here you will find code you can insert into the app that should correct issues like that.

When you first open Product Bundles click on Display Settings in the app's navigation bar. Once the page has loaded scroll to the bottom and look for the Custom CSS box. Select all of the code in the box below then copy and paste it into the Custom CSS box. The server may take up to a half hour to reflect these changes.



	@media (max-width: 650px) { 
	.bundle-name {
	display: inline-block !important;
	}

	.bundle-equals {
	width: 100% !important;
	} 

	.bundle-title, .total-amount {
	text-align: center !important;
	} 

	.total-amount {
	display: block !important;
	margin-top: 10px !important;
	} 

	.bundle-name {
	padding-bottom: 10px !important;
	} 

	.product-bundle .product-wrapper a {
	margin-right: auto !important;
	display: block !important;
	float: none !important;
	margin-left: auto !important;
	text-align: center;
	}

	.bundle-name {
	margin-top: 10px !important;
	}

	.bundle-plus {
	display: block !important;
	margin-top: -15px !important;
	margin-bottom: 25px !important;
	}

	#max-two {
	width: 100% !important;
	}

	.bundle-form select {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	}

	#reg_price_1, #bundle_price_1, #reg_price_2, #bundle_price_2, #reg_price_3, #bundle_price_3 {
	margin-left: auto !important;
	margin-right: auto !important;
	display: block;
	} 

	.bundle-total button {

	margin-left: auto !important;
	margin-right: auto !important;
	display: block;
	}

	}
	

The end result of that code should look like this.

Hiding Bundle Variant Names in the Cart

Sometimes you may want to remove the "Bundle Price" at the end of product names in the Shopify cart. Here we have code that can filter that portion of text out. This code may vary by theme but generally looks like the example below in your theme's cart.liquid. If you're not familiar with Liquid code you may want to contact your developer for assistance to make this change.


	<a href="{{ item.product.url }}">{{ item.title | escape }}
	

Modify the line of the line code so it now includes the replace filter for products containing "Bundle Price" and swaps it with '' which will erase it. An example of this is below.


	<a href="{{ item.product.url }}">{{ item.title | escape | replace: 'Bundle Item', '' | replace: '(Bundle price)', ''  }}
	

Note
This workaround will only hide the words outlined in the example above from appearing in the Shopify cart page. Once the customer proceeds to the Shopify checkout page, the full product title will be displayed to the customer. We do not have access to Shopify's secure checkout system.

How To Hide Product Pricing in the Bundles Widget

By default the Product Bundles app will always show the pricing of products when they're individually selected for a bundle. If you want to hide the individual product prices but keep the price or percentage saved in the "Add Bundle to Cart" button, just follow along with the video below.

Note
If you're using Google Chrome you will see "Inspect" instead of "Inspect Element" on your screen.

Have more questions? Submit a request