Display Discount Code Box on Mobile

Follow

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

  1. From BigCommerce's admin, select Apps.

    Select Apps

  2. Select Cashier.

    Select 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.