How to Add Payment Icons in Cart Drawer [Shopify]

Add the following code in snippet/cart-drawer.liquid above ‘</div></div></cart-drawer>

<style>
.icon-list-custom{max-width: 50rem;}
.icon-list-custom {
    display: flex;flex-wrap: wrap;
    list-style: none;justify-content: center;
    margin: 0;  gap:8px;
    padding: 0;margin-top: -1rem;} </style>
<ul class="icon-list-custom" role="list">
{% assign enabled_payment_types = 'visa,master,apple_pay,paypal,google_pay' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
    <li>{{ type | payment_type_svg_tag: class: 'icon-svg' }} </li>
  {%- endfor -%}
</ul>

If you want this to enable and disable via Customize settings, wrap above code in following if condition:

{% if settings.payment_icons %}
ADD PREVIOUS CODE
{% endif %}

And add the following schema code in settings_schema.json (bottom of the file)

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

Icons: visa, master, paypal, american_express, apple_pay, google_pay, shopify_pay, klarna, klarna_pay_later, afterpay, discover, unionpay, maestro, jcb, diners_club, sofort, ideal, facebook_pay, bitcoin, litecoin, dogecoin, dwolla, dankort, forbrugsforeningen, amazon

4.8/5 - (5 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *