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

Бесплатная инструкция по добавлению иконок способов оплаты в корзину (Cart Drawer) с включением чекбокса прямо из настроек темы Dawn от Shopify.

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

---

Если вы хотите избежать настройки кода, попробуйте тему Shrine.

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

Shrine − 15% скидка

Ваш промокод: VECOMLAB

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

Online Store → Themes → Edit code.

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

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

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

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

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

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

Что делает gap: 10px;?

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

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

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

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

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

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

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

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

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

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

Theme settings → Cart → Payment method icons.

Убедитесь, что выбран тип корзины: Drawer

---

Нужна помощь с настройкой? Свяжитесь с нами — мы всё сделаем за вас.