Skip to main content

​
はじめに

チェックアウトボタンにロックアイコンを追加することは、支払い情報が安全であることを示して顧客の信頼を高める、シンプルながら効果的な方法です。この馴染みのあるシンボルは、データ保護について顧客を安心させ、チェックアウトプロセスをより快適にします。このチュートリアルでは、CSS を使ってチェックアウトボタンにロックアイコンを追加する方法を説明します。これにより、安心感が高まり、全体的なユーザー体験が向上します。 これらの手順は、CSS の基本を理解しているストアオーナーや開発者に最適です。この小さくても効果的な視覚的要素を追加することで、Upcart のチェックアウトボタンをサイトのデザインに合わせ、信頼を築いて顧客の購入完了を後押しできます。 さっそく始めましょう!

​
はじめに: ロックアイコンを選ぶ

まず、ストアに追加するロックアイコンを選びます。以下にご利用いただけるアイコンをいくつか用意していますが、独自のアイコンを使うこともできます。独自のアイコンを使うには、設定 > ファイル から Shopify ストアのファイルセクションにアップロードし、その URL をコピーします。 Upcart には、チェックアウトボタン用のアイコンフィールドはありません。代わりに、HTML をレンダリングする Checkout button text フィールドに HTML の画像タグを貼り付けます — 以下のスニペットのいずれかを使い、src を自分の URL に置き換えてください。

​
選択できるロックアイコンはこちらです:

追加する HTML: ダークなボタン上の Checkout テキストの横にある白い塗りつぶしの南京錠アイコン
追加する HTML: ダークなボタン上の Checkout テキストの横にある白いアウトラインの南京錠アイコン
追加する HTML: ダークなボタン上の Checkout の横にある鍵穴付きの白いアウトラインの南京錠
追加する HTML: ライトブルーのボタン上の Checkout テキストの横にある黒い塗りつぶしの南京錠アイコン
追加する HTML: ライトブルーのボタン上の Checkout の横にある鍵穴付きの黒い南京錠

​
ロックアイコンを配置する:

ロックアイコンを選んだら、Manage All Carts > Edit > Settings > Edit copy に移動し、Checkout button text フィールドを見つけます。「Checkout」という単語の前または後に貼り付けることができます。また、ここで「Checkout」という単語を「Secure Checkout」などの別の表現に変更することもできます。 ロックアイコンを配置するために Upcart でチェックアウトボタンのコピーを編集している様子

​
カスタム CSS 設定にアクセスする

Upcart の CSS のカスタマイズを始めるには、次の手順に従います:
  1. ダッシュボード内で Upcart アプリを開きます。
  2. Cart Editor に移動します。
  3. Settings を開き、Custom CSS タブを選択します。Settings は 1 つの長いページではなくタブの並びです — Custom CSS が見つからない場合は、More settings の中にあります。

​
ロックアイコンを表示するためにカスタム CSS を適用する:

Custom CSS セクションに入ったら、以下のコードをコピーして貼り付け、ロックアイコンを表示・配置します。パディングの数値が大きいほど、アイコンは小さくなる点にご注意ください。
  1. CSS の入力エリアを見つけます。
  2. 次のコードをコピーして CSS 入力エリアに貼り付けます:
  3. アイコンのサイズを変更するには、.upcart-custom-lock-icon の下の height を調整します。より大きなロックアイコンには 16px または 20px をおすすめします

​
まとめ

これらの手順に従うことで、チェックアウトボタンへのロックアイコンの追加が完了し、顧客は購入時により安心感と信頼感を持てるようになります。この小さな変更は、ストアの印象に大きな違いをもたらし、信頼の構築と全体的なショッピング体験の向上に役立ちます。

​
まだヘルプが必要ですか?

カスタマイズに関するサポートが必要な場合は、cart drawer への HTML、CSS、さらには JavaScript の追加について、Shopify Expert に相談することをおすすめします。 Shopify Experts を見る