Display Discount Code Box on Mobile

Follow

By default, Bold Cashier will not display the discount code box on mobile devices.

To display the discount code box on mobile, please follow these steps:

  1. From BigCommerce's admin, select Apps.

    Select Apps

  2. Select Bold Cashier.

    Select Bold Cashier

  3. Select Settings, then General Settings.

    Settings/General Settings

  4. Copy and paste this code into the Custom CSS field.
    @media only screen and (max-width: 999px) {
    .SummaryMain {
       overflow: visible;
       max-height: 100%;
       transition: none;
    }
    
    .Summary--alt .SummaryMain {
       max-height: 100%;
       overflow: visible;
    }
    
    .Summary__Cart, .Summary__Subtotal, .Summary__Discount, .Summary__Fees, .Summary__Total, .Summary__Payments, .Summary__Balance {
       overflow: hidden;
       max-height: 0px;
       opacity: 0;
       margin: 0;
       padding: 0;
       border: none;
    
    transition: max-height 0.3s ease,
       margin 0.3s ease,
       padding 0.3s ease,
       opacity 0.3s ease;
    }
    
    .Summary__DiscountForm {
       border-bottom: none;
       margin-bottom: 0;
       padding-bottom: 0;
    
       transition: margin 0.3s ease, padding 0.3s ease;
    }
    
    .Summary--alt .Summary__Cart, .Summary--alt .Summary__Subtotal, .Summary--alt .Summary__Discount, .Summary--alt .Summary__Fees, .Summary--alt .Summary__Total, .Summary--alt .Summary__Balance, .Summary--alt .Summary__Payments {
       max-height: 3000px;
       opacity: 1;
    }
    
    .Summary--alt .Summary__Total {
       margin: 1rem 0;
       padding: 1rem 0;
       border-top: 1px solid #d9d9d9;
       border-bottom: 1px solid #d9d9d9;
    }
    
    .Summary--alt .Summary__Cart {
       border-bottom: 1px solid #d9d9d9;
       margin-bottom: 1rem;
    }
    
    .Summary--alt .Summary__DiscountForm {
       border-bottom: 1px solid #d9d9d9;
       margin-bottom: 1rem;
       padding-bottom: 1rem; 
    }
    
    }

    Paste Code/Custom CSS

  5. Select Save.

    Select Save

That's it! The discount code box will look like this one you complete the steps:

Upsell Demo

Next Steps:

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.