Shopify の決済アイコンを表示する方法とおすすめアプリ｜ストア別の最適解
目次
- 「チェックを入れたのに決済アイコンが出ない」その理由
- なぜ今、決済アイコンの表示にこだわるべきか
- ストアのタイプ別：あなたに合うのはコード編集かアプリか
- おすすめアプリ「シンプル決済アイコン表示｜お手軽ペイメントラベル設定」
- アプリのインストールと設定の流れ
- コードで実装したいストア向けのサンプル
- よくある質問
- まとめ
「チェックを入れたのに決済アイコンが出ない」その理由
Shopify のテーマエディタでフッターの決済アイコンにチェックを入れたのに、VISA や JCB のロゴが一向に表示されない。あるいは PayPay やコンビニ払いのアイコンだけ抜けている。決済アイコンまわりで相談が多いのは、この「出るはずなのに出ない」というパターンです。
原因は単純なミスではなく、Shopify の仕様にあります。現在フッターに自動表示されるのは、Shopify Payments 経由で有効化された決済手段のアイコンのみです。KOMOJU などの外部決済サービスを使っているストアでは、決済設定を正しく済ませていてもアイコンがネイティブに一切表示されません。これが「テーマエディタでチェックしたのに出ない」と悩む最大の理由です。
さらに JCB には、Shopify Payments 上で「日本円建て・日本国内取引のみ」という制約があります。多通貨販売をしていると、海外顧客が見ている通貨では JCB アイコンが出ません。日本のコンビニ決済や QR 決済のアイコンは、そもそも自動表示の対象から外れやすい仕組みです。
つまり「Shopify 決済アイコン」を思いどおりに出すには、自動表示に頼らず、フッター以外の場所にも自分でアイコンを置く手段が必要になります。本記事では、その手段をストアのタイプ別に整理し、コード編集とアプリのどちらを選ぶべきかを具体的に提案します。あわせて、ノーコードで任意の場所に決済アイコンを表示できるアプリ「シンプル決済アイコン表示｜お手軽ペイメントラベル設定」も紹介します。
この記事は以下の記事を参考にしています。
なぜ今、決済アイコンの表示にこだわるべきか
決済アイコンは「あると親切」程度の装飾ではなく、購入直前の不安を取り除くトラストシグナルです。効果は数字にも表れています。セキュア決済バッジを設置したストアでは最大 42% のコンバージョン率向上が報告され、トラストシグナルに接触した買い物客は接触しなかった人に比べて 161% コンバージョンしやすいというデータがあります。逆にバッジが表示されていないと、35% の買い物客がカゴ落ちするという調査もあります。Shopify のトラフィックは 70% 超がモバイルなので、小さなスマホ画面でもアイコンがきちんと視認できるかどうかが、そのまま売上に効いてきます。
もう一つ見落とされがちなのが、日本の決済シェアの変化です。クレジットカードはいまだ最多ですが、2018 年から 2025 年にかけて利用者割合は 2〜3 割減少しました。代わりに伸びたのがコード決済で、オンラインでの PayPay は約 32%、楽天ペイは約 13% に達しています。一方でコンビニ払いや代引は減少傾向です。デフォルトのカードアイコンを並べるだけでは、日本の購入者が実際に使いたい決済手段をカバーしきれません。「自分の使う PayPay、ここで使えるんだ」と一目で伝えるために、QR・コンビニのアイコンを明示することが、いまの日本のストアでは差別化になります。
ストアのタイプ別：あなたに合うのはコード編集かアプリか
決済アイコンの出し方に唯一の正解はありません。ストアの規模・運用体制・扱う決済手段によって最適解が変わります。ここからは、よくあるストアのタイプごとに、どの手段が向いているかを提案します。
個人・少人数で運用する小規模ストア
開発者を抱えず、店主自身が管理画面を触っているケースです。このタイプは、テーマエディタの設定だけで完結するアプリ導入が最も現実的です。footer.liquid を開いてコードを書き換える作業は、Liquid に不慣れだとテーマを壊すリスクがあり、テーマ更新のたびに上書きされる心配もつきまといます。月額数ドルのコストで保守の手間から解放されるほうが、結果的に安く済みます。
筆者の実務感覚でも、「一度設置したらしばらく触らない」運用の店ほど、コード実装の保守がボトルネックになります。最初の一歩としてはアプリが無難です。
KOMOJU など外部決済を使っているストア
冒頭で触れたとおり、Shopify Payments 以外の決済を使っているストアは、フッターの自動表示が効きません。コンビニ払いや銀行振込を主力にしている日本のストアは、まさにここに該当します。
この場合の選択肢は二つです。footer.liquid のデフォルトの {% for type in shop.enabled_payment_types %} を、自分で指定したアイコンコードに差し替えるか、決済手段を自由に選んで配置できるアプリを使うか。コンビニ・QR まで含めて手早く出したいなら、後者のほうが確実です。「自動で出ると思っていたのに、外部決済だと出ない」という落とし穴を知っているかどうかで、対応の速さが変わります。
商品ページやカートにも出したいストア
フッターだけでなく、「カートに追加」ボタンの直下など、コンバージョンに直結する場所にアイコンを置きたいストアです。標準テーマの自動表示はフッター固定なので、このニーズはコード編集かアプリでないと満たせません。
アプリブロックに対応したアプリなら、テーマエディタ上でブロックを追加するだけで商品ページ・カート・フッターと配置を選べます。CSS を書かずに位置やサイズを試せるため、「どこに置くと押されやすいか」を A/B 的に検証したいストアに向いています。
自社デザインに完全に溶け込ませたいブランドストア
世界観を作り込んでいるブランドでは、アイコンの色味・余白・並びまでピクセル単位でコントロールしたいことがあります。このタイプはコード編集が向いています。月額費用がかからず、不要な機能を含まないため軽量で、デザインの自由度は無限大です。
ただし Liquid と CSS の知識が前提になり、テーマ更新時の再対応も発生します。社内に開発リソースがあるか、制作会社と継続契約しているブランドにこそ適した選択肢です。
このように、向き不向きはストアの状況で決まります。迷ったときは「まずアプリで効果を検証し、運用が固まってからコード実装を検討する」というステップが効率的です。配置やサイズを変えながら最適解を探れるアプリのほうが、最初の検証フェーズと相性が良いからです。
おすすめアプリ「シンプル決済アイコン表示｜お手軽ペイメントラベル設定」
ノーコードで任意の場所に決済アイコンを置きたいストアに、最初に試したい一本が「シンプル決済アイコン表示｜お手軽ペイメントラベル設定」です。
アプリ: シンプル決済アイコン表示｜お手軽ペイメントラベル設定
アプリの基本情報
- アプリ名: シンプル決済アイコン表示｜お手軽ペイメントラベル設定
- 価格: 月額 $1.99（7 日間の無料体験あり）
- カテゴリー: バッジとアイコン
- 対応言語: 日本語を含む多言語
※価格や仕様は変更される場合があります。最新情報はアプリストアのページをご確認ください。
このアプリが解決すること
前章のタイプ別の悩みに照らすと、このアプリは「フッター固定の自動表示では届かない場所に、デザインを揃えてアイコンを出す」ニーズに正面から応えます。
- ストアのあらゆるページに決済アイコンを追加（商品ページ、カート、フッターなど）
- ノーコードで見た目をカスタマイズ（アイコンサイズ、余白、配置、影など）
- 1 クリックでテーマに追加
- ストアのデザインに合わせて馴染ませられる
- 公式の決済ロゴで信頼感を演出
調整できる項目が細かいのも実務で効くポイントです。PC 幅は 10〜100px（初期 30px）、モバイル幅は 10〜100px（初期 24px）、アイコン間隔は 0〜20px、左中右の揃え、影は 4 段階、さらにカスタム CSS まで対応しています。モバイル幅を別に設定できるので、前述の「スマホで大きすぎる／改行が崩れる」問題を管理画面だけで解消できます。
アプリのインストールと設定の流れ
ここでは、ご利用ガイドを参考に、インストールから基本設定までを順に解説します。
ご利用ガイド: 「シンプル決済アイコン表示｜お手軽ペイメントラベル設定」ご利用ガイド
1. アプリのインストール
-
Shopify 管理画面の左メニューから 「設定」 をクリックします。
-
「アプリと販売チャネル」 をクリックし、「Shopify App Store」 に移動します。
-
検索窓で 「シンプル決済アイコン表示｜お手軽ペイメントラベル設定」 を検索し、アプリ詳細ページを開きます。
-
「インストール」 をクリックし、権限確認画面で 「アプリをインストール」 をクリックして完了です。
2. アプリをテーマに追加（有効化）
インストール後、アプリをストアのテーマで有効化します。フッターだけでなく任意のページに置けるのが、このアプリを選ぶ理由なので、設置先を意識して進めましょう。
自動でテーマに追加（1 クリック追加）
- アプリの管理画面を開きます。
- 追加したいテーマを選び、「テーマに追加」ボタンをクリックします。
- テーマエディタが開いたら、表示位置や設定を確認して「保存」します。
手動でテーマに追加（任意ページに設置したい場合）
- Shopify 管理画面で 「オンラインストア」→「テーマ」 を開き、対象テーマの 「カスタマイズ」 をクリックします。
- テーマエディタ上部のプルダウンから、追加したいページ（ホーム / 商品 / カート など）に移動します。
- 「セクションを追加」 または 「ブロックを追加」 をクリックします。
- 「アプリ」タブから 「シンプル決済アイコン表示｜お手軽ペイメントラベル設定」 を選んで追加します。
- 表示を確認し、問題なければ 「保存」 をクリックします。
商品ページのカートボタン直下に置きたいなら、ここで商品ページに移動してブロックを追加するのがポイントです。
3. 決済アイコンの設定
テーマエディタの設定パネルから表示を整えます。設定値はストアのタイプに合わせて調整してください。
アイコンのサイズ
- アイコン幅（PC/モバイル）: PC とスマホそれぞれで最適なサイズに調整します（PC は初期 30px、モバイルは初期 24px）。
- 目安: 購入ボタン付近なら 28〜36px 前後が馴染みやすいです。
アイコンの間隔
- アイコン間隔（PC/モバイル）: アイコン同士の隙間を 0〜20px の範囲で調整します。
配置
- 配置（左寄せ / 中央 / 右寄せ）: 表示位置を選択します。
- 目安: 購入ボタン下なら中央寄せ、フッターなら左寄せなどが自然です。
影（シャドウ）
- 影の強さ: 4 段階でアイコンに影を付け、立体感を出すことができます。
設定が完了したら、必ず 「保存」 をクリックして反映させましょう。
コードで実装したいストア向けのサンプル
開発リソースがあり、自社デザインに完全に溶け込ませたいブランドストア向けに、footer.liquid を編集して決済アイコンを出す例を紹介します。これは Debut や Dawn などの標準的なテーマを想定したものです。
※アイコン画像（SVG など）は別途用意し、Shopify の「ファイル」にアップロードしておく必要があります。
注意: 作業前に必ずテーマのバックアップを取ってください。
1. 画像を直接指定する方法
sections/footer.liquid などのフッターを表示しているファイルを開き、アイコンを表示したい場所に以下のコードを追加します。自分で SVG を用意するため、コンビニ・QR 決済のアイコンも自由に並べられます。
{% comment %}
Payment Icons Snippet
- Replace 'icon_visa_url', 'icon_mastercard_url' with your actual image URLs
{% endcomment %}
<div class="payment-icons">
<ul class="payment-icons__list">
<li class="payment-icons__item">
<img src="YOUR_ICON_VISA_URL" alt="Visa" width="38" height="24">
</li>
<li class="payment-icons__item">
<img src="YOUR_ICON_MASTERCARD_URL" alt="Mastercard" width="38" height="24">
</li>
<li class="payment-icons__item">
<img src="YOUR_ICON_AMEX_URL" alt="American Express" width="38" height="24">
</li>
<li class="payment-icons__item">
<img src="YOUR_ICON_PAYPAL_URL" alt="PayPal" width="38" height="24">
</li>
</ul>
</div>
<style>
.payment-icons {
margin-top: 20px;
text-align: center; /* 配置に合わせて変更 */
}
.payment-icons__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center; /* 配置に合わせて変更 */
gap: 8px; /* アイコンの間隔 */
flex-wrap: wrap;
}
.payment-icons__item img {
display: block;
max-width: 100%;
height: auto;
}
</style>
なお、アイコンのコード値は ActiveMerchant の payment_icons リポジトリ（github.com/activemerchant/payment_icons）にある SVG ファイル名から「.svg」を除いた文字列です。日本向けに実用的なコード例としては、visa,master,american_express,jcb,lawson,familymart,seveneleven,ministop,pay_pay,line_pay,merpay,rakuten_pay などが使えます。コンビニ各社や PayPay・LINE Pay・楽天ペイまで揃っているので、日本のストアはここから必要なものを選ぶとよいでしょう。
2. 有効化済みの決済を自動表示する方法
Shopify Payments で有効にしている決済方法を自動で表示させたい場合は、以下のコードが使えます（テーマによっては標準実装されています）。
{% unless shop.enabled_payment_types == empty %}
<ul class="payment-icons__list">
{% for type in shop.enabled_payment_types %}
<li class="payment-icons__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{% endfor %}
</ul>
{% endunless %}
この方法なら画像を用意する必要がなく、管理画面の決済設定と連動します。ただし冒頭で触れたとおり、shop.enabled_payment_types に乗るのは Shopify Payments 経由で有効化された決済手段だけです。外部決済やコンビニ・QR を出したい場合は、前項の画像直接指定のほうを使う必要があります。表示場所やデザインの微調整にも CSS の知識が必要になるため、特に理由がなければアプリを利用することをおすすめします。
よくある質問
Q: テーマエディタでチェックしたのに決済アイコンが表示されません。
A: フッターに自動表示されるのは Shopify Payments 経由で有効化された決済手段のアイコンだけです。KOMOJU などの外部決済を使っている場合は自動表示されないため、footer.liquid を手動編集するか、配置を自由に選べるアプリを利用してください。
Q: JCB のアイコンだけ出ないのはなぜですか？
A: JCB は Shopify Payments 上で日本円建て・日本国内取引のみという制約があります。多通貨販売をしていると、海外顧客が見ている通貨では JCB アイコンが表示されません。確実に出したい場合は、自分でアイコンを指定する方法が向いています。
Q: PayPay やコンビニ払いのアイコンも出せますか？
A: 自動表示の対象外になりやすいため、アプリで対応アイコンを選ぶか、コード編集で SVG を指定して表示します。日本の決済シェアではコード決済が伸びているので、PayPay や楽天ペイのアイコンを明示する価値は高いです。
Q: アプリをアンインストールしたらアイコンは消えますか？
A: はい。アプリブロックで導入した場合は、アプリを削除するかテーマエディタでブロックを削除すれば表示は消えます。コード編集で導入した場合は、手動でコードを削除する必要があります。
Q: 対応していない決済アイコンを表示してもいいですか？
A: 推奨されません。顧客がその決済方法で支払えると思って手続きを進め、決済画面で使えないと分かると、カゴ落ちの原因になるだけでなくストアへの不信感につながります。必ず自社が契約・設定している決済方法のみを表示しましょう。
まとめ
Shopify の決済アイコンは「自動で出るはず」という思い込みが落とし穴になりがちです。フッターに自動表示されるのは Shopify Payments 経由の決済手段だけで、外部決済・JCB の多通貨・コンビニ・QR には別の手当てが要ります。
- 個人・少人数の小規模ストアや、商品ページ・カートにも出したいストアは、ノーコードのアプリ導入が手早い
- 外部決済を使うストアは、自動表示が効かないので手動指定が前提
- デザインを作り込むブランドストアは、コード編集で自由度を取りに行く
- 日本ではコード決済が伸びているため、PayPay・コンビニのアイコン明示が訴求になる
まずはアプリで効果を検証し、運用が固まってから必要に応じてコード実装を検討する流れが効率的です。
無料体験ができるアプリを使って、あなたのストアにも決済アイコンを表示し、その効果を確かめてみてください。
今回は、以下の記事を参考にしています。
