Zenn
📚

Shopifyでセールラベルを表示する方法を考察

に公開
Shopify
tech

はじめに

今回は、Shopify でセールラベルを表示する方法について考察しました。

HTML・CSS を使ったセールラベルの実装方法や、Liquid を用いたセールラベルの実装方法、そして 「シンプル商品バッジ｜お手軽アイコンラベル表示」 アプリを使ったノーコードでの導入方法を考察していきます。
それでは、頑張っていきましょう。

今回は、以下の記事を参考にしています。

Shopify でセールラベルを表示する定義

セールラベル（セールバッジ）とは、ECサイト上で販売価格やセール情報を視覚的に強調するために表示するアイコンやテキストのことを指します。主に「Sale」「特価」「値下げ」などの文言が使われ、商品一覧や商品詳細ページなどでお客様の目に留まりやすいように設置されます。セールラベルを付与することで、セール対象商品であることを明確にアピールし、購買意欲の向上を期待できます。

また、**「Shopify セールラベル　表示」**を行うことで、サイト全体の売上を底上げしたり、在庫処分などの特別キャンペーン時にも活用しやすくなります。

Shopify でセールラベルを表示するメリット

まずは、Shopify でセールラベルを表示するメリットについて解説していきます。

1. ユーザーの注意を引きやすい

セールラベルがあるだけで商品が目立ちやすくなり、ユーザーの視線を集めやすくなります。「セール商品を探している」「安く買いたい」と考えているお客様に対しては、非常に強力な訴求ポイントとなります。

2. 購買意欲の向上

「今だけ値下げ中」や「期間限定オファー」などの強調表示によって、購買意欲を高めることができます。セールという限定感を演出することで、ユーザーの購入行動を後押しします。

3. ストア全体のコンバージョン率向上

セールラベルの導入により、特にセール商品のクリック率が上がる可能性があります。商品ページへのアクセス増加が期待できるため、ひいてはストア全体のコンバージョン率向上につながります。

4. 在庫消化や売りたい商品の強調

在庫処分中の商品、シーズンオフ商品を積極的にセール表示することで、在庫消化をスムーズに行いやすくなります。また、特定の商品を集中的に売りたいときにも有効です。

5. ブランディングにも活用可能

ラベルのデザインをブランドイメージに合わせることで、ストア全体の統一感を保ちながらプロモーションが可能です。安っぽい印象を与えずに、「洗練されたセール」表現を目指せます。

Shopify でセールラベルを表示するデメリット

次に、Shopify でセールラベルを表示するデメリットについて考察していきましょう。

1. 過度なセール感によるブランドイメージの低下

過度にセールラベルを乱用してしまうと、ブランドの高級感や信頼感が損なわれる可能性があります。安売りイメージが定着すると、通常価格での購入率が下がってしまうことも考えられます。

2. 実装コストや管理工数

テーマによっては、セールラベルの実装にカスタムコードが必要になる場合があります。Liquid を書き換えたり、CSS を編集したりするコストがかかることも少なくありません。また、セールが終わった後にラベルを外す手間も発生します。

3. デザインの一貫性維持が難しい

セールラベルを追加すると、もともとのデザインバランスが崩れる場合があります。全体のレイアウトや色、フォントなどとの調和を考える必要があり、デザイナーやコーダーとの連携が欠かせません。

4. ユーザーにとってのセールの価値の希薄化

常にセールラベルが表示されていると、「常に安売りしているストア」という印象を与えてしまい、本当のセール時の訴求力が弱まるリスクもあります。

Shopify でセールラベルを表示する方法

ここからは、実際に Shopify でセールラベルを表示する方法について考察していきます。今回は以下の 3 つのアプローチをご紹介します。

  1. HTML・CSS を使った実装
  2. Liquid を使った実装
  3. Shopify アプリ「シンプル商品バッジ｜お手軽アイコンラベル表示」を使った実装

1. HTML・CSS を使ったセールラベルの実装

最も基本的な方法は、HTML と CSS を使って直接ラベルを追加する方法です。例えば、商品画像や商品タイトルの近くに以下のようなラベル要素を挿入します。

<!-- セールラベルの HTML (商品カードなどで使用) -->
<div class="product-card">
  <img src="your-product-image.jpg" alt="Product Image">

  <!-- セールラベル -->
  <span class="sale-label">SALE</span>

  <h3>商品タイトル</h3>
  <p>商品説明や価格を表示</p>
</div>

/* セールラベルの CSS */
.sale-label {
  display: inline-block;
  background-color: #ff0000; /* 赤い背景色 */
  color: #fff;              /* 白い文字色 */
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 3px;
  position: absolute;       /* 画像の上に重ねる場合は position を指定 */
  top: 10px;
  left: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

上記の例では、商品画像の左上に目立つ赤い「SALE」ラベルを表示するスタイルを示しています。商品カードコンテナに position: relative; を指定すると、.sale-label を絶対配置で重ね合わせられます。

この方法はシンプルですが、セール対象商品かどうかを判断するために、手動でクラス名や要素を追加したり削除したりする手間が発生します。

2. Liquid を用いたセールラベルの実装

Shopify のテンプレートエンジンである Liquid を使うことで、動的にセールラベルを表示することが可能になります。たとえば、商品がセール価格（compare_at_price が存在）になっている場合にのみ「SALE」ラベルを表示するコードは以下のようになります。

{% if product.compare_at_price > product.price %}
  <!-- セールラベルを表示 -->
  <span class="sale-label">SALE</span>
{% endif %}

/* 上記と同じCSSを適用可能 */
.sale-label {
  background-color: #ff0000;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

上記では、product.compare_at_price > product.price という条件に合致する（＝セール価格が設定されている）場合に限りセールラベルを表示します。これにより、セールが終了したら自動的にラベルが消えるなど、管理の手間を大幅に減らすことができます。

実装手順の例

  1. テーマの編集
    「Online Store（オンラインストア）」 > 「Themes（テーマ）」 > 「Actions（アクション）」 > 「Edit code（コードを編集）」 をクリック。

  2. 商品カード用テンプレートを探す
    多くの場合、Sections または Snippets フォルダ内に product-grid.liquid や product-card.liquid のようなファイルが存在し、そこに商品タイトルや商品価格のコードが含まれています。

  3. 該当箇所に Liquid 条件分岐を追加
    商品画像や価格表示部分など、セールラベルを表示したい箇所に if 文を挿入します。

  4. CSS の追加
    テーマの theme.css や theme.scss 内、もしくは同じテンプレートファイル内に <style> タグを挿入して、セールラベル用の CSS を追加します。

これで、Shopify のテーマにセールラベルを実装する方法はひととおり完了です。

3. Shopify アプリ「シンプル商品バッジ｜お手軽アイコンラベル表示」を使った実装

非エンジニアの方や、コード編集が苦手な方にとっておすすめなのが、アプリを使ったノーコードでの導入です。今回は 「シンプル商品バッジ｜お手軽アイコンラベル表示」 というアプリを紹介します。

シンプル商品バッジ｜お手軽アイコンラベル表示

以下のShopify公式のアプリストアからインストールできます。

https://apps.shopify.com/ur-smart-product-badge?locale=ja

アプリ概要

  • アプリ名：シンプル商品バッジ｜お手軽アイコンラベル表示
  • 料金：月額 $5.99（7日間の無料体験あり）
  • 評価：0.0 (0 レビュー)
  • 開発者：株式会社UnReact

このアプリでは、コードの編集が不要で、セールラベル（商品バッジ）を自由にデザインできます。赤いアイコンや目立つテキストを簡単に設定できるので、「Shopify セールラベル　表示」 を手軽に実現可能です。

機能の特徴

  1. ノーコードで商品画像にバッジを追加
    商品一覧ページや商品詳細ページなど、さまざまなページに簡単にバッジを挿入できます。

  2. 画像やテキストデザインを自由にカスタマイズ
    ブランドイメージに合わせてバッジのデザインを調整できます。サイズ、色、テキスト、角丸なども管理画面から設定可能です。

  3. 特定の条件でバッジを表示
    コレクションごと、在庫残りわずか、新商品など、さまざまな条件でバッジを自動付与できます。セール商品だけを抽出して自動的に「SALE」アイコンを付けるといった使い方も簡単です。

  4. 7日間の無料体験
    自分のストアに合うかどうか、気軽に試せます。

インストール方法

  1. Shopify アプリストアからインストール
    こちら から「シンプル商品バッジ｜お手軽アイコンラベル表示」をインストールします。

  2. 設定画面でバッジを作成
    管理画面から「セールアイコン」を作成し、テキストやカラー、バッジ位置などを設定します。プレビューを確認しながら微調整が可能です。

  3. 対象商品やコレクションを指定
    セール商品だけにバッジを表示させるなど、条件を指定します。コーディング不要で完結します。

  4. ストアに反映
    バッジ設定を保存すると、即座にストアに反映され、商品画像上にセールラベルが表示されます。

コード不要で運用可能なため、テーマを大きく改変したくない方や、手軽にセールラベルを表示したい方には最適なツールです。

シンプル商品バッジ｜お手軽アイコンラベル表示を使って、セールラベルを表示する概要

ここからは、アプリリストの画像を参考にしながら、アプリを用いてセールラベルを表示する方法について考察します。

ノーコードで商品画像にバッジを追加できます。これにより、Shopifyでセールラベルを表示することができます。

さまざまなページに商品バッジを簡単に追加できます。

画像やテキストの商品バッジを簡単に追加できます。

特例のコレクションや商品に対して、セールラベルを表示することができます。

以下のShopify公式のアプリストアからインストールできます。
https://apps.shopify.com/ur-smart-product-badge?locale=ja

さいごに

今回は、Shopify でセールラベルを表示する方法について、HTML・CSS、Liquid でのカスタム実装、そしてアプリ 「シンプル商品バッジ｜お手軽アイコンラベル表示」 を活用する方法を解説しました。

「Shopify セールラベル　表示」を実現するにはいくつかの選択肢がありますが、工数やメンテナンス性を考慮して、自身のストアに最適な方法を選んでみてください。セールラベルを上手に活用して、売上アップや在庫消化に役立てていただければ幸いです。

参考記事

今回は、以下の記事を参考にしています。

Discussion