コレクションページネーター要素を使用してコレクションのページネーションを追加する

コレクションのページネーションについて

コレクションのページ分割は、コレクション内の製品を複数のページに分割するために使用される方法です。これにより、ページが整理され、読み込み時間が短縮され、全体的なユーザー エクスペリエンスが向上します。

Shopifyでは、コレクションページは特定のカテゴリーやテーマごとに商品をグループ化して表示するために使われます。 コレクションページネーター GemPages のコレクション ページにこれを追加すると、顧客がコレクション全体をページごとに簡単に閲覧できるようになります。

この要素の詳細については、こちらをご覧ください: コレクションページネーター.

コレクションページネーター要素を使用してコレクションのページネーションを追加する

始める前に、Shopify 管理画面でコレクションがアクティブになっていることを確認してください。

ステップ1: GemPagesエディターにアクセスする

• 下 アプリ セクションで、GemPages Builder に移動します。
• に行く ページ > 収集ここでは、GemPages で構築されたすべてのコレクション ページが表示されます。

• 対象ページをクリックしてエディターを開きます。
• 新しいコレクションページを作成したい場合は、 新しいページを作成する.

詳細については 新しいページのデザイン、 参照する この記事.

ステップ2: 製品リスト要素を追加する

左側のサイドバーで、製品リスト要素をコレクションページ内の目的の位置にドラッグ アンド ドロップします。

要素をクリックすると設定パネルが開きます。ここで商品リストの設定を行うことができます。

• Shopifyのコレクションに接続します。 製品ソース のセクションから無料でダウンロードできます。

• ページごとに表示する製品の数を設定します (例: 8、12、16、または 20)。

• 製品リストのレイアウトとスタイルをカスタマイズします。

チェックアウト この記事 約 製品リスト要素 をご覧ください。

ステップ3: コレクションページネーターを挿入する

GemPagesエディタで、 コレクションページネーター 要素です。次に、この要素を商品リストの下にドラッグアンドドロップします。

ページネーターを設定するには 設定 タブ：

• サイトのテーマに合ったスタイル (矢印、数値ページ区切りなど) を選択します。
• 必要に応じて、間隔、配置、その他のデザイン設定を調整します。

カスタマイズの詳細については、 コレクションページネーター要素 こちら.

ステップ4: ページを保存して公開する

• 上部バーの右隅にある Save 変更を保存して バージョン履歴.
• その後、 パブリッシュ ボタンをクリックして、コレクション ページをストアに公開します。
• あなたがクリックすることができます 目 公開前にページをプレビューするには、アイコンをクリックします。