はじめに

ECサイトを運営するうえで、エンドユーザーの「購入のハードルを下げること」は非常に重要です。
特に商品ページでは、カートに追加する前のわずかな判断の迷いが、離脱の原因になることも。

そんなときに効果的なのが、「クレジットカードやその他決済サービスのアイコン」をカートボタン近くに表示する工夫です。
どんな支払い方法が利用できるのかを視覚的に分かりやすくすることで、ユーザーの不安を軽減し、購入率（CVR）の向上が期待できます。

今回は、たった2ステップでDawnの商品ページに決済アイコンを追加する方法を解説します。
ぜひ最後までご覧ください！

実装方法

1. 「main-product.liquid」で決済方法アイコンのブロックを作成＆表示

「main-product.liquid」の{% schema %}{% endschema %}内に下記を追加し、テーマエディタで決済方法アイコンのブロックを追加できるようにします。
今回は「"blocks": [ ]」内の最後に追記しました。（画像はクリックで拡大します）

{
  "type": "payment_enable",
  "name": "決済方法アイコン"
}

次に、同Liquidファイルにある各ブロックを表示させている記述の箇所に、下記を追加します。
コードの追加は、{%- case block.type -%}{%- endcase -%}内であれば任意の箇所で大丈夫です。

{% when 'payment_enable' %}
  <ul class="list list-payment" role="list">
    {% assign enabled_payment_types = 'visa,jcb,master,american_express,apple_pay,google_pay,shopify_pay,pay_pay,familymart,lawson,seveneleven,ministop,dailyyamazaki' | 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>

2. スタイルを追加してデザインを調整

同Liquidファイルまたは別CSSファイルに下記スタイルを追加します。

.product__info-container .list-payment {
    justify-content: flex-start;
}

以上の手順によって、テーマエディタ上で決済方法アイコンを追加できるようになりました。

まとめ

いかがでしたか？
少ない手順で実装できるカスタマイズですが、このような小さな改善でも、エンドユーザーに安心感を与え、購入への心理的ハードルを下げる効果があります。
特に初めてサイトを利用するユーザーにとって、支払い手段が一目で分かることは、信頼感の向上にも繋がります。

Shopifyではテーマのカスタマイズによって、こうした視覚的な工夫も簡単に取り入れることが可能です。
今回ご紹介した方法を参考に、「売れる・選ばれるECサイト」づくりを意識していきましょう！
カスタマイズに関するご不明点や運用のお悩みなどがありましたらお気軽にお問い合わせください！