Payment icons

Last updated: Feb 21, 2019

Payment icons show customers which payment methods are accepted by your online store. The icons are typically displayed in the footer of your website.

Add the following code to the footer.liquid section file, or wherever you wish the icons to appear.

<style>
.icon {
  width: 3.125em;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
</style>

{%- unless shop.enabled_payment_types == empty -%}
  <span class="visuallyhidden">Supported payment methods</span>

  <ul>
    {%- for type in shop.enabled_payment_types -%}
      <li>
        {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
      </li>
    {%- endfor -%}
  </ul>
{%- endunless -%}

Please note: We have intentionally limited CSS and JavaScript, and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.