Shopifyで決済アイコンの並び替え

Shopifyのfooterにある決済アイコンの並び替え

並び替えの方法は2通りあります。

• コードから並び順を変更する
• CSSから並び順を変更する

コードから並び順を変更する

こちらの方法は公式ヘルプサポートでも公開されているのでご確認ください。

もし配列の中身を出力したい場合は、footer.liquidの中にある下記の部分の{% endfor %}下に{{shop.enabled_payment_types | join: ', '}}を追加し、ブラウザ画面をみると、配列の中身がすべて表示されていると思います。

{% for type in shop.enabled_payment_types %}
 <li class="payment-icon">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{% endfor %}
{{shop.enabled_payment_types | join: ', '}}

そして、ブラウザに表示された配列をコピーして覚えておき、公式のページにあるように

liquid
{% for type in shop.enabled_payment_types %}

の部分を

liquid
{% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}

に置き換えます。
そして、assign enabled_payment_types = 'visa,master,american_express,paypal'の部分を、先程出力した配列を希望の並び順にして並び替えて入れ替えて上げれば、並びが変わります。

※注意点としては、このコードに変更した後に、決済方法を追加しても自動で出力はされないので、
作業したことを忘れないようにしましょう。

CSSから並び順を変更する

配列を触ると、後に決済手段を追加した時に、表示されずに焦るような気がしたので、私の場合はCSSで並びを変更することにしました。

私の場合は、flexとnth-of-type()を利用して、並び変えました。
（テーマによってCSSのクラスが異なると思いますので、コピペでは効かない事があると思いますので、あくまで参考にどうぞ）

//payment
.payment-icons.list--inline.site-footer__icon-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  @media screen and(max-width:999px){
    justify-content: center;
  }
  li{
    &:nth-of-type(16){
      //visa
      order: 1;
    }
    &:nth-of-type(10){
      //master
      order: 2;
    }
    &:nth-of-type(7){
      //jcb
      order: 3;
    }
    &:nth-of-type(1){
      //amex
      order: 4;
    }
    &:nth-of-type(4){
      //diners
      order: 5;
    }
    &:nth-of-type(14){
      //seven
      order: 6;
    }
    &:nth-of-type(5){
      //family
      order: 7;
    }
    &:nth-of-type(8){
      //lowson
      order: 8;
    }
    &:nth-of-type(12){
      //ministop
      order: 9;
    }
    &:nth-of-type(3){
      //daily
      order: 10;
    }
    &:nth-of-type(2){
      //daily
      order: 11;
    }
    &:nth-of-type(6){
      //daily
      order: 12;
    }
    &:nth-of-type(13){
      //paypay
      order: 13;
    }
    &:nth-of-type(11){
      //linepay
      order: 14;
    }
    &:nth-of-type(9){
      //merupay
      order: 15;
    }
    &:nth-of-type(15){
      //shoppay
      order: 16;
    }
  }
}

並び替えの結果、クレジットカード、コンビニ支払い、スマホ決済の並びに整頓できました。