Top

Change the Mobile Appearance of Product Bundles

On some smaller devices, the Product Bundles widget may not scale properly and appear squished for some users. To change the mobile appearance of the widget, follow these steps:

  1. From "Shopify Admin", select Apps.

    Select Apps 

  2. Select the Product Bundles app.

    Select Product Bundles 

  3. Select Display Settings.

    Note: If you are using Product Bundles v2, you will need to select Settings -> Display Settings here instead.

    select display settings 

  4. Enter this code in the Custom CSS field.
    @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;
    }
    }

    Custom CSS 

  5. Select Save.

    Save CSS 

That's it!

Next Steps:

Blog Posts: