Display Cart Summary & Discount Code Box on Mobile

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.

 


 

Display Cart Summary on Mobile

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.

  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 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.:

  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 field within Bold Cashier, the mobile view will display the discount code box outside of the Summary section.

 Example

Mobile discount

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