バッジのスタイルを変更する

Designタブで、バッジの見た目を変更します。テキストバッジでは、フォント、色、背景、枠線、不透明度、回転を設定できます。画像バッジでは、選択した画像の不透明度と回転を設定できます。

エディタでバッジを開く

1. Badges & Labelsを開く

   Shopify管理画面で、Sami Product Labels > Badges & Labelsを開きます。

2. バッジを選択する

   更新したいバッジを見つけて、その行のEdit badge/labelをクリックします。

   新しいバッジのスタイルを設定する場合は、Create badgeをクリックして、Text badgeまたはImage badgeを選択します。

   

   カスタマイズしたいバッジのEdit badge/labelをクリックします。

3. Designタブのままにする

   エディタはDesignで開きます。利用できるセクションは、テキストバッジと画像バッジのどちらを選択したかによって異なります。

テキストバッジをカスタマイズする

フォントとテキストの色を選択する

Badge textの下のコントロールで、テキストをカスタマイズします。

• Font picker — 組み込みのリストからフォントを選択します。
• Use Custom Font Style — このオプションを有効にすると、Fontにフォントファミリーを入力し、RegularやBoldなど、利用できるフォントスタイルまたはウェイトを選択できます。
• Text color — カラーピッカーを開き、バッジの背景に対して読みやすい色を選択します。

組み込みのフォントを選択するか、Use Custom Font Styleを有効にしてから、テキストの色を設定します。

テキストサイズと文字間隔は、Sizeで設定します。これらのコントロールについては、バッジのサイズを変更するを参照してください。

背景を選択する

Styleを展開して、Fill typeを選択します。

Fill type	用途
Solid	単色の背景色またはカラープリセット。
Shape	単色またはグラデーションの色が適用されたテンプレートの図形。
Image	テキストバッジの背景として使用するテクスチャ、パターン、画像。

Styleを展開して、テキストバッジの背景の種類を選択します。

単色の背景を使用する

Solidを選択して、Background colorを選びます。Choose templateの下にあるプリセットから選択することもできます。

図形またはグラデーションの背景を使用する

Shapeを選択して、次の項目を設定します。

• Choose from library — テンプレートギャラリーを開き、Sales、Autotext、Stock、Free shipping、Pre-orderなどのカテゴリでデザインを絞り込みます。
• Start colorとEnd color — 同じ色を指定すると単色に、異なる2色を指定するとグラデーションになります。
• Gradient direction — Left to right、Top to bottom、Diagonal、Radialから選択します。
• Choose template — エディタから図形のプリセットを直接適用します。

図形を選択し、色を設定して、グラデーションの方向を選択します。

画像の背景を使用する

Imageを選択して、Select Imageをクリックし、カスタムの背景を選択します。エディタでは、5 MB以下のPNG、JPG、SVGファイルを使用できます。Removeをクリックすると、選択した背景をクリアします。

ノート

この画像は、テキストバッジの背景としてのみ使用されます。編集可能なテキストを含まない画像単体を表示するには、代わりに画像バッジを使用してください。

テキストバッジの背景として使用する画像を選択します。

枠線を追加する、または角を丸くする

Border & cornersを展開します。どちらのオプションも、個別に有効にできます。

オプション	利用できるコントロール
Add border	Border widthを0～8 pxで設定し、Border colorを選択して、Solid、Dotted、Dashedから選択します。
Round corners	Corner radiusを0～100 pxで設定します。

枠線を追加する、角を丸くする、またはその両方を設定します。

画像バッジのスタイルを設定する

画像バッジには、テキストバッジのフォント、背景、Border & cornersのコントロールは表示されません。Designタブの上部にあるContentでバッジの画像を変更し、Advanced settingsで不透明度や回転を調整します。

画像のサイズと配置については、バッジのサイズを変更するとバッジの位置を変更するを参照してください。

不透明度または回転を調整する

これらの効果は、テキストバッジと画像バッジの両方で利用できます。

1. Advanced settingsを展開します。
2. Effectsの下で、必要なオプションを有効にします。
3. ライブプレビューを確認しながら、値を調整します。

効果	範囲
Adjust opacity	0%～100%
Rotate badge	0°～360°

Adjust opacityまたはRotate badgeを有効にして、効果の値を設定します。

ノート

Effectsセクションには、Use animationも含まれています。アニメーションの設定手順の全体については、バッジにアニメーションを追加するを参照してください。

プレビューして保存する

プレビューのツールバーで、Collection pageとProduct pageでのバッジの表示を確認し、Desktop viewとMobile viewを切り替えます。必要なすべてのプレビューでバッジが問題なく表示されたら、Saveをクリックします。

注意

色や不透明度を変更した後は、テキストのコントラストを確認してください。ある商品画像で読みやすいスタイルでも、別の商品画像では読みにくくなることがあります。

次のステップ

• バッジのサイズを変更する — バッジのサイズを変更し、テキストサイズや文字間隔を調整します。
• バッジの位置を変更する — バッジを移動し、余白やパディングを調整します。
• バッジにアニメーションを追加する — アニメーション効果を適用し、速度と繰り返し回数を設定します。
• カスタムCSSを使用する — カスタムCSSでバッジを微調整します。

ヒント

サポートが必要な場合

手順の途中で問題が発生した場合は、[email protected]までお問い合わせください。