How to Add Payment Option Icons to the Drawer Cart Footer - Free Tutorial

The payment icons can be shown on your shop's footer, but in the cart drawer that's not an option that is available.

In this customization, we’re adding payment icons to your cart drawer. Don't worry if you're not yet comfortable with code, all the steps you need are in this tutorial.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

Links: 

• How to add a free shipping progress bar to your cart drawer

 

 

Edit Theme Code

Update the code in cart-drawer.liquid

Add the payment icons code

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

Add this css between the <style> tags

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

Update the cart settings in settings_schema.json

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