# How to Add Payment Method Icons to the Cart Drawer

*Relevant for Dawn theme version 15.3.0*

***

{% hint style="info" %}
If you want to avoid coding, try the [Shrine](https://vecomlab.com/shrine) theme.

[Shrine](https://vecomlab.com/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.

<a href="https://vecomlab.com/shrine" class="button primary" data-icon="torii-gate">Use Shrine − 15% OFF</a>

Your discount code: `VECOMLAB`
{% endhint %}

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FnFibMtmoQbxdz5vwZ1Bw%2Fvecomlab-dev-2.jpg?alt=media&#x26;token=1bcb540e-f42d-440b-8ed9-8eed7b5235f2" alt=""><figcaption></figcaption></figure>

### 1. Prepare the Icon in SVG Format

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FuBp2PmlNX41DVfV0D9SI%2Fvecomlab-custom-social-media-icons-1.jpg?alt=media&#x26;token=c13f13c1-a0f5-4171-a06e-4944d96b94e3" alt=""><figcaption></figcaption></figure>

Online Store → Themes → Edit code.

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

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FcFtv0yeZYyJ7Gedxw56F%2Fvecomlab-cart-drawer-payment-1.jpg?alt=media&#x26;token=f407c946-7e15-4137-98fa-540325f78ebb" alt=""><figcaption></figcaption></figure>

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 -%}
```

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2F1YvXEk0qXNE6LY7uKphu%2Fvecomlab-cart-drawer-payment-2.jpg?alt=media&#x26;token=aa5fecc0-159c-4c7d-8066-129f10ce67bb" alt=""><figcaption></figcaption></figure>

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;`.

{% hint style="danger" %}
**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;
}
```

{% endhint %}

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

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FToMMmMEAk1Tvoe7Tlq0B%2Fvecomlab-cart-drawer-payment-3.jpg?alt=media&#x26;token=f4ea283b-0611-4064-849a-659f335632f6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://755362860-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fxa9ueiMPkj0LsrVay0aB%2Fuploads%2FYZ1zyeq0jwvQMWb4tJaK%2Fvecomlab-cart-drawer-payment-4.jpg?alt=media&#x26;token=ea1b954b-c699-40a6-a5d8-bafa98629073" alt=""><figcaption></figcaption></figure>

Go to **Theme settings → Cart → Payment method icons**.

{% hint style="danger" %}
Make sure the cart type is set to **Drawer**.
{% endhint %}

***

*Need help with setup?* [*Contact us*](https://vecomlab.com/pages/contact) *— we’ll handle everything for you.*