# 商品をカートに追加 ### 商品のカートに追加要素について 概要: [Shopify Add To Cart](https://help.pagefly.io/manual/shopify-elements-product-add-to-cart/)要素は、ページまたは商品ページに掲載されているすべての商品に必須の要素です。これにより、訪問者はワンクリックで商品を素早く簡単にショッピングカートに追加できる「**カートに追加**」ボタンが表示されます。 こちらのビデオチュートリアルもご覧いただけます： {% embed url="" %} ### 商品のカートに追加要素へのアクセス方法 * **ステップ1**: 「**Elements**」アイコンをクリックします。次に、「**Shopify**」タブで「Product add to cart」を選択します。 * **ステップ2**: 要素をドラッグ＆ドロップしてページエディターに配置します。 検索機能を使用して、この要素を素早く見つけることもできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c044045c0fdc28d4a559ed7f791f1edef8c6f764%2FAD_4nXe5NnOUVCLvRGbKsBZslV-EDx0Y8VpNK8cpeS76AEFhV57tbZUIb0dH-PLnaUGzqxhPAup7DmWx5aNOLfi0QIkqnAd7NYp8mofYTKuR_waDKroHR5GqMr7kkcB6NRBvlT8LIEU5yXvC2UdxLcCK8wkeyl8SO04IsaCo-BIcO7ipcIg.gif?alt=media) ### 商品のカートに追加要素の設定方法 商品のカートに追加要素は、可能な限り最高のコンバージョン率のために外観を最適化するためのさまざまなパラメーターを提供します。 ページキャンバスで要素をクリックすると、この要素に固有のGeneralタブとStylingタブのパラメーターにアクセスできます。 #### 一般設定 | **商品のソース** 上記で説明したように、AutoとCustom Productの2つのオプションがあります。 - **Auto**: 商品ページにいる場合、このページに割り当てられた商品がエディターに表示されます。 - **Custom Product**: 表示する特定の商品を選択できます。 **注意**: 商品ソースオプションは、通常ページでは利用できません。 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a1f8e323e29025bc571d7cd5708cbb83bd4bf699%2FAD_4nXemGdYXCPZZFLduDJh9rdT7Y8JoE3HICww8kFhoNfIiLKL-_SykI_2q7WvX9rUQ5FjYhLnJ3oZAIASLoJqCmyRPoiE7WuntjL1_ylhSbWm0e1VNEk-7x0OqG10rWksw62N6zuy881XeqF4q96Ghkeyl8SO04IsaCo-BIcO7ipcIg.png?alt=media) | | **カートに追加後のアクション**: ATCボタンをクリックした後の4つのオプションがあります。 - 同じページに留まる - カートページへ移動 - チェックアウトページへ移動 - カスタムリンクへ移動 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0a5d14b1b43f9c4060b6fc84d3d0f6bbff32fbed%2FAD_4nXfP2TQGh0FpBlayZGDJ4fFuiQ7nTCZuT9BeN_BiB6YCyquEuBTVdqjPDZjeqiOB1hJ2bMQ2pL9y9pr8LAXot7XPDSTqgWn4NY4XmKlXTa2O47BbWf66neWZNIHoaiXRetL8kYZ1mRpsQ9kt-r5keyl8SO04IsaCo-BIcO7ipcIg.gif?alt=media) | | **ボタンの種類** ボタンには、テキストのみ、アイコン付きテキスト、アイコンのみの3種類があります。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-686cb5b8d202dc2354a16a456ceaa23e8e1d9e61%2FAD_4nXcu7jcZmpiEz6vOChtrhsGX4bkEkTCA8VCDqgsg2bYF4EnW0UDOUXZuR_01bxEF3WdqKFX2wbFK1-kHVkztOJ87-51K976DyqF0BeAPrK9oulTAtfueppNqRSrM20S_qilbhg8YMDK3v3XoEhaNkeyl8SO04IsaCo-BIcO7ipcIg.gif?alt=media) | | **ボタンテキスト** ボタンに表示するテキストを入力します（例: 「**カートに追加**」）。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1b1d279ae59927e6a1cf78e83b3deb297ee35a76%2FAD_4nXfTBaM78SBeFxJ2lnmXRalUmpeMKnpj6qe3DD_tP0Ka6-RZGBLyf9wz8cKXE1sOgRC1M_sDia2YvH8Dj2FcA4WAyo6uRAEZ3UciSh8IsWSAKWrlk4cumKt3-sX47Rpq78eOoBESwftLnbdkDj2K9Akeyl8SO04IsaCo-BIcO7ipcIg.png?alt=media) | | **追加中テキスト** 商品がカートに追加されている間に表示されるカスタムテキストを入力します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-73ac7dc9419eef19661a9ad85fb1f9670c53ace4%2FAD_4nXfE-Z_Hx2IAoiaVCZXPZ4mNjUqqMkOoOY5CMwX1_ambzwaNLjzqi8h8y5KDQ1-567doBKyvMlE9lW_r408khnGZ9e6CnIVD_px2cN6bwqwfaSTxE5TWDbovlVZZkVcc2i1hmzFY7I_O2kIhDzkh7gkeyl8SO04IsaCo-BIcO7ipcIg.png?alt=media) | | **追加済みテキスト** 商品が正常に追加されたときに表示されるカスタムテキストを入力します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a8410a919b4447dfce47014d7b182b82e5336a2a%2FAD_4nXeQiq64Te7FhxOGWgb69hF_g1-goITui94ISUmfF4nd2fdOEJvr-sJ0jwCVzDjPsb2T5a8UDk9QN42QgueD87lhQVBDbTE9_rJ8fXuw8f1Owzthmg6H7uBIQbzT-MuAmEYxM0fda3rjz-fbfKd3jgkeyl8SO04IsaCo-BIcO7ipcIg.png?alt=media) | | **売り切れテキスト** 商品が売り切れの場合に表示されるカスタムテキストを入力します。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdoSZ1EWA5NPiYeb4LgrrfjTqvqfF5RuMzWNuPeeRD2Ho5z5ySGe9-m2xJFm1m5r_ZV-7H70txuOr_B25_iMzHNAVgk1PIGz6xjCqIwiLl7_0cOHOSH9BFoncfN5iZZ2gxKT7WHTPW4gzlGwWKtUAkeyl8SO04IsaCo-BIcO7ipcIg.png) | | **フル幅を有効にする** 「**カートに追加**」ボタンをコンテナの全幅に広げます。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9a793f850bcc83b56fd985a43ef55b3ff7ee0717%2FAD_4nXd_4aywqFXzHhRT5H9yn96f0anrTeXzoNBZwy32ZQGLhJ0Y2gWSxFmce8t9sZItSS6uA4R2si38XAnKfryoznjxjAiiH4D-ObspUjeP1wZgfTP7eD2godm6_PJzzQt0c2sJ0-YeYtUtjdfgL7iukeyl8SO04IsaCo-BIcO7ipcIg.gif?alt=media) | [属性、表示設定、アニメーション](https://help.pagefly.io/manual/elements-style-settings/)に関する詳細情報は、こちらをご覧ください。 #### スタイル設定 Stylingタブでは、カートに追加ボタンのグローバルスタイルを設定し、適用することができます。これにより、サイト上の複数の要素に適用できる一貫したスタイルを定義できます。 [グローバルスタイルの設定方法と使用方法](https://help.pagefly.io/manual/global-styling-feature/)については、こちらで詳しく説明しています。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a2c833f04fba8c7b3e740cebd3650cf8956c76b1%2FAD_4nXcb8OTIiWHhaBQdeMdG0DRgXeBRmnButBUbHFMk-CpkGljvYE9t0Epa8ueLRMDuvYYMf0NXljuCuF28Uws5lmR5G8yBvIoB0G1wedIwXcqj_FJiblFGfVUTha6Zmc9_DyKnTMd-93F2f-3idsRNkeyl8SO04IsaCo-BIcO7ipcIg.png?alt=media) また、ボタンがノーマル状態、マウスオーバー状態、アクティブ/選択状態、無効状態の異なる状態でどのように表示されるかをカスタマイズすることもできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a30d26bd4cb431cab127444073c3fc8332bff1eb%2FAD_4nXfn0exxloLhA9Fig4dYAPkmQOZgDzUWEgcnM2vs4EXKpMkfRnpeJipmst2VJ0MG_CK44MA4boZNZm17eY710z1yXdH68O_S8UkbQZ0bRW0AjQtV_litwpLwiBX_rNu-pN2u6-sck8XpQoBduJ3mtgkeyl8SO04IsaCo-BIcO7ipcIg.png?alt=media) [PageFly要素のスタイル設定](https://help.pagefly.io/manual/elements-style-settings/)に関する詳細は、こちらで確認できます。 [チェックアウトページにリダイレクトする「今すぐ購入」ボタンの作成方法](https://help.pagefly.io/manual/button-element/%23how-to-create-a-dynamic-checkout-button-buy-it-now)については、こちらをご覧ください。 ### 一般的なケース #### 1. カートに追加ボタンの色の変更 カートに追加ボタンの色を変更するには、**Button > Styling tab**をクリックします。ボタンの色を設定するための2つのパラメーターがあります。 * **コンテンツの色**: ボタンテキストの色を選択します。 * **背景色**: ボタンの背景色を選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-067cc64c1612b5abb2fba038fa0da5b73a8b86d4%2FAD_4nXePwjR-xycf4ijipEQFuiZWSUpZM6pPqZ9Y3EcurxpeHlKiAwRIobNLFINUszB_Qccff_0lwIfNCmVTNQaMtRlpubpr7aXRHX7-O6qPJ4-4JN6APXLDNvwsvHZnuP11t1wTyEPcyVo5oU_KeXwFewkeyl8SO04IsaCo-BIcO7ipcIg.gif?alt=media) #### 2. カートに追加ボタンへのホバー状態の追加 カートに追加ボタンにホバー状態を追加すると、ライブビューでよりアクティブになり、アクションへの誘導効果が高まります。これを行うには、ボタンをクリックし、Stylingタブに移動して「**Mouse over state**」に切り替え、コンテンツの色と背景色の変更を開始します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXchTtAj_1w_JTirKk4KNoAawoLLgHsQcDcfylToVoq92Lj9sD9nhZxWw75ctYT4gKFWIYQulIIQSYLq3cfm724P7xNpkpxzmGfg11z8mQiMd7nJcKUNUTv-6CDt4sJCQCZ5weknrmXUOg6hVRODMAkeyl8SO04IsaCo-BIcO7ipcIg.gif) #### 3. スティッキーな商品のカートに追加ボタンの作成 商品のスティッキーな「**カートに追加**」ボタンを作成するには、「**カートに追加**」ボタン要素を含むセクションを作成し、そのセクションの「**Sticky Top**」機能を有効にする必要があります。以下のビデオで詳細を確認できます。 {% embed url="" %} ### ヒントとベストプラクティス * ノーマル状態とホバー状態では、コンテンツと背景に対照的な色を使用して、ボタンを際立たせます。 * 視認性とユーザーの注意を引くために、カートに追加ボタンを1行に収めます。 ### よくある質問 **1. 商品のカートに追加とは何ですか？** カートに追加機能により、買い物客は購入したい商品をカートに保存し、買い物を続け、すべての希望アイテムを選択した後でチェックアウトプロセスを完了することができます。 **2. カートに追加と注文の違いは何ですか？** カートは、買い物客が購入する予定の商品を一時的に保管、変更、または削除できる場所です。注文は、買い物客が選択を最終決定し、配送、配達、および支払い情報を提供した後の次のステップです。 **3. マーケティングにおけるカートに追加率とは何ですか？** カートに追加率とは、セッションごとに少なくとも1つのアイテムをカートに追加した買い物客の割合です。