Display Discount Code Box on Mobile

Follow

The discount code box in Bold Cashier is in the order summary section. On mobile, this is collapsed by default.

This article will give you steps to display the discount code box while the order summary section is collapsed. To have the order summary section open by default, go to Display Cart Summary on Mobile.

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

  1. From Shopify's admin, select Apps.

    Apps

  2. Select Bold Cashier.

    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:

Correct_Image.png

Helpful Links:

3 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.