Display Cart Summary & Discount Code Box on Mobile

Display Cart Summary on Mobile

By default, Bold Cashier will collapse the cart summary on mobile devices. The cart summary includes the products that are added into the order by the customer and the total price of the cart with discounts and shipping included.

The cart summary can be seen by customers by selecting the dropdown arrow next to Summary while viewing Bold Cashier on a mobile device.

If you would like to display the cart summary by default, please follow these steps: 

  1. From within Bold cashier, select SettingsGeneral Settings.
  2. Copy and paste this code into the Custom CSS field.
    @media only screen and (max-width: 999px) {
    .Summary .SummaryMain {
    max-height: 100%;
    overflow: visible;
    display:block;
    }
    .Summary  .SummaryHeader__Overview {
       opacity: 0;
    }
    .Summary--alt .SummaryHeader__Title::before{
    transform:none !important;
    }
    .Summary--alt .SummaryMain {
    display:none;
    }
    .Summary--alt .SummaryHeader__Overview {
       opacity: 1;
    }
    .Summary .SummaryHeader__Title::before {
    transform: rotate(90deg);
    }
    }
  3. Select Save.

 


 

Display Discount Code Box on Mobile

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

Customers can view and still enter a discount code by selecting the dropdown arrow next to Summary while viewing Bold Cashier on a mobile device, however, this may come across as an inconvenience.

If you would like to display the discount code box without expanding the Summary box on the mobile view, please follow these steps: 

  1. From within Bold Cashier, select SettingsGeneral Settings.
  2. Copy and paste the code for Display Discount Code Box on Mobile into the Custom CSS field.
  3. Select Save.

After the CSS code has been added into the "Custom CSS" box in Bold Cashier, the mobile view will display the discount code box outside of the Summary section, similar to the following example below:

Mobile discount

Was this article helpful?
0 out of 0 found this helpful