各コレクションに基づいてコレクションバナーを動的に表示する

コレクションバナーについて

コレクションバナー 上部に表示される画像または視覚要素です。 コレクションページコレクションのテーマや目的を表します。

動的バナーを使用すると、Shopify のコレクション データに基づいて、各コレクションに固有のバナー画像を自動的に表示できます。

GemPages で各コレクションのコレクションバナーを動的に表示するにはどうすればよいですか?

各コレクションに基づいてコレクションバナーを動的に表示するには、次の手順に従います。

ステップ1: Shopifyでコレクションの注目画像を追加または変更する（オプション）

注意： コレクションに画像をすでに追加している場合は、この手順をスキップできます。

• Shopify管理画面にログインします。 製品 > コレクション.
• カスタマイズするコレクションを選択します。

• 下 画像 セクションで、コレクションのおすすめ画像をアップロードまたは変更します。

この画像は、対応するコレクションのバナーとして機能します。

• 完了したら、 Save 変更を適用します。

ステップ2: GemPagesでコレクションページを作成する

コレクション ページの作成に関する詳細なガイドについては、この記事を参照してください。 新しいコレクションページを作成する方法.

• アクセス GemPagesダッシュボード とをクリックしてください 新しいページを作成する のセクションから無料でダウンロードできます。

• 選択する 収集 ユースケースとして。その後、新しいコレクションページを最初から（空白ページから）作成するか、事前に作成されたテンプレートを使用することができます。

ステップ3: コレクションを割り当てる

上部のバーで「割り当てられたコレクション 0 件」をクリックして、コレクションをこのコレクション ページに割り当てます。

このページをすべてのコレクションに適用することも、1 つまたは複数の優先コレクションを選択することもできます。

• すべてのコレクションページ: テンプレートはストア内のすべてのコレクションに適用されます。
• 特定のコレクション: このテンプレートを適用するコレクションを選択します。

例えば、 ジェムスキンコレクション.

ステップ4: 必要なコレクション要素を追加する

左側のサイドバーから、コレクション用にカスタマイズされたいくつかの要素をドラッグアンドドロップできます。 製品リスト要素.

ステップ5: コレクションバナー要素を追加する

• GemPagesエディタで、 コレクションバナー コレクション ページ レイアウトに要素を追加します。

バナーには、顧客が閲覧している現在のコレクションの注目の画像が動的に表示されます。

あなたはカスタマイズすることができます バナーのサイズ, アラインメント, 左側のサイドバーにある設定パネルを使用します。

• その他を追加 動的コレクション要素 コレクションのタイトル、説明など、バナーに追加します。

これにより、各コレクション ページが、Shopify データからの固有の製品、タイトル、機能で正しく更新されます。 

ステップ6: 保存して公開する

• コレクションページのデザインが完了したら、 Save、ダイナミックバナーを表示する準備が整いました。
• また、ご購読はいつでも停止することが可能です プレビュー ページを再公開する前に結果を確認するページ:

これで完全に設定が完了しました ダイナミックコレクションバナー Shopifyからデータを自動的に取得します。各コレクションページには独自のバナーが表示され、パーソナライズされた統一感のあるブラウジング体験を実現します。

よくあるご質問

1. コレクションバナーに正しい画像が表示されないのはなぜですか?

Shopify の各コレクションの注目画像をアップロードし、正しいコレクションを GemPages テンプレートに割り当てていることを確認してください。

問題が解決しない場合は、 ページの再公開 or Shopifyのデータが同期されるまで数分間待ちます.

2. Shopify の注目画像とは異なるバナー画像を使用できますか?

いいえ。コレクションバナー要素はShopifyの注目画像と自動的に同期されます。この画像をGemPagesで手動で変更したり置き換えたりすることはできません。

3. バナーにコレクションのタイトルや説明を表示できますか?

はい、もちろんです。バナーセクション内にコレクションタイトルとコレクション説明要素を追加してください。これにより、各コレクションの動的なデータがShopifyから自動的に取得されます。

4. この設定はモバイルとデスクトップの両方で機能しますか?

はい。コレクションバナー要素はデフォルトでレスポンシブですが、モバイルとデスクトップのビューでサイズ、パディング、配置を個別にカスタマイズできます。 高機能 タブには何も表示されないことに注意してください。

5. 特定のコレクションのバナーレイアウトを変更するにはどうすればよいですか?

コレクションごとに異なるレイアウトが必要な場合は、複数のコレクション ページ テンプレートを作成し、GemPages エディターの「コレクションの割り当て」機能を使用して個別に割り当てます。