この記事では、 Shopify商品リストを作成する GemPages の製品リスト要素を使用します。
製品リスト要素とは何ですか?
その 製品リスト要素 GemPagesを使用すると、Shopifyストアの商品を動的に表示できます。コレクション内の商品数に合わせて自動的に調整され、ストア全体のデザインの一貫性が維持されます。
一般的な使用例:
Shopify商品リストを作成する方法
始める前に、 Shopifyコレクション 準備完了です。すでにお持ちの場合は、手順 1 をスキップしてください。
ステップ1: Shopifyでコレクションを作成する（オプション）
目的のコレクションがすでにある場合は、この手順をスキップしてください。
1. Shopifyにログインします。 Shopify 管理ダッシュボードに移動します。
2。 下 製品 タブ、選択 コレクション。 クリック 「コレクションを作成」 ボタンをクリックします。
3。 設定 コレクションタイプ 設定：
- マニュアル： 製品をコレクションに手動で追加します。
- スマート： 条件を設定すると、一致する製品が自動的に追加されます。
4. その他の必要な情報を入力します。クリック 「保存」 コレクションを作成します。
ステップ2: GemPagesに商品リスト要素を追加する
1. GemPages エディターを開きます。 動画内で 製品リスト要素 に選出しました。 要素ライブラリ。
2.を見つけます 製品リスト要素 要素ライブラリ内。
3. 製品リストを表示するセクションにドラッグ アンド ドロップします。
4。 の中に 製品リスト設定パネル製品の調達方法を選択してください:
- 製品： 個々の製品を手動で選択します。
- コレクション： 特定の Shopify コレクションのすべての製品を表示します。
- 関連する 同じベンダー、タグ、またはコレクションの製品を表示します。
例:: ステップ1で作成したコレクションを表示するには、 コレクションご希望のコレクションを選択し、クリックします 確認します.
ステップ3：製品要素のスタイルを設定する
1。 カスタマイズ 商品タイトル, チケット料金表, カートに追加ボタン あなたのストアのブランドに合わせて。
2. 次のような追加要素を使用して製品リストを強化します。
注意： 製品リスト内の 1 つの製品に対して行われた変更 (フォント スタイルやボタンの色など) は、リスト内のすべての製品に自動的に適用され、リストが静的か動的かに関係なく一貫した外観が確保されます。
ステップ 4: モバイル向けに最適化する
デスクトップのデザインが完了したら、 モバイルビュー GemPagesエディタで:
- Adjust 間隔、フォントサイズ、ボタンの寸法 小さい画面用。
- 例: 読みやすさと使いやすさを最適化するために、デスクトップでは 4 行あたり 2 つの製品を表示し、モバイルでは XNUMX 行あたり XNUMX つの製品を表示します。
