製品バッジ要素

製品バッジ要素について

GemPages の製品バッジ要素は、新着商品のラベル付けや、注目の画像での直接的なプロモーションの表示など、製品に関する重要な詳細を強調するように設計されています。 

この要素により、eコマース ストアでさまざまなメリットが得られます。 

• 可視性の強化: 特定の商品を目立たせることで商品の視認性を高め、顧客の注目を集めます。
• ブランド信頼の向上: 次のようなバッジで信頼性を高めましょう "トップレート" or 「お客様のお気に入り」 肯定的なレビューや推薦を掲載して、購入者との信頼関係を構築します。
• 推奨されるアクション: 次のようなバッジで緊急性を持たせる 「残り2個のみ！」 or 「もうすぐ終わります」 顧客に迅速な行動を促し、購入を完了させます。
• テスト済みの価格戦略: 製品ごとに異なる割引を提供することで、各アイテムに最も効果的な価格戦略を試して決定します。
• 強化された在庫管理: 「在庫一掃セール or 「在庫削減」。
• ターゲットプロモーション: さまざまな商品カテゴリー、在庫レベル、販売目標に応じて異なる割引を設定します。 「カテゴリーセール」, 「季節限定プロモーション」 or 「ウィークリーディール」 ビジネスニーズに合ったプロモーションを簡単に作成できます。

製品バッジ要素を追加する方法

ステップ1： GemPagesエディタを開いて、 製品バッジ要素 検索バーで

ステップ2： サイドバーから要素をドラッグし、デザインエリアにドロップします。製品バッジは、 製品要素, 製品リスト要素、または直接 製品イメージバッジの設定は配置によって異なる場合があります。

ステップ3： 同じ商品に複数のバッジを追加できます。デフォルトでは、バッジは 左上隅複数のバッジを追加した場合、それらは縦に積み重なります。バッジの順序や表示位置を調整するには、 レイヤーツリー 特徴。

ステップ4： バッジを配置したら、クリックします パブリッシュ ライブで確認するには、こちらをクリックしてください。エディターでは、調整しやすいようにバッジは常に表示されますが、ライブページには設定した表示条件を満たした場合にのみ表示されます。

バッジ設定にアクセスするには、要素をクリックします。 左側のサイドバー 2つのタブが表示されます。 設定 の三脚と 上級者：

設定タブを構成する

1。 スタイル

デザインに合ったバッジスタイルをお選びください。以下のオプションからお選びいただけます。

• 画像
• テキスト水平
• テキストコーナー1
• テキストリボン1
• テキストコーナー2
• テキストリボン2
• 縦書きテキスト
• テキストスター
• テキストスクエア

2. 製品の供給元

その 製品ソース バッジに表示されている情報がどの製品のものかを示します。製品を変更するには、 製品ピッカー 製品モジュールで、希望のアイテムを選択します。

3。 テキスト

テキスト設定は、テキスト コンテンツを表示するスタイルで使用できます。

• デフォルトのテキストスタイル: 段落1
• デフォルトの色： FFFFFF（白）

GemPagesでは、テキストコンテンツを編集するにはポップオーバーを開く必要があります。以下の操作が可能です。

• 改行を含む長いテキストを入力します。
• 　 マークダウンスニペット Shopify からの動的な製品情報を表示します。

マークダウンを使用するには:

• 正しい形式で手動でマークダウンを入力してください。有効な形式のみがライブデータを表示します。
• クリック 「+」アイコン 入力フィールド内をクリックすると、サポートされているマークダウンのリストが開きます。

• リストからマークダウンを選択して挿入するか、同じマークダウンを複数回挿入します。

サポートされているマークダウンパターン:

• {％_割引} – 割引率を表示します。
• {割引額} – 割引額をストア通貨で表示します。
• {製品タイプ} – 製品の種類を表示します。
• {最低価格} – すべての製品バリアントの中で最も低い価格を表示します。
• {在庫数量} – 在庫残量を表示します。これは以下の場合にのみ機能します。 数量を追跡する 製品に対して有効になっています。

4. バッジスタイル

この設定では、テキストの周囲の形状と視覚スタイルを調整できます。以下の項目をカスタマイズできます。

• ボーダー
• コーナー
• Shadow

5。 サイズ

をセットする 幅（Width）, 高さ, パディング レイアウトに合わせてバッジのサイズを変更します。

6 ポジション

グローバルポジショニング設定はすべてのバッジスタイルに適用されます。スタイルを切り替えても、位置設定は保持されます。

ギャップ設定:

• バッジの位置に応じて、 ギャップスライダー。
• 整数値のみが許可されます。負の値や小数はサポートされていません。

7. 画像スタイル

バッジでテキストではなく画像を使用する場合は、以下をカスタマイズできます。

• ボーダー
• コーナー
• Shadow

8. 表示条件

表示条件は、ライブページにバッジが表示されるタイミングを制御します。スタイルを切り替えても、以前に設定された値はすべて保持されます。
トリガーの種類:
複数のトリガーを適用するには、 ➕アイコン利用可能なトリガーは次のとおりです。

• 製品在庫: 必須項目です。削除できません。在庫が指定数量に達したときに表示されます。
• 割引価格: 割引が設定されたパーセンテージまたは金額に達したときに表示されます。
• 価格帯: 商品価格が特定の範囲内にあるかどうかを表示します。
• 商品のタグ: 製品に選択したタグがあるかどうかを表示します。
• 作成日: 製品が X 日以内に作成されたか、特定の日付に作成されたか、または 2 つの日付の間に作成されたかを表示します。

特別条件: 次の場合、在庫が唯一のアクティブなトリガーになります。

• 製品は手動で選択されます。
• 動的モードでは、1 つの製品のみが割り当てられます。
• 製品リストには 1 つの製品が含まれます。

トリガー入力フィールド内をクリックするとポップオーバーが開き、各トリガーの詳細設定を構成できます。

商品バッジで割引率を表示する方法

ステップ1： まず 製品バッジ ページに追加した要素。

ステップ2： 左側のサイドバーで、 設定 タブには何も表示されないことに注意してください。

ステップ3： に行きます テキスト のセクションから無料でダウンロードできます。

ステップ4： テキスト入力フィールド内をクリックするとポップオーバーが開きます。

ステップ5： 挿入する {%_discount} 値下げ額:

• 手動で入力するか、
• クリック "+" アイコンと選択 割引 （％） マークダウンリストから。

ステップ6： 必要に応じてテキストのスタイル、色、書体をカスタマイズします。

ステップ7： （オプション） バッジスタイル, サイズ, 役職 あなたのデザインに合わせて。

ステップ8： 詳しくはこちら パブリッシュ 変更を適用します。

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.