商品価格と比較価格を同じ行に表示する方法

価格と比較価格について理解する

GemPagesでは、 商品価格 要素は現在の販売価格を示し、 比較価格 要素は、割引前の元の価格、またはそれ以上の価格を表示します。これらを併用することで、割引を強調し、コンバージョンを促進します。

GemPages で設定する前に、Shopify で商品の価格と比較価格の両方が設定されていることを確認してください。

ステップ1： Shopify 管理パネルにログインします。リストから編集する商品を選択するか、新しい商品を追加します。

ステップ2： 「価格設定」セクションで、「比較価格」フィールドに元の価格を入力します。

価格フィールドに割引価格を入力します。

ステップ3： 「保存」をクリックして更新を適用します。

同じ行に価格を表示して価格を比較する方法

以下の手順に従って、 商品価格 and 比較価格 1 行にきちんと並べます。

ステップ1： 両方の価格を表示する製品ページを開きます。

ステップ2： 2 列の行を製品モジュールにドラッグ アンド ドロップします。

ステップ3： 一方の列に商品価格要素を追加し、もう一方の列に比較価格要素を追加します。これらの要素は、商品の価格データと自動的に同期されます。

ステップ4： 両方の要素を含む行を選択し、「コンテンツに合わせる」に設定して、適切に配置します。

追加のカスタマイズオプション

さらにカスタマイズできます 価格を表示して価格を比較する 次のようなスタイルを調整します。

• フォントの種類とサイズ
• フォントの太さと色
• 行内の配置
• 間隔と行の高さ

詳細については、 製品価格要素ガイド.