製品について もっと見る要素
デザインによっては、CTAの「カートに追加」ボタンを商品または商品リスト要素に配置する代わりに、 「もっと見る」ボタン ユーザーを商品詳細ページに誘導します。
このボタンをクリックすると、ユーザーは製品の詳細情報ページにリンクされ、機能、仕様、レビュー、その他の詳細情報を確認して、十分な情報に基づいた購入決定を下すことができます。
商品の「詳細表示」ボタンを商品詳細ページにリンクする
GemPages v7 で「商品の詳細を表示」ボタンを商品詳細ページにリンクするには、次の手順に従います。
ステップ1: GemPagesエディターにアクセスする
- Shopify管理画面から GemPages ビルダー 下のアプリ アプリ のセクションから無料でダウンロードできます。
- MFAデバイスに移動する ページ GemPages で構築されたすべてのページを見つけることができます。
- 対象ページをクリックしてエディターで開きます。
ステップ2: 商品詳細表示ボタン要素を追加する
- 左側のサイドバーから検索バーを使用して、 製品詳細を見る 素子.
- この要素をデザインにドラッグアンドドロップします。 商品リスト or 製品 要素。
ステップ3: ボタンをカスタマイズする
ボタンを配置したら、デザインと機能の要件に合わせて編集できます。
- アイコン： ボタンにアイコンを追加して、視覚的に魅力的にします。
- テキスト： 「詳細を表示」や「さらに詳しく」など、ニーズに合わせてボタンのテキストを編集します。
- アライメント： ボタンをコンテナー内で配置します (左、中央、または右)。
商品詳細表示ボタンのカスタマイズの詳細については、以下を参照してください。 この記事.
ステップ4: 保存して公開する
完了したら変更を保存して パブリッシュ ページを再公開します。
結果：
製品詳細表示ボタンの使用に関するベストプラクティス
- 一貫性を保つ: すべての製品セクションで同じ「もっと見る」ボタンのスタイル（色、サイズ、フォント）を使用して、統一感のあるストア デザインを作成します。
- クリアテキストを使用する: 「ここをクリック」などの一般的なテキストを、「詳細を表示」、「もっと見る」、「さらに詳しく」などの説明的な CTA に置き換えます。
- 1 つのブロック内に複数の CTA を配置しないでください。 商品カードに既に「カートに追加」ボタンがある場合は、その横に大きなCTAを配置するのは避けましょう。これにより、視覚的な混乱や意思決定の妨げを軽減できます。
- 変換のためのテスト配置: [詳細表示] ボタンは、商品画像の下または商品タイトルの下に配置します。どちらも簡単にスキャンできる位置であり、通常はクリックスルー率が向上します。
- モバイル向けに最適化： 重なりや不均一なパディングを防ぐために、モバイル ビューでボタンの間隔と配置を確認します。
よくあるご質問
1. 「商品の詳細を表示」ボタンが商品詳細ページにリンクしないのはなぜですか?
ボタンが配置されていることを確認してください 内部 商品または商品リスト要素。これらのコンテナの外に配置すると正しく機能しません。
2. ボタンを商品詳細ページではなくカスタムページにリンクできますか?
いいえ。「商品詳細」要素は、各商品のShopify商品詳細ページにのみ自動的にリンクするように設計されています。別のページにリンクしたい場合は、通常の ボタン要素 を代わりにお使いください。
3. 「カートに追加」ボタンと「もっと見る」ボタンの両方を一緒に表示できますか?
はい。同じ商品要素／商品リスト要素に両方を配置することで、顧客にクイック追加と詳細表示の選択肢を提供できます。デザインのバランスと一貫性を保つようにしてください。
4. 「詳細表示」ボタンは動的な製品データでも機能しますか?
はい。商品または商品リスト要素内に配置すると、ボタンは自動的に対応する商品のShopifyページに移動し、リンクします。
コメントしてくださってありがとうございます