> For the complete documentation index, see [llms.txt](https://docs.vecomlab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vecomlab.com/shopify-theme-setup/dawn/cart-drawer-payment.md).

# 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="/files/gXsXFrx8lqaI854Q1v2g" alt=""><figcaption></figcaption></figure>

### 1. Prepare the Icon in SVG Format

<figure><img src="/files/H0lzf04Edebg3RQr2wW6" alt=""><figcaption></figcaption></figure>

Online Store → Themes → Edit code.

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

<figure><img src="/files/YL7hlZQHg86mJgqz2IzE" 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="/files/A6wTPwmZFgDoLFTbRre5" 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="/files/84ulRmsNwKYz2Zw9Nwms" 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="/files/3YEp2vy4NK7tt0XoQ7Sd" 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.*


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.vecomlab.com/shopify-theme-setup/dawn/cart-drawer-payment.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.