Display Discount Code Box on Mobile

Follow

Overview

By default, Bold Checkout 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 Checkout.

    Select Bold Checkout

  3. Select Settings, then General Settings.

    Select Settings, then 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; 
    }
    
    }

    Enter Custom CSS

  5. Select Save.

    Select Save

The discount code box will look like this one you complete the steps:

Upsell Demo

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.