Display Cart Summary on Mobile

Follow

By default, Bold Cashier will only display the product, their image, and the cost associated with each one on mobile devices.

To display a more detailed cart summary on mobile, 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; }
    
    /* Collapsed by default */.Summary__DiscountForm,.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; }
    
    /* This one is expanded by default */.Summary__Cart
    
    { border-bottom: none; margin-bottom: 0; padding-bottom: 0; transition: margin 0.3s ease, padding 0.3s ease; }
    
    /* Expand these things */.Summary--alt .Summary__DiscountForm,.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 cart summary will look like this one you complete the steps:

Cart_Summary.gif

Next Steps:

Blog Posts:

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.