# Как добавить иконки способов оплаты в корзину (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="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FL3sVRkCHetul9Mbkz8Zc%2Fvecomlab-dev-2.jpg?alt=media&#x26;token=b175d3a1-5018-4e54-9c29-b905cc90e0f4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FhadAXZKpQRDKqihNd7ec%2Fvecomlab-custom-social-media-icons-1.jpg?alt=media&#x26;token=9bc86e34-ebf4-4c9c-aa52-cf3ff99682ee" alt=""><figcaption></figcaption></figure>

Online Store → Themes → Edit code.

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

<figure><img src="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2F0WeIbZ72HMUxfEkZ6TsF%2Fvecomlab-cart-drawer-payment-1.jpg?alt=media&#x26;token=d6a7420c-d07b-4ff7-a8ff-59c075fe0b19" 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="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FF59AsWd8h2qlBTWoDuGk%2Fvecomlab-cart-drawer-payment-2.jpg?alt=media&#x26;token=5f6f1b25-09ff-42a1-947b-3c32a8f3c9b7" 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="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FmAXGz4zWk5Y4MKq7s1sG%2Fvecomlab-cart-drawer-payment-3.jpg?alt=media&#x26;token=f472e8dc-2b3d-420c-bad0-b46e2bb429e0" 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="https://2902163750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFlNBpy1xhTHovzrO7rEc%2Fuploads%2FTUXMBfsWs16Vwg3L7sZ7%2Fvecomlab-cart-drawer-payment-4.jpg?alt=media&#x26;token=635d2361-26b8-4a37-b852-1d41ae2fd66e" alt=""><figcaption></figcaption></figure>

Theme settings → Cart → Payment method icons.

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

***

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