この記事では、 商品ページにポップアップを作成する ポップアップ要素 GemPages v7 では。
製品ページにポップアップを追加する理由
製品ページのポップアップは、顧客のショッピングの流れを中断することなく、必要な場所に追加の詳細情報を提供するためのスマートな方法です。
- ショッピング体験を向上させる: 顧客は商品ページを離れることなく、重要な情報を瞬時に確認できます。
- 購入の摩擦を取り除く: サイズ表、配送情報、返品ポリシーなどの詳細がワンクリックで表示されるため、迷うことが少なくなります。
- コンバージョンを増やす: よりスムーズでシームレスな購入体験により、顧客は購入の完了に集中できます。
ポップアップは、買い物客に 適切な情報を適切なタイミングで、のような:

- サイズ表/フィットガイドファッション小売業者は、サイズガイドのポップアップを使用することで、顧客が商品ページを離れることなく簡単に寸法を確認できるようにすることができます。これにより、サイズの問題による返品を削減できます。
- 配送と返品に関するポリシー: 美容ブランドは、配送と返品の詳細をポップアップで表示することが多く、チェックアウト前に顧客に明確な情報を提供して信頼を高めています。
- 製品の材料または成分: 高級時計ブランドは、ポップアップで技術仕様を強調し、メインの製品ページに圧倒されることなく、買い物客が詳細を確認できるようにしています。
- 期間限定のオファーやプロモーション小売業者は、緊急性を捉えて迅速な意思決定を促すために、商品ページに直接プロモーション ポップアップ (「2 つ購入すると 1 つ無料」や「本日のみ送料無料」など) を頻繁に表示します。
GemPages で製品ページポップアップを作成する方法は?
GemPages v7では、利用可能な機能を使用して、商品ページに表示される独自のポップアップをデザインすることがこれまで以上に簡単になりました。 ポップアップ要素。 次の手順を実行します:
ステップ1: GemPagesエディターにアクセスする
- Shopify管理画面にログインし、 GemPages ビルダーアプリ に選出しました。 アプリ のセクションから無料でダウンロードできます。
- に行く ページ > 製品 GemPages で構築されたすべての製品ページを見つけます。
- 対象製品ページをクリックしてエディターに入ります。

ステップ2: 要素を追加してポップアップを構成する
- エディターを見つけたら、検索バーに「popup」と入力して、ポップアップ要素を見つけます。

- 要素をページにドラッグ&ドロップしてください。左側のサイドバーに設定パネルが表示されます。

- 次のように、ポップアップを好みに応じて設定します。
| 1.ポップアップのサイズを変更します サイズ のセクションから無料でダウンロードできます。
全画面に設定したり、特定の幅と高さに調整したりできます。 |
![]() |
| 2.背景色または画像を変更する 経歴 のセクションから無料でダウンロードできます。
例えば、、サイズ表の画像をアップロードしてフィットガイドのポップアップを作成できます。 |
![]() |
| 3.ポップアップが表示されるタイミングを選択します。 表示条件 のセクションから無料でダウンロードできます。 | ![]() |
ポップアップ要素の設定手順の詳細については、以下を参照してください。 この記事.
ステップ3: ページを保存して再公開する
- 上部バーの左隅に、 保存 あなたの最新情報と プレビュー ポップアップが正しく表示されるようにします。
- クリック パブリッシュ ポップアップをライブにするボタン。

結果:




コメントしてくださってありがとうございます