Shopify商品を目を引くカスタムタグで目立たせたいですか？それなら、このガイドがぴったりです。「セール」「新着」「ベストセラー」などのバッジを使えば、商品をすぐに目立たせることができます。アプリは必要ありません。驚きましたか？この記事では、アプリを使わずにShopify商品バッジを作成する方法をご紹介します。 Shopifyのメタフィールドとシンプルなテーマコード.
このステップバイステップガイドは、コーディングの知識がなくてもご利用いただけます。Shopifyでバッジを追加し、管理パネルからテキストと色を調整する方法も学習できます。最後まで学習すれば、見た目も美しく、読み込みも速い、カラフルでプロフェッショナルなバッジが完成します。Shopifyストアを変革する準備はできましたか？さあ、始めましょう！
バッジは、お客様が主要商品に注目するのに役立ちます。新商品、人気商品、セール商品などを目立たせることができます。
買い物客を誘導し、クリック数を増やします。
例:
衣料品を販売している場合は、新商品に「新着」バッジを付けましょう。お客様はすぐに見つけてくれるでしょう。
Shopifyカスタムバッジを追加すると、ストアの見た目が向上し、コスト削減にもつながります。追加のアプリやスクリプトは必要ありません。Shopify製品にバッジを追加しながら、シンプルさを保つための最適な方法の一つです。
学習内容:
次のセクションでは、簡単なコーディングを使ってカスタムバッジを追加する方法をステップバイステップで解説します。慣れていない方もご安心ください。手順は分かりやすく、コピー＆ペーストするだけで目的の出力が得られます。
メタフィールドには追加の製品詳細が保存されます。
バッジのテキスト用、背景色用、テキスト色用の 3 つを作成します。
手順:
任意の商品を編集してスクロールします メタフィールド入力する準備が整った 3 つのボックスが表示されます。
例：
商品がサマードレスの場合は、
保存してください。
Shopify ではその商品に赤いセールバッジが表示されます。
これが、アプリなしの Shopify 製品バッジが機能する仕組みです。
このステップは簡単です。コードブロックを1つ貼り付けるだけです。
{%、product.metafields.custom.badge_text != 空白 % の場合}
<div class=”custom-badge”
style=”背景色: {{ product.metafields.custom.badge_background_color }};
色: {{ product.metafields.custom.badge_text_color }};”>
{{ product.metafields.custom.badge_text }}
</div>
{% 終了 %}
コードのスクリーンショット:
保存してください。
このコードは、商品にバッジテキストがあるかどうかを確認します。ある場合は、バッジが自動的に表示されます。
例：
メタフィールドに「Sale」を追加すると、このコードで表示されます。コピー＆ペーストするだけで完了です。簡単ですよね？
この方法は、Shopifyのセールバッジ、「新着」など、お好きなテキストに使用できます。アプリを使わずにShopifyの商品バッジを使用する最もシンプルな方法の一つです。
次に、バッジを表示する場所を Shopify に指示します。
{% レンダリング 'product-badges' %}
コードのスクリーンショット:
保存。
次に開く 製品テンプレート.liquid 製品ページでバッジを表示したい場所に同じ行を貼り付けます。
例：
画像の上に貼り付けると、「新着」が画像に直接表示されます。保存して更新してください。
ヒント：
編集する前にテーマを複製しておきましょう。そうすれば、必要に応じて簡単に復元できます。
この設定により、Shopify 製品にバッジをすばやく追加でき、どのテーマでも機能します。
次に、バッジの外観のスタイルを設定します。
CSSファイルを開きます（ベース.css または テーマ.css).
一番下までスクロールしてこのコードを追加します。
.カスタムバッジ{
位置: 絶対;
上: 10px;
左: 10px;
パディング: 5px 10px;
フォントの太さ: 太字;
フォントサイズ: 14px;
境界線の半径: 5px;
zインデックス: 10;
空白: ラップなし;
}
コードのスクリーンショット:
保存。
バッジが各製品画像の左上隅に表示されるようになりました。
例：
各商品に、白い文字で書かれた赤いShopifyセールバッジがはっきりと表示されるようになりました。上部または左側の数字を変更することで、位置を調整できます。
これが、アプリを使わずにShopifyの商品バッジのスタイルを設定する方法です。メインレイアウトを変更する必要すらありません。
さあ、バッジを適用しましょう。
ストアを更新してください。金色のベストセラーバッジが表示されます。
外部ツールなしで美しく機能するカスタム製品バッジの Shopify セットアップが完了しました。
メタフィールドの代わりにタグを使用してバッジを作成することもできます。
商品に「sale」というタグを追加し、先ほどと同じ場所にこのコードを貼り付けます。
{%、product.tags に 'sale' が含まれている場合 %}
<div class="”custom-badge”">販売</div>
{% 終了 %}
コードのスクリーンショット:
スタイルを決めましょう。
.カスタムバッジ{
背景色: #FF0000;
色: #FFFFFF;
}
コードのスクリーンショット:
例：
「セール」タグが付いた商品には、赤いセールバッジが表示されます。タグを外すとバッジは消えます。
このShopifyの手動バッジ設定方法は高速ですが、柔軟性に欠けます。メタフィールドを使用するアプリがなければ、Shopifyバッジとは異なり、商品ごとに色を変更することはできません。
次のセクションでは、エラーを最小限に抑えるための一般的な修正方法をいくつか紹介します。早速見ていきましょう。
バッジが正しく表示されない場合は、これらを確認してください。
バッジがありません
メタフィールド名が完全に一致していることを確認してください（例： バッジテキスト).
バッジの位置
CSS で上と左の値を変更します。
色が表示されない
使用 # カラーコードの前に。
小さな修正を加えると、アプリがなくても Shopify 製品バッジが正しく表示されるようになります。
Shopifyバッジを使えばさらに進化できます ディスカウントレイコーディングは一切不要です。たった2クリックでカスタムバッジが完成します。
例:
これを使ってオファーをさらにカスタマイズする方法についての詳細なガイドがあります パーソナライズされた割引 アプリ。
アプリを使わずにShopify商品バッジを作成する方法を習得しました。コードを書いたり、何かをインストールしたりする必要はありません。
あなた
ストアがよりすっきりと、より速く表示されるようになりました。まずは小さなバッジを1つ追加してテストしてみましょう。小さなバッジでも、買い物客があなたの商品を見る印象を大きく変える可能性があります。この記事がお役に立てば幸いです。Shopifyストアをより良くしたいと考えている他のShopifyマーチャントとシェアしてください。専門家によるヒントをもっと知りたい方は、他のeコマースブログもご覧ください。
バッジのテキストと色のメタフィールドを作成し、テーマに小さな Liquid コード スニペットを貼り付けることで、Shopify にカスタム バッジを追加できます。
はい。CSS を使ってバッジの形状を変更できます。丸型や長方形などです。
「セール」や「割引」などのテキストを含むメタフィールドを作成し、バッジ コードを使用して製品画像に表示します。
信頼バッジの画像をアップロードし、テーマの製品テンプレート ファイルの「カートに追加」ボタンの下に配置できます。
「送料無料」というテキストを含むメタフィールドを追加するか、「free-shipping」などのタグを使用して、バッジ スニペットを使用して表示します。
アプリを使わずにShopifyの商品バッジを使えば実現できます。メタフィールドを設定し、スニペットを1つ貼り付け、CSSでスタイルを設定するだけです。
バッジ スニペットを追加するのと同じように、テーマ セクションでアイコンをアップロードしたり、SVG コードを使用したりすることができます。
はい。バッジは信頼を高め、注目を集め、製品の販売を加速させます。
無料プランから始めるか、14 日間の無料トライアルでプレミアム機能をご利用ください。
30日間返金保証！
日本語 
English 
Français 
Deutsch 
Español 
简体中文 
Italiano