この記事では、コレクションツールバー要素を追加して設定し、顧客が コレクション内の製品を並べ替える.
コレクションツールバー要素について
コレクションツールバーは、顧客に次のようなオプションを提供する要素です。 製品を分類する Shopifyコレクション内。
適用できるのは コレクションページの種類 GemPages で。続行する前に、Shopify コレクションが設定されていることを確認してください。
コレクション ツールバー要素を使用してコレクション ツールバーを追加する
ステップ1: Shopify管理画面でコレクションの並び順を更新する
コレクション ツールバー要素は Shopify 管理画面から直接データを取得するため、最初に Shopify で並べ替えオプションを設定する必要があります。
更新したい場合は、以下の手順に従ってください。
- Shopify管理画面から、 製品 > コレクション並べ替え順序を変更するには、希望するコレクションを選択します。
- 下 製品 セクションでは、ドロップダウン メニューから並べ替えの種類を選択できます。
- 自分でアレンジしたい場合は、 手動でをクリックし、(⋮⋮) アイコンを押したまま、製品リスト内の目的の場所に移動します。
調整後すぐに並べ替え順序の変更を自動的に記録できます。
ステップ2: GemPagesで新しいコレクションページを開くか作成する
- Shopify 管理画面で GemPages ダッシュボードを開きます。
- 編集したいコレクションページを探します。存在しない場合は、 「新しいページを作成する「 ボタンを選択 「コレクションページ「 テンプレートとして。
- クリック コレクションページ そして、ゼロから始めます」をクリックするか、編集するテンプレートを選択します。
GemPagesエディタでコレクションページのデザインを開始できます。GemPagesでコレクションページを作成する方法の詳細については、以下をご覧ください。 この記事.
ステップ3: 製品リスト要素を追加する
- ドラッグアンドドロップ 商品リスト コレクション ページに要素を追加します。
- 次に、製品リストの設定を構成します。C先ほど作成したShopifyコレクションに接続して製品リストのレイアウトとスタイルをカスタマイズします。
についての記事をご覧ください 製品リスト要素 をご覧ください。
ステップ4: コレクションツールバーを挿入する
- エディタに移動したら、「cコレクションツールバー"
- ドラッグアンドドロップ コレクションツールバー 希望するレイアウトに応じて、製品リスト要素の上または横に配置します。
- 次に、好みに応じてツールバーの設定を構成します。
参照する この記事 GemPages のコレクション ツールバー要素の詳細とカスタマイズ方法をご覧ください。
- ヒット Save エディターの右上にあるボタンをクリックして変更を保存します。また、公開前にページをプレビューして、最適な結果を確認することもできます。
よくあるご質問
1. コレクション ツールバーがページに表示されないのはなぜですか?
- 必ず追加してください コレクションツールバー要素 へ コレクションページ タイプ。
- ページの製品リスト要素が Shopify コレクションに接続されていることを確認します。
- Shopify ストアにそのコレクションに割り当てられた製品があることを確認します。
- エディターで保存した後、変更を確認するにはライブ ページを更新します。
2. コレクション以外のページでもコレクション ツールバーを使用できますか?
いいえ。この機能は コレクションページ GemPages では Shopify コレクションから直接データを取得するため、次のようなタイプを作成できます。
3. ツールバーで使用できる並べ替えオプションを変更するにはどうすればよいですか?
に行く Shopify管理 > 商品 > コレクション希望のコレクションを開き、 並び替え 製品セクションの設定。ツールバーはこれらの設定に自動的に従います。
4. 新しい製品を追加すると、コレクション ツールバーは自動的に更新されますか?
はい。商品リストをShopifyコレクションにリンクすると、Shopifyに追加された新しい商品がリストに表示され、ツールバーのソート機能にも反映されます。
5. コレクション ツールバーの外観をカスタマイズできますか?
はい。エディターでコレクションツールバー要素を選択し、ストアのブランドに合わせて書体、色、間隔、配置を調整してください。
