Payment method icons in cart drawer

[sim8]

Hi,

I would like a selection of payment method icons in the cart drawer under the check out button.

I am using the theme dawn. Can anyone help me with this? 

Preferably no apps. 

Thanks in advance 🙂

[Guleria]

Hello @sim8 ,

Edit snippets -> cart-drawer.liquid
Here search for this code

<div class="cart__ctas" {{ block.shopify_attributes }}>
          <button
            type="submit"
            id="CartDrawer-Checkout"
            class="cart__checkout-button button"
            name="checkout"
            form="CartDrawer-Form"
            {% if cart == empty %}
              disabled
            {% endif %}
          >
            {{ 'sections.cart.checkout' | t }}
          </button>
        </div>

Once found next to it add this code ( maybe at line 558 )

<div class="cart__ctas">
         <ul class="list 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>

If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks

[sim8]

Thanks for your reply.

But I would like to just use some of the payment icons instead of all the enabled payment types.

[LizHoang]

Hi @sim8 

You can follow the instruction here :

1. Go to Shopify > Theme > Edit code > open Snippet > go to File cart-drawer.liquid : screenshot 

2. Copy and paste this code to the section > Save

<div id="payment-icon" style="margin-top: 10px;">
          <ul class="list list-payment" role="list" style="justify-content: center;">
              {%- 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>

Here is the result : 

[sim8]

Thanks for your reply.

But I would like to just use some of the payment icons instead of all the enabled payment types.

[Guleria · Accepted solution]

Here you can find how to enable specefic one
https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...

If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services

You can find the email in the signature below.

Thanks