Shopifyでセール時にラベル(バッジ)の表示方法|色や文言、角丸、表示位置のカスタマイズ方法

Shopifyでセール時にラベル(バッジ)の表示方法|色や文言、角丸、表示位置のカスタマイズ方法

Shopifyでオンラインストアを運営している方にとって、セール期間中の商品の訴求力向上は重要な課題の一つです。セール商品に目立つラベル(バッジ)を表示することで、顧客の注意を引き、購買意欲を高めることができます。

本記事では、Shopifyの標準テーマ「Dawn」を使用して、セール時に自動でラベルを表示する方法を詳しく解説します。基本的なセール価格の設定から、ラベルの色や文言の変更、さらには表示位置や角の丸みまで、細かなカスタマイズ方法まで網羅的にご紹介します。

初心者の方でも安心して作業できるよう、実際の管理画面のスクリーンショットを交えながら、ステップバイステップで説明していきますので、ぜひ最後までご覧ください。

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

Dawnテーマでは、商品管理にてセール価格を設定することで自動でセールのラベルが表示されます。そのため、本章では、セール価格を設定する方法を紹介します。

(1) Shopify管理画面 > 商品管理の順にアクセス

(2) セールを実施したい商品を開く

割引前価格にセール前の通常価格を設定

(3) 価格にセール価格を設定

(4) 割引前価格にセール前の通常価格を設定

(5) 保存をクリック

セールのラベルが表示されていることを確認

(6) オンラインショップの商品一覧ページ(コレクションページ)にアクセス

(7) セールのラベルが表示されていることを確認

以上で設定は完了です。

Shopifyでセール時のラベルをカスタマイズする方法

本章もDawnテーマを参考にご紹介します。

セール時のラベルの色を変更する方法

Shopify管理画面より「オンラインストア > テーマ」の順に遷移

(1) Shopify管理画面より「オンラインストア > テーマ」の順に遷移

(2) Dawnテーマの「カスタマイズ」をクリック

販売バッジの配色から、変更したいラベルの色を選ぶ

(3) テーマエディタの左メニューにある「テーマ設定」をクリック

(4) バッジセクションを開く

(5) 販売バッジの配色から、変更したいラベルの色を選ぶ

(6) 保存をクリック

セールのラベルの色が変わっていることを確認

(7) オンラインショップの商品一覧ページ(コレクションページ)にアクセス

(8) セールのラベルの色が変わっていることを確認

以上で設定は完了です。

セール時のラベルの位置を変更する方法

Shopify管理画面より「オンラインストア > テーマ」の順に遷移

(1) Shopify管理画面より「オンラインストア > テーマ」の順に遷移

(2) Dawnテーマの「カスタマイズ」をクリック

カードでの位置から、ラベルを表示させたい位置を選択

(3) テーマエディタの左メニューにある「テーマ設定」をクリック

(4) バッジセクションを開く

(5) カードでの位置から、ラベルを表示させたい位置を選択

(6) 保存をクリック

セールのラベルの位置が変わっていることを確認

(7) オンラインショップの商品一覧ページ(コレクションページ)にアクセス

(8) セールのラベルの位置が変わっていることを確認

以上で設定は完了です。

セール時のラベルの角丸を変更する方法

Shopify管理画面より「オンラインストア > テーマ」の順に遷移

(1) Shopify管理画面より「オンラインストア > テーマ」の順に遷移

(2) Dawnテーマの「カスタマイズ」をクリック

角の半径から、角の丸みの値を設定

(3) テーマエディタの左メニューにある「テーマ設定」をクリック

(4) バッジセクションを開く

(5) 角の半径から、角の丸みの値を設定

ℹ️ 値は0px~40pxの間で設定ができ、0pxに近づくほど角の丸みがなくなり、40pxに近づくほど角が丸くなります。Dawnテーマのデフォルトの値は40pxです。

(6) 保存をクリック

セールのラベルの角の丸みが変わっていることを確認

(7) オンラインショップの商品一覧ページ(コレクションページ)にアクセス

(8) セールのラベルの角の丸みが変わっていることを確認

以上で設定は完了です。

セール時のラベルの文言(テキスト)を変更する方法

「デフォルトテーマのコンテンツを編集する」をクリック

(1) Shopify管理画面より「オンラインストア > テーマ」の順に遷移

(2) Dawnテーマの「⋯(三点リーダー)」をクリック

(3) 「デフォルトテーマのコンテンツを編集する」をクリック

「Products > Product > On Sale」がセールラベル文言となりますので好きな文言へ変更

(4) 「Products > Product > On Sale」がセールラベル文言となりますので好きな文言へ変更

(5) 保存をクリック

セールのラベルの文言が変わっていることを確認

(6) オンラインショップの商品一覧ページ(コレクションページ)にアクセス

(7) セールのラベルの文言が変わっていることを確認

以上で設定は完了です。

【番外編】セール実施におすすめのShopifyアプリ

RuffRuff 購入特典

RuffRuff 購入特典は、あらゆる条件で様々なディスカウント施策を実施できるShopifyアプリです。

たとえば、以下のようなディスカウントを実施できます。

  • VIP会員限定で送料無料
  • 会員ランク別に割引
  • ボリュームディスカウント
  • 特定商品を含む場合は割引
  • 過去の購入回数が10回以上で割引
  • 先着順に割引(先着10名まで20%OFF、先着20名まで10%OFF)
  • タイムセール

など

他にもたくさんのディスカウント施策を実施できます。詳しくは以下のボタンよりサービスページをご確認ください。

RuffRuff 予約販売

「RuffRuff 予約販売」はシンプル設定で予約販売を実施でき、無制限に予約注文の受け付けが可能なShopifyアプリです。 最高品質アプリの証「💎Built for Shopify」を獲得しています。 

アプリ1つで、期間限定販売やタイムセール、発売予告、繰り返し販売、受注生産品の予約(受注販売)、会員割引、VIP会員限定販売、ブラックリスト会員への販売制限、後払い、同梱制御、個数制限、バッジ表示、配送日時指定の非表示、多言語対応、カートボタンのデザインカスタマイズなどを実現できます。

最後に

本記事では、ShopifyのDawnテーマにてセールラベルを表示・カスタマイズする方法について詳しく解説してきました。

セールラベルの設定から色の変更、表示位置の調整、角の丸みの設定、そして文言の変更まで、一通りのカスタマイズ手法をマスターすることで、あなたのオンラインストアをより魅力的に演出できるでしょう。

セールラベルは、顧客の視線を引きつけ、お得感を演出する重要な要素です。ブランドイメージに合わせてラベルをカスタマイズすることで、統一感のあるストアデザインを実現し、顧客満足度の向上にもつながります。

今回ご紹介した設定は、Dawnテーマの標準機能を活用したものですが、他のテーマでも類似の機能が提供されている場合があります。お使いのテーマに応じて、適切な設定方法を確認してみてください。

効果的なセールラベルを活用して、売上アップを目指しましょう。

最後に、下記のブログ記事ではShopifyで実施できるセール施策を紹介しています。ご参考にしてください。

ブログに戻る
1 6
  • Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Tsunライターチーム

    Shopify Liquidは、Shopifyが開発したオープンソースのテンプレート言語です。本記事では、Shopify Liquidの基本概念、主な特徴、そしてその学習に役立つリソースについて解説します。

    Shopify Liquidとは|特徴や基本構文、学習リソースまで紹介

    Tsunライターチーム

    Shopify Liquidは、Shopifyが開発したオープンソースのテンプレート言語です。本記事では、Shopify Liquidの基本概念、主な特徴、そしてその学習に役立つリソースについて解説します。

  • Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Tsunライターチーム

    Shopify Polarisは、Shopifyのエコシステムにおいて重要な役割を果たす包括的なデザインシステムです。本記事では、Shopify Polarisの概要やメリット、デメリット、Polarisを活用したShopifyアプリの事例、Shopify Polarisを使用する際のヒントとコツを紹介します。

    Shopify Polarisとは? 効率的なShopifyアプリ開発に!

    Tsunライターチーム

    Shopify Polarisは、Shopifyのエコシステムにおいて重要な役割を果たす包括的なデザインシステムです。本記事では、Shopify Polarisの概要やメリット、デメリット、Polarisを活用したShopifyアプリの事例、Shopify Polarisを使用する際のヒントとコツを紹介します。

  • 【Tips】Shopify の GraphQL Admin API で顧客総数を取得する

    ShopifyのGraphQL Admin API で顧客総数を取得する

    小笠原 京平

    Shopifyの GraphQL Admin API の小ネタです。 Shopifyの顧客総数を取得したい場合のクエリは、いざ探そうと思ってもパッと見つからないのでメモしておきます。 対象読者 Shopify GraphQL Admin API を使ったことがある方 顧客総数を取得するクエリ 2023-07 バージョンから CustomerSegmentMemberConnection に変更があったため、2023-07より前と以降で若干クエリが異なります。 ※ changelog 2023-07以降 { customerSegmentMembers(first: 1, query: "") { totalCount } } 2023-07より前...

    ShopifyのGraphQL Admin API で顧客総数を取得する

    小笠原 京平

    Shopifyの GraphQL Admin API の小ネタです。 Shopifyの顧客総数を取得したい場合のクエリは、いざ探そうと思ってもパッと見つからないのでメモしておきます。 対象読者 Shopify GraphQL Admin API を使ったことがある方 顧客総数を取得するクエリ 2023-07 バージョンから CustomerSegmentMemberConnection に変更があったため、2023-07より前と以降で若干クエリが異なります。 ※ changelog 2023-07以降 { customerSegmentMembers(first: 1, query: "") { totalCount } } 2023-07より前...

  • Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    小笠原 京平

    今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...

    Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する

    小笠原 京平

    今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...

  • Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説

    Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説します

    小笠原 京平

    ShopifyのAdmin APIにはGraphQLを用いたAPIがあります。手軽に試す方法としてGraphiQL (GraphQLではなくGraphiQLなのに注意) というIDEがありますので、今回はShopify GraphiQLの使い方やメリット・デメリットを解説します。 GraphiQLとは GraphQL公式が運営しているオープンソースプロジェクトです。GraphQLをブラウザ上でインタラクティブに操作・実行することができます。 グラフィカル (/ˈɡrafək(ə)l/) と発音します。(graphicalと同じ発音) GraphQLとは GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。 GraphQLはAPI内のデータの完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、APIを長期的に進化させることを容易にし、強力な開発者ツールを可能にします。 引用: GraphQL | A query language for your API Shopify GraphiQLの使い方 Shopify GraphiQLは各ストアにアプリをインストールするだけで使えますが、Shopify Devサイト上でデモを触れるので、まずは触ってみましょう! https://shopify.dev/docs/apps/tools/graphiql-admin-api Workshopをやってみよう! Shopifyが作成した「Learn...

    Shopify Admin API GraphiQLとは? 使い方やメリット・デメリットを解説します

    小笠原 京平

    ShopifyのAdmin APIにはGraphQLを用いたAPIがあります。手軽に試す方法としてGraphiQL (GraphQLではなくGraphiQLなのに注意) というIDEがありますので、今回はShopify GraphiQLの使い方やメリット・デメリットを解説します。 GraphiQLとは GraphQL公式が運営しているオープンソースプロジェクトです。GraphQLをブラウザ上でインタラクティブに操作・実行することができます。 グラフィカル (/ˈɡrafək(ə)l/) と発音します。(graphicalと同じ発音) GraphQLとは GraphQLはAPIのためのクエリ言語であり、既存のデータでクエリを実行するためのランタイムです。 GraphQLはAPI内のデータの完全で理解しやすい説明を提供し、クライアントに必要なものだけを要求する力を与え、APIを長期的に進化させることを容易にし、強力な開発者ツールを可能にします。 引用: GraphQL | A query language for your API Shopify GraphiQLの使い方 Shopify GraphiQLは各ストアにアプリをインストールするだけで使えますが、Shopify Devサイト上でデモを触れるので、まずは触ってみましょう! https://shopify.dev/docs/apps/tools/graphiql-admin-api Workshopをやってみよう! Shopifyが作成した「Learn...

  • ブログ記事 Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPRや対応例など

    Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPR...

    小笠原 京平

    今回はShopifyアプリ開発を始めたときに詰まるポイントの1つ「必須Webhooks」について解説します。実装をしていなかったり、実装が不十分なためにレビューが通らなかった経験をされた方は多いんじゃないでしょうか?レビューで詰まらないためにも、ぜひご確認ください! Webhooksとは? Shopifyの必須Webhooksを説明する前に、Webhooksについて理解しましょう。Webhooksとは、Webアプリケーションと連携するために用いられるイベント通知の仕組みです。Webhooksを使うことで、あるWebアプリケーションで特定のイベントが起きたときに、データを受け取ったり、何かしらの動作をすることが可能になります。 エンジニアにとって身近な例でいうと、GitHubにコードをプッシュしたときに自動でビルドやテストをするときにWebhooksが使われています。 ShopifyのWebhooks そんなWebhooksはShopifyでも使うことができます。Shopifyアプリ開発では、Shopify Admin APIからWebhooksを使うことができます。また、アプリ以外でもShopify管理画面からWebhookを作成することもできます。 ShopifyのWebhooksにはHTTPSのエンドポイントのほか、Amazon EventBridgeやGoogle Cloud Pub/Subといったメッセージングサービスを使うこともできます。購読するイベントやマーチャントによっては瞬間的に大量のWebhooksを処理する必要があるため、スケールさせやすいメッセージングサービスを使ってWebhooksを処理することをおすすめします。 必須Webhooks (Mandatory Webhooks) とは? 必須Webhooksとは、Shopifyアプリを開発するときに必ず実装しなければならない3つのWebhooksのことです。この3つのWebhooksはGDPRに対応するために必要なWebhooksで、EU加盟国に関わらず、すべてのShopifyアプリはGDPRに準拠しなければなりません。必須Webhooksを実装していない場合、アプリレビューで却下されます。 (3つの必須Webhooks以外のWebhooksは任意で実装すればOKです。) また、必須Webhooksの3つはHTTPSのエンドポイントでのみ作成可能です。上述したEventBridgeやPub/Subを利用することはできません。 GDPRとは? GDPR(General Data Protection Regulation:一般データ保護規則)は、ヨーロッパ連合(EU)の個人情報保護法規で、2018年5月25日から施行されています。これは、EU全域での個人情報のプライバシーを保護し、データの取り扱い方に関して個々の人々により多くの制御権を付与するためのものです。 GDPRは、EU市民または居住者の個人データを処理する全ての組織に適用されます。これには、EU内外の組織も含まれ、EUの市民や居住者のデータを処理する場合、世界のどこにその組織があろうともGDPRの規定を守る必要があります。 GDPRの主な目的は、個人が自分の個人データをどのように収集、保存、使用されるのかを知り、そしてその制御をする権利を持つべきであるという考え方を強化し、統一化することです。これは、個人情報の透明性、アクセスの権利、修正の権利、忘れられる権利(データ削除の権利)、データ移行の権利など、いくつかの重要な権利を個々の人々に付与します。 参考: ChatGPT 必須Webhooksの対応例 上記で説明したように、必須WebhooksとはGDPRに準拠するためのWebhooksなので、顧客情報、ストア情報をデータベースなどに保存しているかどうかで対応方法が変わります。...

    Shopifyの必須Webhooks (Mandatory Webhooks)とは? GDPR...

    小笠原 京平

    今回はShopifyアプリ開発を始めたときに詰まるポイントの1つ「必須Webhooks」について解説します。実装をしていなかったり、実装が不十分なためにレビューが通らなかった経験をされた方は多いんじゃないでしょうか?レビューで詰まらないためにも、ぜひご確認ください! Webhooksとは? Shopifyの必須Webhooksを説明する前に、Webhooksについて理解しましょう。Webhooksとは、Webアプリケーションと連携するために用いられるイベント通知の仕組みです。Webhooksを使うことで、あるWebアプリケーションで特定のイベントが起きたときに、データを受け取ったり、何かしらの動作をすることが可能になります。 エンジニアにとって身近な例でいうと、GitHubにコードをプッシュしたときに自動でビルドやテストをするときにWebhooksが使われています。 ShopifyのWebhooks そんなWebhooksはShopifyでも使うことができます。Shopifyアプリ開発では、Shopify Admin APIからWebhooksを使うことができます。また、アプリ以外でもShopify管理画面からWebhookを作成することもできます。 ShopifyのWebhooksにはHTTPSのエンドポイントのほか、Amazon EventBridgeやGoogle Cloud Pub/Subといったメッセージングサービスを使うこともできます。購読するイベントやマーチャントによっては瞬間的に大量のWebhooksを処理する必要があるため、スケールさせやすいメッセージングサービスを使ってWebhooksを処理することをおすすめします。 必須Webhooks (Mandatory Webhooks) とは? 必須Webhooksとは、Shopifyアプリを開発するときに必ず実装しなければならない3つのWebhooksのことです。この3つのWebhooksはGDPRに対応するために必要なWebhooksで、EU加盟国に関わらず、すべてのShopifyアプリはGDPRに準拠しなければなりません。必須Webhooksを実装していない場合、アプリレビューで却下されます。 (3つの必須Webhooks以外のWebhooksは任意で実装すればOKです。) また、必須Webhooksの3つはHTTPSのエンドポイントでのみ作成可能です。上述したEventBridgeやPub/Subを利用することはできません。 GDPRとは? GDPR(General Data Protection Regulation:一般データ保護規則)は、ヨーロッパ連合(EU)の個人情報保護法規で、2018年5月25日から施行されています。これは、EU全域での個人情報のプライバシーを保護し、データの取り扱い方に関して個々の人々により多くの制御権を付与するためのものです。 GDPRは、EU市民または居住者の個人データを処理する全ての組織に適用されます。これには、EU内外の組織も含まれ、EUの市民や居住者のデータを処理する場合、世界のどこにその組織があろうともGDPRの規定を守る必要があります。 GDPRの主な目的は、個人が自分の個人データをどのように収集、保存、使用されるのかを知り、そしてその制御をする権利を持つべきであるという考え方を強化し、統一化することです。これは、個人情報の透明性、アクセスの権利、修正の権利、忘れられる権利(データ削除の権利)、データ移行の権利など、いくつかの重要な権利を個々の人々に付与します。 参考: ChatGPT 必須Webhooksの対応例 上記で説明したように、必須WebhooksとはGDPRに準拠するためのWebhooksなので、顧客情報、ストア情報をデータベースなどに保存しているかどうかで対応方法が変わります。...

1 6

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

掲載情報に関して

掲載している各種情報は、株式会社Tsunが経験および、調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。