製品価格要素

商品価格要素について

In GemPages エディター 7.0製品価格要素は、次の 2 つの別個の要素を組み合わせます。 価格 の三脚と 価格を比較するを選択します。 価格要素 は商品の通常価格を示し、 価格比較要素 セールが適用されている場合は、割引価格または元の価格が表示されます。両方の価格を同時に表示することで、オファーの魅力が高まり、コンバージョン率を向上させる効果が実証されています。

製品価格要素を追加するにはどうすればいいですか?

ノーザンダイバー社の GemPagesダッシュボードお好みのテンプレートを開いてエディタにアクセスします。これらの2つの要素は左側のサイドバーですぐに見つかります。、下 製品 のセクションから無料でダウンロードできます。

子要素として、価格と価格比較要素は、 製品モジュール 正しく動作します。 

GemPagesでは、価格表示形式を通貨サフィックス付きで表示するように変更できます。この形式を使用するには、 GemPagesダッシュボード → 設定 有効にする 通貨で価格を表示.

有効にした後は、 強制公開 価格または価格比較要素を含むページで、更新された形式をライブ ページに適用します。

通常価格の横に比較価格を表示する方法

通常、比較価格は通常価格の横に配置され、割引を強調して購入を促進します。設定手順は以下のとおりです。

ステップ1：Shopifyでセール価格を設定し、価格を比較する

GemPagesで価格比較を表示する前に、Shopifyで商品の通常価格とセール価格の両方が設定されていることを確認してください。 Shopifyのガイドライン これらを正しく設定します。

ステップ2: 行要素を追加する

GemPagesエディタで、 行要素 ページ上の価格を表示したい場所に貼り付けます。 2列のレイアウト 設定 列幅 〜へ コンテンツに合わせるこれにより、列は内部のコンテンツに合わせて自動的に調整されます。

ステップ3: 列に価格要素を挿入する

置き 価格要素 1つの列に 価格比較要素 もう一方の列で、配置、間隔、スタイルを調整して、好みのデザインに合わせます。

設定タブを構成する

価格要素と比較価格要素の両方は、比較価格に適用される取り消し線の設定を除いて、ほぼ同じ構成オプションを共有します。

製品ソース

この設定は、要素がどの商品の価格情報を表示するかを決定します。デフォルトでは、商品モジュールで割り当てられた商品が使用されます。商品を変更するには、 製品ピッカー 製品モジュールの設定で。

テキストスタイル

この時点で、テキストのタイポグラフィを微調整することができます。利用可能なオプションは次のとおりです。

1.スタイル: 6 つの見出しスタイルと 3 つの段落スタイルを含む定義済みのオプションから、希望のスタイルを選択します。

2.フォント: このテキストブロック内のテキストに使用するフォントを選択します。リストにないフォントを使用する場合は、 エディター v7 でカスタム フォントを追加する方法.

3。 サイズ: ピクセル単位で値を指定してフォントサイズを調整します。

4 色: テキストの色を選択します。

: ページ上のテキストの配置方法を指定します。左揃え、中央揃え、右揃え、両端揃えの4つのオプションから選択できます。

以下を行うには、 Show more  ボタンをクリックすると、さらにカスタマイズ オプションが表示されます。 

6. フォントの太さ: 表示されるドロップダウン メニューから希望のフォント ウェイトを選択します。

7. 行の高さ: パーセンテージ値を指定してテキストの高さを調整します。

8. 文字間隔: ピクセル単位で値を入力して文字間の間隔を変更します。

9.変換: 次のいずれかの方法でテキストを変換します。 

• 変換は適用されませんでした。
• 大文字: すべてのテキストを大文字に変換します。
• 小文字: すべてのテキストを小文字に変換します。
• 大文字にする: 各単語の最初の文字を大文字にします。

10. 影：

テキストの影を追加して視覚的な深みを増すことができます。

• 方向： 影の角度を指定します。
• 色： 影の色を選択します。
• 距離： テキストから影がどのくらい離れて表示されるかを設定します。
• ぼかし： 影のエッジの柔らかさを調整します。

線を引く

この設定は価格比較専用です。オンにするだけで価格に線を引くことができます。 

• 色圏: パレットから希望の線の色を選択するか、16 進カラー コードを入力します。
• 厚さ: スライダーを使用するか、ボックスに特定の数値を入力して厚さを調整します。 

詳細タブを設定する

より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.

商品価格要素を固定表示にする方法

商品価格要素を固定表示にすることで、顧客がページをスクロールしても常に表示されるようにできます。これは、特に長い商品ページにおいて、価格情報を常に確認できるようにするのに役立ちます。

商品価格要素を固定表示にするには、以下の手順に従ってください。

ステップ1：製品価格要素を選択します

GemPagesエディタで、 商品価格要素 あなたが固定したいもの。

ステップ2：詳細設定を開く

選択したら、 高機能 左側の設定パネルにあるタブ。

ステップ3：位置を固定に設定する

スクロールして 役職 セクション。 変更 役職 に設定 スティッキー.

トラブルシューティング: 価格が正しく表示されない

1. 価格要素の適切な配置を確認する

• GemPages エディターでページを開きます。
• 価格要素が製品モジュール内に配置されていることを確認します。
• そうでない場合は、製品モジュールをページにドラッグし、その中に価格要素をネストします。

2. 製品モジュールで製品の割り当てを確認する

• GemPages エディターで製品モジュールを選択します。
• 設定パネルで、正しい製品が割り当てられていることを確認します。
• 割り当てられた製品別に表示するか、特定の製品を手動で選択するかを選択できます。

3. Shopifyで商品のステータスと在庫状況を確認する

• Shopify 管理画面 > 商品に移動します。
• 該当する製品を選択してください。
• 製品のステータスが「アクティブ」に設定されていることを確認します。
• 「販売チャネルとアプリ」の下で、「オンラインストア」が選択されていることを確認します。

4. Shopifyで商品価格と通貨形式を更新する