テキストバッジを作成する
カスタムのテキスト、図形、色を使って、テキストバッジを作成する手順を説明します。
テキストバッジでは、単色、図形、画像のいずれかの背景に、カスタムのメッセージを商品画像上に直接表示できます。Sami Product Labelsでテキストバッジを作成する手順は次のとおりです。
-
Badges & Labelsに移動する
Section titled “Badges & Labelsに移動する”Sami Product LabelsのナビゲーションでBadges & Labelsをクリックし、バッジの一覧ページを開きます。
サイドバーのナビゲーションからBadges & Labelsを選択します。
-
新しいバッジを作成する
Section titled “新しいバッジを作成する”一覧が空の場合は、Add a new label/badgeをクリックします。すでにバッジがある場合は、Create badgeをクリックします。
Createをクリックして、新しいバッジの作成を開始します。
-
「Text badge」を選択する
Section titled “「Text badge」を選択する”Choose badge typeでText badgeを見つけて、Createをクリックします。
Textを選択して、テキストベースのバッジを作成します。
-
バッジに名前を付ける
Section titled “バッジに名前を付ける”エディタは、New Badgeなどのデフォルトの名前で開きます。名前のフィールドはプレビューの上のツールバーにあります。クリックして、「Summer Sale」や「Low Stock Warning」など、わかりやすい内部用の名前を50文字以内で入力します。フィールドの横のカウンターには、使用した文字数が表示されます。この名前がストアフロントに表示されることはありません。
バッジを識別するための、わかりやすい名前を入力します。
-
テキストの内容を編集する
Section titled “テキストの内容を編集する”リッチテキストエディタを使って、バッジのメッセージを入力します。太字、斜体などのスタイルも設定できます。
商品の最新データを表示するには、割引率を表す
{sale}や在庫数を表す{inventory}などの動的変数を挿入します。変数は、ストアフロントで実際の値に置き換えられます。
バッジのテキストを入力し、動的変数を挿入して商品の最新データを表示します。
-
テンプレートの背景を選択する
Section titled “テンプレートの背景を選択する”Fill typeでShapeを選択し、Choose from libraryをクリックします。Template galleryには、Sales、Autotext、Stock、Free shipping、Pre-orderなどのフィルターがあります。テンプレートを1つ選択し、エディタでカスタマイズを続けます。
Styleで、Choose from libraryをクリックして、Template galleryを開きます。
Template galleryを閲覧し、背景のプリセットを選択します。
-
背景色を設定する
Section titled “背景色を設定する”単色の背景にする場合は、Solidを選択して色を選びます。グラデーションにする場合は、Shapeを選択し、Start colorとEnd colorを設定して、Gradient directionを選択します。
バッジの背景に、単色またはグラデーションを設定します。
-
テキストの色を設定する
Section titled “テキストの色を設定する”バッジのテキストを読みやすくするため、背景色と十分にコントラストのあるテキストの色を選択します。
背景に対して目立つテキストの色を選択します。
-
バッジを表示する商品を選択する
Section titled “バッジを表示する商品を選択する”Productsを開いて、ターゲティングのモードを1つ選択します。
- All products — ストア内のすべての商品にバッジを表示します。
- Specific products — Browseをクリックし、カタログを検索または絞り込み、商品のチェックボックスにチェックを入れて、Selectをクリックします。Search productsフィールドを使って、商品を直接検索することもできます。
- Products matching conditions — Add conditionsをクリックして1つ以上のルールを作成し、商品がall conditionsとany conditionのどちらに一致する必要があるかを選択します。
テキストバッジの商品の範囲を選択します。
Specific productsの場合は、ピッカーから商品を選択して、Selectをクリックします。
-
バッジを保存する
Section titled “バッジを保存する”プレビューの上にあるステータスのスイッチをActiveに設定し、右上のSaveをクリックします。バッジをストアフロントに公開する準備ができていない場合は、Draftのままにしてください。公開されずに保存されます。
顧客、ページ、言語、国、デバイス、スケジュール、優先度の設定は、Displayタブにあります。
Saveをクリックして、テキストバッジの作成を完了します。
次のステップ
Section titled “次のステップ”- 特定の商品を対象にする — 手動での商品選択と、条件に基づくターゲティングについて詳しく説明します。
- 動的変数を使用する — 割引率や在庫数などの商品の最新データを、バッジのテキストに挿入します。
- バッジの位置を変更する — 商品画像上の思い通りの場所にバッジを移動します。
- バッジのスタイルを変更する — フォント、不透明度、アニメーションなど、その他のビジュアル設定をカスタマイズします。