固定カート追加要素

スティッキーカート追加要素について

A 固定の「カートに追加」ボタン ウェブページ上には表示されたままのボタンがあり、 「スティック」 スクロールすると画面に表示されます。これは、eコマースウェブサイトにおいて、カートへのアクセスを容易にし、チェックアウトプロセスを効率化することでショッピング体験を向上させる貴重なUI要素です。 

オンライン ショッピングの際の摩擦を軽減することで、ユーザー エンゲージメントの向上、コンバージョン率の向上、全体的なユーザー満足度の向上に貢献します。

ページに「カートに追加」の固定要素を追加するにはどうすればいいですか?

GemPages Editor v7 に Sticky Add-to-Cart を組み込むには、次の手順に従ってください。

ステップ1： アクセス GemPagesダッシュボード > ページ > 収集をクリックし、対象のコレクション ページをクリックしてエディターを見つけます。

ステップ2： 左側のサイドバーから、 「スティッキーカートに追加　 それをページにドラッグ アンド ドロップします。

重要： スティッキーなカートに追加要素は、 最初の or last ページの一部。

この制限は意図的なものであり、スティッキーバーがさまざまなデバイスやスクロール動作で正しく動作することを保証するために設けられています。この要素はユーザーがスクロールしている間も画面上に固定されるように設計されているため、ページの中央に配置すると、レイアウトの競合、重なり、または他のセクションとの表示動作の不整合が発生する可能性があります。

安定したシームレスなショッピング体験を維持するため、GemPagesでは、ページ構造の最上部または最下部にのみ、固定表示される「カートに追加」ボタンの配置をサポートしています。

デフォルトでは、Sticky Add-to-Cart 要素には必須コンポーネントがプリロードされています。

• 製品モジュール （商品画像、商品タイトル、商品価格）
• 製品バリエーションとサンプル
• 製品数量
• 商品をカートに追加

この既成の設定により、スティッキーバーはすぐに機能します。 「保存」 and 「公開」 ページに追加され、ライブ ページにスティッキーなカート追加機能が表示されます。 

ただし、ページ全体のデザインとシームレスに統合するために、Sticky Add-to-Cart 自体とその子要素の両方を柔軟にカスタマイズできます。

設定タブを構成する

を選択すると 固定カート追加要素、左側のサイドバーに、次のようなすべての設定オプションが表示されます。

レイアウト

ノーザンダイバー社の レイアウト セクションでは、ページ上の固定カート追加ボタンの位置を選択できます。

• 下の位置
• ページの上部（カートボタン付きの固定カスタム ヘッダーのように機能します）

一部の販売者は、顧客がスクロールしても表示されるように、ヘッダー内に「カートに追加」ボタンを配置したいと考えています。「カートに追加」ボタンは商品モジュール（テーマヘッダーではサポートされていません）を必要とするため、最善の代替手段は 固定カート追加要素.

レイアウト位置を Topヘッダー カート ボタンと同じように動作し、ページ デザインを崩すことなくいつでもアクセスできます。

サイズ

その サイズ セクションでは、スティッキー「カートに追加」ボタンの全体的なサイズを制御し、ページ レイアウトにシームレスに適合させることができます。

幅： 要素の幅をカスタマイズします。ボックスに特定の値（ピクセル単位）を入力するか、利用可能なオプションから選択できます。

• コンテンツの調整（自動）: ボタンは、そのコンテンツ (テキスト + アイコン) のサイズに合わせて自動的に調整されます。
• フル（100％）： ボタンはコンテナーの幅いっぱいに拡大され、ページ上でより目立つようになります。

パディング： パディングは、ボタンのコンテンツ (テキスト、アイコン、価格) とその境界線の間の内部間隔を定義します。

経歴

を設定 固体 or グラデーションカラーの背景 固定の「カートに追加」ボタン用。色は以下の方法で調整できます。

• カラーコードを入力してください
• 色見本をドラッグまたは選択
• カラーピッカーを使用して、現在のページの任意の色を選択します
• 以下から1つ選択してください 最近の色  or あなたにおすすめ lists

もしあなたが 画像の背景新しい画像をアップロードするか、ギャラリーから選択して要素の背景として設定します。

形状

• ボーダー: 境界線の色、太さ、線を変更できます。
• コーナー: セクションの角は、四角形、丸形、または丸い形にすることができます。また、正確な半径を入力して、要素の角を好みに合わせてカスタマイズすることもできます。
• Shadow: 影を追加し、その表示（サイズ、色、ぼかし、距離）を調整します。

表示オプション

固定の「カートに追加」ボタンがページに表示される条件を設定します。以下の2つのオプションから選択できます。

• 常に表示: 顧客がページをスクロールしている間、固定の「カートに追加」ボタンは常に表示されます。これにより、カートへの素早いアクセスが可能になり、ショッピングプロセスにおける煩わしさを軽減できます。
• 最初のカートボタンの後: この要素は、最初の標準の「カートに追加」ボタンが表示された後のみ表示されます。このオプションにより、ページ上部の冗長性が回避され、固定ボタンがより文脈に沿ったものになります。

詳細タブを設定する

より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.

スティッキーカート追加要素に関するよくある質問

1. Sticky Add-to-Cart はモバイルでもレスポンシブですか?

はい。デフォルトの「カートに追加」ボタンは完全にレスポンシブです。モバイルでは、スペースを節約し、すっきりとしたレイアウトを保つため、簡略化された形式（通常はボタンのみ）で表示されます。

2. スティッキーカート追加がライブページに表示されないのはなぜですか?

よくある原因としては、 表示オプション に設定されています 「最初のカートボタンの後」 あなたのページ カートに追加ボタンがありません スクロールせずに見える範囲の上に表示します。その場合、スティッキーバーは表示されません。

直し方：

• 以下のスクリーンショットに示すように、ジョブタイプを 表示オプション "へ常に表示" or
• 追加する カートに追加ボタン 「最初のカートボタンの後」の表示オプションを希望する場合は、ページに追加してください。

3. スティッキーカートに追加に画像背景を使用できますか?

はい。背景セクションでは、単色/グラデーションカラーを設定するか、ボタンの背景として使用する画像をアップロードできます。

4. スティッキーカートに追加の形状を変更するにはどうすればよいですか?

形状 設定では、 国境, コーナー半径 （四角形、丸形、または錠剤型）、および 影.

5. モバイル端末で「カートに追加」ボタンが表示されません。どうすればいいですか？

これはいくつかの理由で発生する可能性があります。

• 可視性の設定: [詳細設定] タブで要素の設定を確認し、モバイルで非表示になっていないことを確認します。
• 表示オプション：に設定した場合 最初のカートボタンの後、 ただし、モバイルレイアウトに標準の「カートに追加」ボタンが上部に含まれていない場合、スティッキーバーは表示されません。 常に表示.
• モバイルでのレイアウトの違い: スマートフォンでは、「カートに追加」ボタンが簡略化されたバージョン（ボタンのみ）で表示されることがあります。下にスクロールして、最小化されていないことを確認してください。

6. Sticky Add-to-Cart はテーマ ヘッダーのカート ボタンを置き換えることができますか?

はい、実際には可能です。テーマヘッダーにカートボタンがない場合は、ページ上部の「カートに追加」ボタンを固定で有効にしてください。これにより、顧客がスクロールしても常に表示される、同じ機能が提供されます。

7. スティッキー「カートに追加」要素を通常のスティッキーボタン（「カートに追加」ではない）として使用できますか?

スティッキー「カートに追加」要素は、商品の「カートに追加」アクション専用に設計されています。商品コンテキストを必要とし、一般的なCTAボタンとして使用することを想定していません。

ただし、別のページ（コレクション、ランディングページなど）にリンクする固定CTAボタンが必要な場合は、固定カートに追加要素内に含まれるすべての要素を削除し、標準の ボタン要素 を代わりにお使いください。

チェック このビデオガイド 詳しい説明は