CSS Styling with Bold Bundles (Coding Styling Options)

Bold Bundles has some optional customizations that can either expand the app's functionality further or help optimize the display of the app on the storefront. All of the customizations are applied within a theme's liquid code.

Note: Making adjustments to Bold Bundles does require knowledge of CSS. If you are not comfortable with adding liquid code into your theme, one of our partners could complete this as a paid customization on your store. Please visit ShopExperts via this form.

Please select a customization below to learn what the customization does and how to apply the customization to your theme.

Apply custom CSS styling

Bold Bundles offers an in-app input box that allows you to apply your own custom CSS styling to the Bold Bundles widget.

The CSS input box can be found within Bold Bundles under Settings > Display at the bottom of the page:

A list of some common classes that are used for the Bundle widget can be found below:

.bold-bundles-widget basic-bundle 
.bold-bundles-widget-header
.bold-bundles-widget-header__title
.bold-bundles-widget__items
.bold-bundles-widget__footer

Change the mobile appearance of Bold Bundles

On some smaller devices, the Bundles widget may not scale properly, appear squished or perhaps appear too large for some users.

To fix the mobile view of the bundle widget, please follow these steps:

1. From the Bundles admin homepage, select Settings, then Display.
2. Enter the Bold Bundles Mobile Styling CSS Code in the Custom CSS field.

1. @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;
   }
   }

   

3. Select Save.

Create a collection of bundles

Bundles allows you to create a Shopify page to display all of your bundle deals. This allows all of your active bundles to appear on one page and have the bundle collection page appear in your store's navigation bar. This is a great way to allow your customers to easily see all of the bundle promotions that are active on your store.

The bundle collection page works with all plans and all discount methods available in Bundles.

A bundle widget for each active bundle appears on the bundle collection page.

Example:

Please visit Bold Bundles Demo Store to see a live example of a bundle collection page.

Setup

1. From Shopify's admin, select Online Store, then ... > Edit code next to the theme you would like to apply this customization to.
2. Under "Templates", select Add a new template.
3. Under "Create a new template for", select collection.

   

4. Enter bundles as the name of the template.

   

5. Select Create template.
6. Replace the contents of the file with the following code:

   Note: The styling of this file may need to be adjusted to display correctly on your site. Visit W3 Schools - CSS for more information on how to use CSS.

   {% paginate collection.products by 1000 %} {% for product in collection.products %}
    <div class="bold-bundle" data-product-id="{{ product.id }}"&gt ></div>
   {% endfor %}{% endpaginate %}
   <style>
    .bold-bundle{
    display:inherit; 
    }
    .bold-bundles-widget{
    margin: 5px; 
    margin-left: 20%;
    margin-right: 20%;
    }
    @media only screen and (min-width: 651px) { 
    .bold-bundles-widget-item.bold-bundles-widget-item--product {
    max-width: 20% !important;
    }
    }
    .bold-bundles-widget__footer{
    display: flex;
    justify-content: center;
    } 
    .bold-bundles-widget-item__info {
    text-align: center;
    }
   </style>
   

   

7. Select Save.
8. From Shopify's admin, select Navigation.
9. Select Main menu.

   Note: You can select another menu if you want to add this page in a different location.

10. Select Add menu item.

    

11. Enter a Name.

    Note: This is the name of the page that displays on your storefront.

12. Copy and paste the following URL in the Link area:

    Note: You need to change <your myshopify domain> to match your Shopify URL. Ex: website.myshopify.com/collections/all?view=bundles.

    https://<your myshopify domain>/collections/all?view=bundles

    

13. Select Add.
14. Select Save menu.

Hide product pricing in the bundles widget

This customization hides the price of each individual product that appears below the product images within the bundle widget on your storefront:

This customization only hides the prices of each product in the bundle widget. The saving amount that appears in the cart page and in the bundle widget still appears as normal.

The setup steps below hides the bundle prices for each product on all bundle widgets on the storefront. If you have applied the "Bundle Collection" customization to your theme, the prices are hidden on this page as well.

If you would like to have the bundle prices appear in the bundle widgets on the bundle collection page, you can add the bundle include code found in step 10 in the "Setup" instructions below to the product.liquid or product-template.liquid template file at the top of the page, rather than the theme.liquid file.

Setup

1. From your Shopify admin, select Online Store, then select ... > Edit code next to the theme that you would like to apply this customization to.
2. Under Assets, select Add a new asset.
3. Select Create a blank file.

   

4. Enter the name of the Asset file.

   Note: The name used here needs to be used for the include code on step 10. In this example, the Asset file is titled "bold".

   
5. Select .css next to the file type dropdown.

   

6. Under Assets, select the blank Asset file you created.

   

7. Enter the following code below into the Asset file.

   .bold-bundles-widget-item__price {
   display: none;
   }

8. Select Save.
9. Under Layout, select theme.liquid.
10. Below the <head> tag, add the following code on a new line:

    {{ 'bold.css' | asset_url | stylesheet_tag }}

    

11. Select Save.

Hide "Bundle price" text in the cart

Note: This customization is only applicable when Bundles is set to the Variant Dependant Method on the Basic plan.

This customization hides the "Bundle price" text on the cart page when a bundle is added into the cart:

The "Bundle price" text is added to the hidden variants that Bundles add onto products when a product is added into an active bundle in the app. This hidden variant is used either when the bundle is added into the cart or when all of the products that make up the bundle are added into the cart individually.

Setup

If you want to remove the Bundle price at the end of product names in the Shopify cart, please follow these steps:

1. From your Shopify admin, select Online Store, then select ... > Edit code next to the theme that you would like to apply this customization to.
2. Under "Templates", select cart.liquid.

   Note: If your theme contains sections, you need to make this change under "Sections" in cart-template.liquid.

3. Find the code that looks like this:

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

   

4. Add this to the line:

   | replace: 'Bundle Item', '' | replace: '(Bundle price)', ''

   The line will look similar to this:

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

   

5. Select Save.

   Note: This only hides the words from the Shopify cart page. Once the customer proceeds to the Shopify checkout page, the full product title is displayed. We do not have access to Shopify's secure checkout system.

Move the bundle widget up or down the product page

You can adjust the bundle widget location on the product page by moving the bundle include in your theme liquid code.

The steps on changing the bundle widget location depends on the discount method you are using with Bold Bundles on your store.

Note: If you are not sure which discount method you are currently using, please visit Discounting Methods & How-to Switch Methods in Bold Bundles for help with determining your discount method.

If you are not comfortable with adjusting liquid code in your theme, please reach out to our Customer Success team for further assistance with moving the bundle widget for you.

For more information on changing the bundle location for each discount method, please see the steps below:

V1 & V2 (Variant Dependant & Draft Order) Steps

Within the theme files, complete the following steps.

1. Under "Templates", select product.liquid.

   Note: If your theme contains sections, you may have to make these changes in product-template.liquid under "Sections".

2. Find the following code in the liquid file and move the liquid code up or down the file:

   {% unless bundle_loaded == 'true' %}
   {% include 'shappify-bdl-load-bundle' %}
   {% assign bundle_loaded = 'true' %}
   {% endunless %}

   Note: This code cannot be moved within the form tags. We recommend adding it either after the </form> tag or just before the code that outputs the related products. If you can't find the </form> tag in the product.liquid file, check the snippets folder for a product-form.liquid or short-form.liquid file and look for the code in there.

3. Select Save.

V3 (Accelerated Draft Order) Steps

Within the theme files, complete the following steps.

1. Under "Templates", select product.liquid.

   Note: If your theme is using "Sections", the contents for this file may be within product-template.liquid.

2. Find the following code in the liquid file and move the liquid code up or down the file:

   {%- render 'shappify-bdl-load-bundle' -%}

   Note: Generally, most store owners place the widget code just below your product page's </form> tag.

3. Select Save.