商品のカートに追加ボタン要素

商品カートボタンについて

「カートに追加」ボタンは、顧客がクリックするだけで商品をショッピングカートに追加できるため、どのストアにとっても非常に重要です。GemPagesでは、このボタンは「商品カートボタン」と呼ばれ、商品をカートに追加するだけでなく、幅広い機能を提供します。

ページに「商品カート」ボタンを追加するには、以下の手順に従ってください。 

ステップ1： GemPagesダッシュボード、作業するページを選択してエディターに入ります。

ステップ2： 商品カートボタンは 製品要素正しく機能させるには、商品モジュール内にネストする必要があります。商品モジュールがない場合は、ページにドラッグ＆ドロップしてください。

ステップ3： 製品モジュール内の「製品カート ボタン」要素を、任意の場所にドラッグ アンド ドロップします。

追加したら、要素をクリックして設定にアクセスします。 左側のサイドバー設定は 2 つのメイン タブに分かれています。 設定 の三脚と 高機能.

設定タブを構成する

レイアウト

ページのデザインに合わせてボタンのレイアウト設定を選択します。

製品ソース

ボタンをリンクする商品を指定します。これにより、正しい商品データと同期し、ボタンが正しく機能するようになります。

サイズ

• 幅（Width）: ボタンの幅を設定します。
• 高さ: ボタンの高さを調整します。
• パディング: ボタン内のパディングを定義します。

経歴

カラーピッカーを使ってボタンの背景色をカスタマイズしましょう。これにより、ボタンをブランドスタイルに合わせることができます。

形状

• ボーダー: ボタンに視覚的なアウトラインを与えるために、線や実線などの境界線のスタイルを選択します。
• コーナー: 角の丸みの度合いを選択します (シャープ、丸み、丸角)。
• Shadow: ドロップ シャドウを適用してカスタマイズし、ボタンに浮き上がったような、または重なったような外観を与えます。

アイコン

• アイコンを選択: ボタンに表示するアイコンを選択するか、新しい SVG ファイルをアップロードすることができます。
• アイコンの位置: アイコンをテキストの左側または右側に配置します。
• 間隔: アイコンとテキストの間隔を調整します。

テキスト

• コンテンツ: カートボタンに表示されるテキストは自由にカスタマイズできます。デフォルトのテキストは「カートに追加」ですが、デザインや目的に合わせて任意のテキストに変更できます。
• スタイル: 利用可能な事前定義されたスタイルからカート ボタンのラベルのスタイルを選択します。
• フォント: ドロップダウンメニューからテキストラベルのフォントを選択します。他のフォントを使用する場合は、 カスタムフォント こちらをクリックしてください。
• サイズ: 好みのフォントサイズを決定します。

以下を行うには、 「もっと見る」ボタン より多くのカスタマイズ オプションを表示します。 

• フォントの太さ: ドロップダウン メニューから希望のフォント ウェイトを選択します。
• 行の高さ: パーセンテージ値を指定してテキストの高さを調整します。
• 文字間隔: ピクセル単位で値を入力して文字間の間隔を変更します。
• エージェント型AIで研究開発を変革する: 必要に応じてテキストを大文字、小文字、または大文字に変換します。

セパレータ

このトグルを有効にすると、ボタン内のテキストと価格の間に視覚的な区切り線が追加されます。線、点、棒のスタイルから選択できます。

価格

このオプションを有効にすると、ボタンに商品の価格が表示されます。

• レイアウト: 価格表示の希望レイアウトを選択します。
• 商品価格: 現在の価格の表示方法をカスタマイズします。
• 比較価格: オプションで、プロモーションの元の価格（取り消し線付き）を表示します。

ホバー効果

ボタンのホバー動作をカスタマイズします。

• 経歴: ホバー時の新しい背景色を設定します。
• テキストの色: インタラクティブ性を高めるために、ホバー時のテキストの色を変更します。

在庫切れ状態

このオプションでは、商品の在庫が0になったときにカートボタンの表示をカスタマイズできます。 カスタムスタイル スイッチをオンにすると、ボタンの追加のスタイル オプションが表示され、ボタンの外観をさらにカスタマイズできるようになります。

Redirect to

このオプションは何が起こるかを定義します 顧客がクリックした後 「カートに追加」ボタンをクリックします。以下の操作から選択できます。

• 買い物を続ける: リダイレクトなし。商品をカートに追加した後も、顧客は現在のページに留まります。
• チェックアウトに行きます: 顧客をShopifyのデフォルトのチェックアウトページに誘導します カート内に存在するアイテム（ある場合）
• カートを開く: テーマの設定に応じて、カート ドロワーまたはカート ページを開きます。
• URLを開く: ユーザーを特定のURLにリダイレクトします。新しい入力フィールドが表示され、そこにリンク先を貼り付けることができます。

この設定を戦略的に活用することで、顧客をコンバージョンファネルに誘導できます。例えば、クロスセルの機会を狙ってカートへ誘導したり、衝動買いを狙って直接チェックアウトへ誘導したりすることができます。

整列

セクション内のボタンの配置を左、中央、右から選択します。

注意： 幅が 100% 以上に設定されている場合、水平方向の配置は無効になります。

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.

サブスクリプションで使用（サブスクリプションをカートに追加）

始める前に

• インストールと設定 サブスクリプションアプリ （例えば、 アプリ, 再充電, サブファイ, シールなど）を設定し、 購入オプション（販売プラン） Shopify 管理画面で商品を選択します。
• アプリの サブスクリプションウィジェット (ワンタイムとサブスクリプションの切り替え、配信間隔など) がその製品に対して有効になっている必要があります。

GemPagesで設定

ステップ1： 置き 製品 要素、バリアントセレクタ、 サブスクリプションウィジェット 商品カートボタン 同じ製品モジュール内 (順序: セレクター → ウィジェット → カートに追加)。

ステップ2： In 商品カートボタン > 設定 > 製品ソース、それが指していることを確認してください 同じ製品 ウィジェットとして。

ステップ3： In Redirect to、 好む カートを開く or 買い物を続ける チェックアウト前に販売計画が適切に添付されます。

ステップ4： 保存してpページを公開します。公開ページで、 購読 ウィジェットでクリック 商品をカートに追加 カートの明細項目が 購読.

重要な注意事項

• ウィジェットの選択は動作を制御します: 登録する が選択されている場合、カートの行にはselling_plan_idが含まれます。 一度そうではありません。
• サブスクリプション ウィジェットと製品カート ボタンを同じ製品モジュール (ボタンの上にあるウィジェット) 内に配置します。
• ボタンにはバリエーションの価格が表示され、サブスクリプションの割引/ラベルはウィジェットまたはカートドロワー/チェックアウトに表示されます。
• 好む "カートを開く」または「買い物を続ける　 Redirect to チェックアウト前に販売プランを添付するセクションです。
• 選択したバリアントは、製品の販売計画に属している必要があります。
• カートアクションには、汎用ボタン要素ではなく、商品カートボタンを使用します。

GemPagesのカートへの追加に関する問題のトラブルシューティング

GemPages の「カートに追加」ボタンが期待どおりに機能しない場合は、次のような一般的な問題とその解決策があります。

1. ボタンが商品モジュール内にネストされていることを確認する

その 商品カートボタン 内に配置する必要があります 製品モジュール 正しく機能するために必要です。このモジュールの外側にある場合は動作しません。

解決策：

• GemPagesエディタで、 製品モジュール あなたのページに。
• 次に、 商品カートボタン このモジュール内。

この設定により、ボタンが製品のデータに正しくリンクされるようになります。

 2. ボタンのアクションを正しく設定する

ボタンのアクションが「カートに追加」に設定されていることを確認してください。「ページへのリンク」などの別のアクションに設定されている場合、商品はカートに追加されません。

解決策：

• まず 商品をカートに追加 GemPages エディターのボタン。
• 右側の設定パネルで、アクションが設定されていることを確認します。 "カートに追加。"​,war

この構成により、ボタンが目的のアクションを実行することが保証されます。

 3. カートアクションに汎用的な「ボタン」要素を使用しない

GemPagesは一般的な ボタン 要素ですが、カート機能用に設計されていません。カートに商品を追加するために使用すると、問題が発生する可能性があります。

解決策： 商品カートボタン 汎用の Button 要素の代わりに使用します。

これらの特殊なボタンはカートのアクションに合わせて調整されており、適切な機能を保証します。

4. 製品の可視性と在庫状況を確認する

製品がオンラインストアの販売チャネルでアクティブでないか入手できない場合、「カートに追加」ボタンは機能しません。

解決策：

• Shopify管理画面で、 製品 該当する製品を選択してください。
• 製品の状態を確認する 有効.
• 販売チャネルとアプリ、 確認して オンラインストア が選択されます。

これにより、製品がストアで購入可能になります。

商品のカート追加要素に関するよくある質問

1. 保存したテーマのセクションに「カートに追加」ボタンを追加できないのはなぜですか?

GemPagesの保存されたテーマセクションは編集できず、「カートに追加」ボタンを含む新しい要素を追加することはできません。「カートに追加」ボタンを使用するには、 新しいセクション必要な要素をすべて挿入し（商品→カートに追加）、 セクション全体を保存する 新しい再利用可能なテーマ セクションとして。

テーマセクションの詳細については、以下をご覧ください。 GemPages テーマセクションと FAQ.

2. 「カートに追加」ボタンに価格が表示されないのはなぜですか?

ことを確認してください 価格 設定タブで価格表示の切り替えが有効になっていることを確認してください。商品に価格が設定されていない場合、または商品を入手できない場合は、価格が表示されないことがあります。

3. 「カートに追加」ボタンがホバー時に異なって見えるのはなぜですか?

チェック ホバー効果 設定。ホバー状態に応じて異なる背景色やテキスト色が設定されている場合があります。

4. 配置オプションが無効になっているのはなぜですか?

ボタンの幅が設定されているときは配置は無効になります 100% 要素がすでに利用可能な幅全体を占めているため、これ以上にはなりません。

5. ポップアップ内に「カートに追加」ボタンを配置できますか?

• 使用 レギュラー ボタン要素 ポップアップを開きます。
• 実際の「カートに追加」ボタンはメインの製品ページに残しておきます。

6. 「カートに追加」ボタンでスライド カートを開くにはどうすればよいですか?

カスタムコードは必要ありません。 商品カートボタン → リダイレクト → カートを開くテーマのカートドロワーまたはスライドカートを次のように設定します。 このガイド.