> 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/ru/shopify-theme-setup/dawn/cart-drawer-payment.md).

# Как добавить иконки способов оплаты в корзину (Cart Drawer)

*Актуально для версии темы Dawn 15.3.0*

***

{% hint style="info" %}
Если вы хотите избежать настройки кода, попробуйте тему [Shrine](https://vecomlab.com/shrine).

Более 120 встроенных функций, которые помогают улучшить конверсию и увеличить средний чек без необходимости настраивать дополнительные приложения и платить за подписки. Всё настраивается без кода, что экономит время и ресурсы.

<a href="https://vecomlab.com/shrine" class="button primary" data-icon="torii-gate">Shrine − 15% скидка</a>

Ваш промокод: `VECOMLAB`
{% endhint %}

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

### 1. Перейдите в редактор кода

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

Online Store → Themes → Edit code.

### 2. Откройте файл **`cart-drawer.liquid`** в папке **`snippets`**

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

Найдите строку:

```
<div class="drawer__footer">
```

Вставьте следующий код **перед** закрывающим `</div>`, как показано на скриншоте:

```
<!-- 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/UDJrqI5uBz4wZ0TGpwrr" alt=""><figcaption></figcaption></figure>

Теперь найдите тег `<style>` в этом файле и вставьте следующий CSS-код **перед закрывающим тегом `</style>`**, как показано на скриншоте:

```
.list-payment.CartDrawer-list-payment {
  display: flex;
  justify-content: center;
  margin-top: 10px;       /* добавляет отступ сверху */
  margin-bottom: 0.5rem;  /* добавляет отступ снизу */
  /* gap: 10px; */        /* можно включить, если нужно расстояние между иконками */
}
```

Если вы хотите настроить расстояние между иконками, просто уберите символ `/*` и `*/` вокруг строки `gap: 10px;`.

{% hint style="danger" %}
**Что делает `gap: 10px;`?**

Это добавляет небольшой отступ между иконками оплаты — выглядит аккуратнее. Можно убрать или поменять по вкусу.

Если не хотите усложнять, этих стилей будет достаточно:

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

{% endhint %}

Сохраните изменения.

### 3. Откройте файл `settings_schema.json` в папке `config`

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

Найдите строку `"name": "t:settings_schema.cart.name",`

Вставьте следующий код, как показано на скриншоте:

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

Сохраните изменения.

### 4. Включите чекбокс в настройках темы

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

Theme settings → Cart → Payment method icons.

{% hint style="danger" %}
Убедитесь, что выбран тип корзины: **Drawer**
{% endhint %}

***

*Нужна помощь с настройкой?* [*Свяжитесь с нами*](https://vecomlab.com/ru/pages/contact) *— мы всё сделаем за вас.*