Top

Display Discount Code Box on Mobile

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

  1. From "Shopify admin", select Apps.

    Apps 

  2. Select Bold Cashier.

    Bold Cashier 

  3. Select SETTINGS.

    Settings 

  4. Select General Settings.

    General Settings 

  5. 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; 
    }
    
    }

    Custom CSS 

  6. Select Save.

    Save 

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

Upsell Demo

Next Steps:

Blog Posts: