バッジの位置を変更する
バッジを商品画像の内側または外側に配置し、プリセットまたはカスタムの位置を使用して、余白を微調整します。
Positionセクションを使用して、テキストバッジや画像バッジを、商品画像の上、商品ページの要素の下、またはテーマのカスタム要素の横に配置します。
Positionセクションを開く
Section titled “Positionセクションを開く”-
Badges & Labelsを開く
Section titled “Badges & Labelsを開く”Shopify管理画面で、Sami Product Labels > Badges & Labelsを開きます。
-
バッジを作成または選択する
Section titled “バッジを作成または選択する”バッジを作成するには、Create badgeをクリックして、Text badgeまたはImage badgeを選択します。
既存のバッジを更新するには、そのバッジの行にあるEdit badge/labelをクリックします。
-
Positionを展開する
Section titled “Positionを展開する”バッジエディタでDesignタブのまま、Positionまでスクロールして、セクションを展開します。
Designタブを開いて、Positionを展開します。
バッジを商品画像の内側に配置する
Section titled “バッジを商品画像の内側に配置する”バッジを商品画像に重ねて表示したい場合は、Inside product imageを選択します。
設定を適用する範囲を選択する
Section titled “設定を適用する範囲を選択する”Badge placementで、次のいずれかのモードを選択します。
- Use the same position for collection page and product page — 1つの位置が両方のページの種類に適用されます。
- Set different position for collection page and product page — Listing pagesタブとProduct pageタブで、それぞれ別々に位置を設定します。
画像内の1つの位置をすべてのページに適用するか、Listing pagesとProduct pageを別々に設定します。
プリセットの位置を選択する
Section titled “プリセットの位置を選択する”Badge positionで、位置のグリッドにある9つの点から1つを選択します。
| 位置 | 画像上の配置 |
|---|---|
| Top left | 左上の角 |
| Top center | 上辺の中央 |
| Top right | 右上の角 |
| Center left | 左辺の中央 |
| Center | 画像の中央 |
| Center right | 右辺の中央 |
| Bottom left | 左下の角 |
| Bottom center | 下辺の中央 |
| Bottom right | 右下の角 |
商品画像の内側にある9つのプリセット位置から1つを選択します。
パーセンテージでカスタムの位置を設定する
Section titled “パーセンテージでカスタムの位置を設定する”9つのプリセットでは精度が足りない場合は、Use Custom Positionをオンにします。エディタでは、グリッドが次の項目に置き換わります。
- 縦方向の基準：TopまたはBottom。
- 横方向の基準：LeftまたはRight。
- 選択した各基準からのオフセットを指定するパーセンテージのスライダー。
位置変更ボタンで基準を切り替え、プレビューを確認しながらスライダーを調整します。
縦方向と横方向の基準を選択し、それぞれのパーセンテージのオフセットを設定します。
バッジを商品画像の外側に配置する
Section titled “バッジを商品画像の外側に配置する”バッジを画像に重ねるのではなく、商品情報の横に表示したい場合は、Outside product imageを選択します。
Predefined positionを開き、次のいずれかのオプションを選択します。
| オプション | 商品ページ上の配置 |
|---|---|
| Below the product image | 商品画像のすぐ下 |
| Below the product title | 商品タイトルのすぐ下 |
| Below the product price | 商品価格のすぐ下 |
| Below the product quantity | 数量コントロールのすぐ下 |
| Below the add to cart button | カートに追加ボタンのすぐ下 |
| Below the buy now button | 今すぐ購入ボタンのすぐ下 |
| Custom | テーマ内のIDまたはクラスで指定した要素の横 |
Badge positionで、バッジを左揃え、中央揃え、右揃えのいずれにするかを選択します。
商品ページの要素を選択し、バッジを左、中央、右のいずれかに揃えます。
テーマのセレクターでバッジを配置する
Section titled “テーマのセレクターでバッジを配置する”テーマの要素を対象にするには、Predefined positionでCustomを選択します。必要なフィールドに、該当するIDまたはクラスを入力します。
| フィールド | ページの種類 |
|---|---|
| Position in product page | 商品ページ |
| Position in home page | ホームページ |
| Position in collection page | コレクションページ |
| Position in other page | その他のページの種類 |
たとえば、クラスの場合は.product-form、IDの場合は#ProductInfoと入力します。バッジをこのカスタムの位置に配置したいページの種類ごとに、値を追加します。
カスタムのバッジ位置が必要なページの種類ごとに、テーマのIDまたはクラスを入力します。
余白とパディングを調整する
Section titled “余白とパディングを調整する”Marginを展開して、外側の余白をピクセル単位で変更します。エディタには、選択した位置に関連する辺が表示されます。
Paddingを展開して、バッジの内容と端との間隔を変更します。上、下、左、右の値は、それぞれ個別に設定できます。
ピクセル単位の余白とパディングの値で、バッジを微調整します。
プレビューして保存する
Section titled “プレビューして保存する”プレビューのコントロールでCollection pageとProduct pageを確認し、Desktop viewとMobile viewを切り替えます。バッジが意図した場所に表示されたら、Saveをクリックします。
次のステップ
Section titled “次のステップ”- バッジのサイズを変更する — ビューポートやページの種類に合わせて、バッジのサイズを変更します。
- バッジのスタイルを変更する — フォント、色、枠線、背景をカスタマイズします。
- デバイスとページ別の表示 — バッジを表示するデバイスとページを制御します。