製品詳細ページは、次のいずれかの方法で作成できます。
- あらかじめデザインされた製品詳細セクションを使用して、 テンプレートライブラリ.
- 製品要素からゼロから始める
製品要素とは何ですか?
その 製品要素 GemPages を使用すると、Shopify 製品情報をページに動的に表示できます。
使用法： 内部でのみ使用可能 製品モジュールは、すべての製品関連要素のコンテナーとして機能します。
子要素: 以下の内容で製品詳細ページを強化します。
- 主な要素： 画像、タイトル、説明、価格、バリエーション、カートに追加ボタン
- その他の要素: SKU、製品バッジ、コンバージョンブースター（カウントダウンタイマー、在庫カウンターなど）
製品要素を使用して製品詳細ページをデザインする方法
注意： 開始する前に、Shopify で製品が正しく設定されていることを確認してください。
ステップ1： Video Cloud Studioで GemPages エディター Shopifyストアで編集したい商品ページを選択するか、新しいページを最初から作成してください。
ステップ2： 左側のサイドバーで、 製品モジュール あなたのページに。
デフォルトでは、モジュールには次のような主要な要素が含まれています。 画像、タイトル、説明、価格、バリエーション、カートに追加ボタンShopifyから自動的に同期されます。
追加およびカスタマイズする主要な製品要素
1.製品タイトル
要素を追加すると、タイトルがデフォルトで表示されます。タイトルが削除された場合や位置を変更する必要がある場合は、サイドバーからドラッグ アンド ドロップします。
2. 商品画像とサムネイル（画像、動画、動画バナーなど）
商品モジュールを追加すると、デフォルトで画像が表示されます。画像を削除したり、画像を追加したい場合は、 商品画像 サイドバーから新しい位置へ要素を移動します。この要素は 製品画像、ビデオ、ビデオバナー 製品を視覚的に紹介するのに役立ちます。
続きを読む： 商品画像要素ガイド
3. 製品バッジ
「セール 50% オフ」や「限定版」などの商品バッジは、商品の特別な属性を強調するのに役立ちます。
製品要素で、 製品バッジ要素 GemPages エディターに入力します。
続きを読む： 製品バッジ要素ガイド
4. 製品SKU
SKU (Stock Keeping Unit) を表示すると、顧客と店舗管理者の両方が製品を効率的に追跡できるようになります。
検索 製品SKU 製品要素内。それを GemPages エディターにドラッグ アンド ドロップします。
続きを読む： 製品SKU要素ガイド
5。 製品説明
製品の説明はデフォルトで表示されますが、移動できます。
ドラッグ 製品説明 調整が必要な場合は、サイドバーから要素を削除します。
続きを読む： 製品説明要素ガイド
6。 製品価格
価格はデフォルトで表示され、Shopify から直接取得されます。
位置を変更します 商品価格 必要に応じて、要素を目的の場所にドラッグします。
続きを読む： 製品価格要素ガイド
7. 製品の数量
数量セレクターを表示し、顧客が購入する商品の数を選択できるようにします。
位置を変えたり、取り外したりした場合 製品数量 要素が表示されたら、サイドバーから表示したい場所までドラッグします。
続きを読む： 製品数量要素ガイド
8. 製品オプション/バリエーション
色、サイズ、素材などの製品バリエーションは自動的に読み込まれます。
表示を調整したり、製品オプションの位置を変更するには、 製品バリエーション 要素を目的の場所に移動します。色のオプションの見本やドロップダウンを使用して、バリエーション スタイルをカスタマイズし、選択を容易にすることができます。
続きを読む： 製品バリエーションとスウォッチガイド
バリエーションは、色、サイズ、素材（Shopify バリエーションとして定義されている場合）などの属性を扱います。ただし、SKU に影響しない追加情報（お手入れ方法など）については、Shopify 商品メタフィールドを使用し、商品モジュール内のダイナミックテキストまたはカスタムブロックで表示します。
9. カートに追加/今すぐ購入ボタン
このボタンはデフォルトで含まれていますが、ページ上で目立つように色、テキスト、サイズをカスタマイズできます。
ボタンが削除または再配置された場合は、サイドバーからボタンをドラッグします。ボタンの動作をカスタマイズして、チェックアウトにリダイレクトするか、カートドロワーを開くか、同じページにとどまるかを選択します。
続きを読む： カートに追加ボタン要素ガイド
10. コンバージョンブースター
緊急性を生み出したり社会的証明を提供したりする要素を追加すると、コンバージョンが大幅に向上する可能性があります。
- GemPagesでは、 カウントダウンタイマー or 在庫カウンター
- 統合することもできます 信頼バッジ or ユーザーレビュー サードパーティのアプリから。サードパーティのアプリをGemPagesに統合する詳細な手順については、 この記事.
ステップ4： デザインに満足したら、進捗状況を保存し、変更を公開します。
よくあるご質問
1. 情報が異なる複数の製品に XNUMX つの製品ページ テンプレートを使用できますか?
はい。ユニバーサルな商品ページテンプレートを作成するには、 製品要素 製品固有のコンテンツを取得するには Shopify製品メタフィールドこれにより、同じページ デザインを共有する場合でも、各製品が独自の動的コンテンツを表示できるようになります。
2. GemPages 内で商品のタイトルや説明を直接編集できますか?
いいえ。商品名と商品説明の要素はShopify管理画面から自動的にデータを取得します。これらの情報を変更する必要がある場合は、Shopify管理画面で直接編集する必要があります。
3. 製品メタフィールドはすべての GemPages プランでサポートされていますか?
GemPages V7では商品メタフィールドがサポートされています。ただし、この機能を最大限に活用するには、プランにダイナミックテキスト機能が含まれていることをご確認ください。
コメントしてくださってありがとうございます