Visit website

Dawn Theme Shopify: How to Add Payment Method Icons to the Cart Drawer

A free guide on how to add payment method icons to the cart drawer, including enabling them via a checkbox directly in the Dawn theme settings.

Relevant for Dawn theme version 15.3.0

If you want to avoid coding, try the Shrine theme.

Shrine offers over 120 built-in features that help improve conversion rates and increase the average order value, without the need to configure additional apps or pay for subscriptions. Everything is customizable without code, saving you time and resources.

Learn more

1. Prepare the Icon in SVG Format

Online Store → Themes → Edit code.

2. Open the cart-drawer.liquid File in the snippets Folder

Find the following line:

<div class="drawer__footer">

Paste the following code before the closing </div> tag, as shown in the screenshot:

<!-- Cart Drawer List Payment -->

{%- if settings.payment_enable -%}
  <div class="footer__payment">
    <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
    <ul class="list list-payment CartDrawer-list-payment" role="list">
      {%- for type in shop.enabled_payment_types -%}
        <li class="list-payment__item">
          {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
        </li>
      {%- endfor -%}
    </ul>
 </div>
{%- endif -%}

Next, locate the <style> tag in this file and insert the following CSS code before the closing </style> tag, as shown in the screenshot:

.list-payment.CartDrawer-list-payment {
  display: flex;
  justify-content: center;
  margin-top: 10px;       /* adds top margin */
  margin-bottom: 0.5rem;  /* adds bottom margin */
  /* gap: 10px; */        /* can be enabled if you want spacing between the icons */
}

If you want to adjust the spacing between the icons, simply remove the /* and */ around the line gap: 10px;.

What does gap: 10px; do?

It adds a small space between the payment icons, making the layout look cleaner. You can remove it or change the value to suit your design.

If you want to keep it simple, these styles are enough:

.list-payment.CartDrawer-list-payment {
  display: flex;
  justify-content: center;
}

2. Open the settings_schema.json File in the config Folder

Find the line:

"name": "t:settings_schema.cart.name",

Paste the following code, as shown in the screenshot.

{
  "type": "checkbox",
  "id": "payment_enable",
  "default": true,
  "label": "t:sections.footer.settings.payment_enable.label"
},

Save the changes.

3. Enable the Checkbox in Theme Settings

Go to Theme settings → Cart → Payment method icons.

Make sure the cart type is set to Drawer.

Need help with setup? Contact us — we’ll handle everything for you.

PreviousDawn Theme Shopify: How to Add Your Own Social Media IconsNextDawn Theme Shopify: How to Change the (Continue Shopping) Link

Last updated

Was this helpful?