Show discount codes in the cart drawer

Every cart in Checkmate has a field for a discount code. In the cart drawer, a Coupon button opens it in a panel. On the cart page, a Discount code row opens it in place. Quick discount blocks list your codes over that field, so customers can pick one instead of typing it. You add the blocks to the Cart drawer section, and the cart page shows the same list.

Cart drawer with the Discount panel open at the bottom, listing WELCOME15 and BUNDLE10 with their descriptions over the Enter code field

Each code must exist in Discounts in your Shopify admin. The block only shows the code and doesn't create the discount. Shopify's guide to discount codes explains how to create one.

If your store uses the Checkmate style from Theme styles, the cart drawer already has two Quick discount blocks, WELCOME15 and BUNDLE10. If your store has no codes with those names, change or remove the blocks.

Add a discount code to the cart

  1. In your Shopify admin, go to Online Store.

  2. Next to Checkmate, click Edit theme.

  3. In the editor sidebar, under Overlays, click the Cart section. The cart drawer opens in the preview.

  4. In the Cart section, click Add block and select Quick discount.

  5. In Label, enter the code as customers will see it, such as SPRING10. A block with an empty Label doesn't show.

  6. Optional. In Discount code, enter the code from Discounts if it differs from the label. Leave it empty to use the label as the code.

  7. Optional. In Description, enter a short line about the offer, such as 10% off your first order. Without one, the label shows in its place.

  8. Click Save.

Quick discount block with BUNDLE10 in Label and Discount code and its description, and the BUNDLE10 line in the drawer's Discount panel

Add one block for each code. The list shows them in the order of the blocks in the Cart section.

The cart page shows the same codes as long as the Cart section stays under Overlays, even when Cart type in Theme settings is set to Page.

What customers see

The Coupon button and the Discount code row show only when the cart has products. In the cart drawer, the Coupon button sits in the order summary, in the row above the subtotal. On the cart page, the Discount code row sits at the top of the order summary, and once a code is applied, the closed row shows it with the amount saved.

Clicking the Coupon button opens the Discount panel. Clicking the Discount code row opens the same content under the row. Each quick discount is a line with its description on the left and the code on the right. Clicking one puts the code in the Enter code field, and the customer clicks the arrow to apply it.

An applied code shows under Discount, above the subtotal, with the amount saved and an x that removes it. Automatic discounts show there too, without the x. A code that doesn't apply to the cart shows "This discount code can’t be applied to this cart."

There is no block that shows a code on other parts of your store. To show one there, write it in a Text block.

Was this article helpful?