商品カートに追加

商品のカートに追加要素について

概要: Shopify Add To Cart要素は、ページまたは商品ページに掲載されているすべての商品に必須の要素です。これにより、訪問者はワンクリックで商品を素早く簡単にショッピングカートに追加できる「カートに追加」ボタンが表示されます。

こちらのビデオチュートリアルもご覧いただけます：

商品のカートに追加要素へのアクセス方法

• ステップ1: 「Elements」アイコンをクリックします。次に、「Shopify」タブで「Product add to cart」を選択します。

• ステップ2: 要素をドラッグ＆ドロップしてページエディターに配置します。

検索機能を使用して、この要素を素早く見つけることもできます。

商品のカートに追加要素の設定方法

商品のカートに追加要素は、可能な限り最高のコンバージョン率のために外観を最適化するためのさまざまなパラメーターを提供します。

ページキャンバスで要素をクリックすると、この要素に固有のGeneralタブとStylingタブのパラメーターにアクセスできます。

一般設定

属性、表示設定、アニメーションに関する詳細情報は、こちらをご覧ください。

スタイル設定

Stylingタブでは、カートに追加ボタンのグローバルスタイルを設定し、適用することができます。これにより、サイト上の複数の要素に適用できる一貫したスタイルを定義できます。

グローバルスタイルの設定方法と使用方法については、こちらで詳しく説明しています。

また、ボタンがノーマル状態、マウスオーバー状態、アクティブ/選択状態、無効状態の異なる状態でどのように表示されるかをカスタマイズすることもできます。

PageFly要素のスタイル設定に関する詳細は、こちらで確認できます。

チェックアウトページにリダイレクトする「今すぐ購入」ボタンの作成方法については、こちらをご覧ください。

一般的なケース

1. カートに追加ボタンの色の変更

カートに追加ボタンの色を変更するには、Button > Styling tabをクリックします。ボタンの色を設定するための2つのパラメーターがあります。

• コンテンツの色: ボタンテキストの色を選択します。

• 背景色: ボタンの背景色を選択します。

2. カートに追加ボタンへのホバー状態の追加

カートに追加ボタンにホバー状態を追加すると、ライブビューでよりアクティブになり、アクションへの誘導効果が高まります。これを行うには、ボタンをクリックし、Stylingタブに移動して「Mouse over state」に切り替え、コンテンツの色と背景色の変更を開始します。

3. スティッキーな商品のカートに追加ボタンの作成

商品のスティッキーな「カートに追加」ボタンを作成するには、「カートに追加」ボタン要素を含むセクションを作成し、そのセクションの「Sticky Top」機能を有効にする必要があります。以下のビデオで詳細を確認できます。

ヒントとベストプラクティス

• ノーマル状態とホバー状態では、コンテンツと背景に対照的な色を使用して、ボタンを際立たせます。

• 視認性とユーザーの注意を引くために、カートに追加ボタンを1行に収めます。

よくある質問

1. 商品のカートに追加とは何ですか？

カートに追加機能により、買い物客は購入したい商品をカートに保存し、買い物を続け、すべての希望アイテムを選択した後でチェックアウトプロセスを完了することができます。

2. カートに追加と注文の違いは何ですか？

カートは、買い物客が購入する予定の商品を一時的に保管、変更、または削除できる場所です。注文は、買い物客が選択を最終決定し、配送、配達、および支払い情報を提供した後の次のステップです。

3. マーケティングにおけるカートに追加率とは何ですか？

カートに追加率とは、セッションごとに少なくとも1つのアイテムをカートに追加した買い物客の割合です。