こんにちは
ディレクターの小坂です
Shopifyでは、ユーザーにどのような決済方法が利用できるかを知らせるために、フッターに決済アイコンを表示することができます。
しかし、決済方法によっては、自動的にアイコンが表示されないことがあります。
特に日本で独自に提供されている決済方法は、表示されないことが多いです。
そこで、今回はShopifyのDawnテーマをベースにして、フッターに手動で決済アイコンを追加する方法と、ヘッダーにも決済アイコンを表示する方法をお伝えします。
フッターに決済アイコンを追加する方法
まず、管理画面からオンラインストアの「・・・」をクリックして、コードを編集を選びます。
次に、検索窓に「footer.liquid」と入力して、該当するファイルを開きます。 footer.liquidの中で、以下のコードを探します。
{%- for type in shop.enabled_payment_types -%}このコードを、以下のコードに書き換えます。
{% assign enabled_payment_types = 'visa,master,american_express,jcb,paypal,pay_pay,rakuten_pay' | remove: ' ' | split: ',' %}
{%- for type in enabled_payment_types -%}footer.liquidが見つからない場合は、theme.liquidなどの別のファイルを確認してください。
このコードの中の「visa,master,american_express,jcb,paypal,pay_pay,rakuten_pay」の部分が、実際にフッターに表示される決済アイコンです（左から順番に表示されます）。
表示したい決済方法があれば、半角カンマで区切って追加してください。
この例では、「ビザ」「マスターカード」「アメリカンエクスプレス」「JCB」「PayPal」「PayPay」「楽天ペイ」の順番で表示するように設定していますが、掲載したい内容に合わせて変更してください。
決済アイコンの名称については、Google検索等で「Shopify 決済アイコン」と検索いただくと、決済アイコン名称のリストを掲載しているサイトがありますので、ご参照ください。
ヘッダーに決済アイコンを表示する方法
フッターだけでなく、ヘッダーにも決済アイコンを表示したい場合は、以下の手順で行えます。
フッターを編集した時と同様に、管理画面からオンラインストアの「・・・」をクリックして、コードを編集を選びます。
次に、検索窓に「header.liquid」と入力して、該当するファイルを開きます。
header.liquidの中で、決済アイコンを表示したい場所に以下のコードを貼り付けます。
<ul class="list list-payment" role="list">
{% assign enabled_payment_types = 'visa,master,american_express,jcb,paypal,pay_pay,rakuten_pay' | remove: ' ' | split: ',' %}
{%- for type in enabled_payment_types -%}
<li class="list-payment__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>
これで、ヘッダーにもフッターと同じように決済アイコンが表示されるようになります。
まとめ
Shopifyで決済アイコンを手動で設定する方法のご紹介でした。
この方法を使えば、ユーザーに安心感や信頼感を与えることができますし、購入率も向上も期待できますので。 ぜひお試しください。