Shopify｜コンビニ決済のアイコンを表示させるよ

今日も今日とてShopifyしてます。

今回KOMOJUを使って決済方法を拡張させましたが、決済アイコンが表示されません。
Shopifyだとフッターに決済アイコンが表示できるはずなのですが、、、カスタマーへお問い合わせ。

返信きたよん💌

Shopifyの標準仕様では、外部決済プロバイダーのアイコンをコード編集なしでは表示することができ兼ねます。

shopifyカスタマーさんの返答

おお！そうだったんですね。知らなんだ
しかし、コード編集で表示することは可能でした。

決済アイコンのコードを編集する方法

こちらの記事を参考にコード編集しました。
決済アイコンのコードを編集する

テーマコピー

まずはいつでも戻せるようにテーマをコピーします
オンラインストア＞テーマ＞アクション＞複製

コード編集

まずはいつでも戻せるようにテーマをコピーします
オンラインストア＞テーマ＞アクション＞コード編集

フッターリキッドを探します。
section＞footer.liquid

このコードを探します。テーマDawnだと297~360行目くらいでにあります。

{% for type in shop.enabled_payment_types %}

↓以下のコードに編集

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

ポイントなのが

‘visa,master,american_express,paypal’

シングルコーテーションの中に表示させたい決済アイコンの名前を入れていきます。
この場合、VISAカード、アメックス、マスターカード、paypalが表示されます。

コンビニ決済の記述

公式では表記がなかったのでこんな感じで書いてみたら表示できました。

‘pay_easy’
‘familymart’
‘lawson’
‘ministop’
‘dailyyamazaki’

{% assign enabled_payment_types = 'visa,master,american_express,pay_easy,familymart,lawson,ministop,dailyyamazaki' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}

アイコン表示があると決済方法が分かりやすくなるのでぜひお試しくださいませ