This article outlines how to display the cart summary and discount code box on mobile devices.
Caution
This article is specific to Bold Cashier on Shopify. If your store is using Bold Checkout, please visit the articles relevant for BigCommerce, WooCommerce, or commercetools, here.
By default, Bold Cashier will collapse the cart summary on mobile devices. The cart summary includes your customer's products as well as the total price of the cart with discounts and shipping included.
The cart summary can be seen by your customers by selecting the dropdown arrow next to the Summary while viewing Bold Cashier on a mobile device.
- From within Bold cashier, select Settings > General Settings.
- 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);
}
} - Select Save.
The discount code box is located within the order summary section of the checkout. On mobile, this is collapsed by default.
Customers can still view and enter a discount code by selecting the dropdown arrow next to Summary while viewing the Bold Cashier checkout on a mobile device, but this may come across as an inconvenience.
If you would like to display the discount code box without needing to manually expandi the Summary box on mobile, please follow the steps below.:
- From within Bold Cashier, select Settings > General Settings.
- Copy and paste the code for Display Discount Code Box on Mobile into the Custom CSS field.
- Select Save.
After the CSS code has been added into the Custom CSS field within Bold Cashier, the mobile view will display the discount code box outside of the Summary section.
Example
