【Shopify】商品一覧画面にNEWのラベルのつけ方

【Shopify】商品一覧画面にNEWのラベルのつけ方

こんにちは!
最近ホグワーツレガシーを先行プレイしてウハウハの我が君です。
賛否両論分かれる評価でしたが、神ゲー確定です。
どこが凄いのか説明したいんですが、こういうタイトルに関係ない話をだらだら語りだすブログって超嫌いなんですよね。

今回はこんな感じに商品一覧にNEWや新着商品、期間限定みたいなラベルを付ける方法をお教えします。

使用しているテーマはDawnです。
原型留めてないですけど(笑)

メタフィールドを新規作成

とにかく先にメタフィールドで定義をつくることから始めましょう。
設定からカスタムデータに入り定義します。

画像の説明をしますと
名前は商品情報のページ(商品管理のページの)で何を定義しているのか分かるように設定しましょう。
セールなら”セール”だったり”期間限定”にしたり。

ネームスペースとキーはliquidでコーディングするのに必要な項目です。
新規で登録する際に”custom.”と入っていますが消して自分の好きな感じで定義していいです。
でも分かりやすい名前に定義しておきましょう。
新商品なら"newarrival_〇〇"
セールなら"sale_〇〇"みたいな。

説明は何を定義したものなのかとか、このメタフィールドの使いどころとか明記しておきましょう。

タイプではいくつか用意されていますが、”NEW”や”SALE”のような単語を貼りたいので”単一行のテキスト”にしましょう。
メタフィールドは極めれば、例えばカラーピッカーを表示してお客さんに好みの色を選んでもらったり、弊社のようにデータを送ってもらったり、ラッピングが必要か?の選択をしてもらうことができます。
今後そこもお教えします。

 

コードを編集する

メタフィールドのネームスペースとキーで作成したのを入れ込みます。
ここではコーディングが必要になってきますので頑張っていきましょう!
…といいたいところですがコピペしたらできるようにコードを貼っときます。
スニペットのcard-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内にコピペしてください。


    {%- if card_product.metafields.newarrival_product.tag != blank -%}
    <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
        {{card_product.metafields.newarrival_product.tag }}
    </span>
    {%- endif -%}

 全体のコードです。


<div class="card__content">
    <div class="card__information">
        <h3 class="card__heading" {% if card_product.featured_media==nil and settings.card_style=='standard' %}
            id="title-{{ section_id }}-{{ card_product.id }}" {% endif %}>
            <a href="{{ card_product.url }}" class="full-unstyled-link">
                {{ card_product.title | escape }}
            </a>
        </h3>
    </div>

    <div class="card__badge {{ settings.badge_position }}">
        {%- if card_product.available == false -%}
        <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">
            {{'products.product.sold_out' | t }}
        </span>
        {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

        <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
            {{'products.product.on_sale' | t }}
        </span>
        {%- endif -%}

        {%- if card_product.metafields.newarrival_product.tag != blank -%}
        <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
            {{card_product.metafields.newarrival_product.tag }}
        </span>
        {%- endif -%}
    </div>
</div>

 

 これで表示する準備ができました。

 

商品管理で設定

お疲れ様です。
あとは商品管理で個別の商品ごとに設定するだけです。

商品情報の一番下にメタフィールドが現れるので
ここに”NEW”とか入れてあげれば最初の画像のように表示されます。
いかがでしたか?
うまく表示されていますでしょうか?
もし表示できなーいという方は頑張ってください(笑)

ブログに戻る
  • 【shopify】商品情報のバリエーションを増やす無料神アプリを紹介!

    【shopify】商品情報のバリエーションを増やす無料神アプリを紹介!

    WEBサービス お得情報 サービス

    今回はshopifyの商品情報、バリエーションの数をめちゃくちゃ増やしてくれる無料神アプリをご紹介します。このKing Product Optionsという神アプリです!   必要な機能をどんどん追加していくだけで作れちゃいます! なんと商品情報とかを大幅に拡張してくれる優れものです!shopify標準の商品登録だと確か100パターンも登録できなかったと思います。すみません、忘れました(笑)一応shopifyが2024年冬のバージョンアップで2000もの商品バリエーションを持たせるようにしますってってましたが、日本ではまだまだ先ですし、多分高額Appで売ってくるので期待はやめときましょう…で、どういう方に向いているアプリなのかというと、1つの商品にかなり多くのバリエーション、カスタマイズ性を必要とするお店さんにおすすめできると思います。弊社の商品情報を見てもらえれば分かりやすいかと。   このカスタマイズ性で無料ですので、商品のカスタマイズが必要と思われるお店さんにはとってもおすすめできる神アプリです!

    【shopify】商品情報のバリエーションを増やす無料神アプリを紹介!

    WEBサービス お得情報 サービス

    今回はshopifyの商品情報、バリエーションの数をめちゃくちゃ増やしてくれる無料神アプリをご紹介します。このKing Product Optionsという神アプリです!   必要な機能をどんどん追加していくだけで作れちゃいます! なんと商品情報とかを大幅に拡張してくれる優れものです!shopify標準の商品登録だと確か100パターンも登録できなかったと思います。すみません、忘れました(笑)一応shopifyが2024年冬のバージョンアップで2000もの商品バリエーションを持たせるようにしますってってましたが、日本ではまだまだ先ですし、多分高額Appで売ってくるので期待はやめときましょう…で、どういう方に向いているアプリなのかというと、1つの商品にかなり多くのバリエーション、カスタマイズ性を必要とするお店さんにおすすめできると思います。弊社の商品情報を見てもらえれば分かりやすいかと。   このカスタマイズ性で無料ですので、商品のカスタマイズが必要と思われるお店さんにはとってもおすすめできる神アプリです!

  • 【Adobe】アクリルキーホルダーをつくってみた 

    【Adobe】アクリルキーホルダーをつくってみた 

    Adobe Illustrator Photoshop

    アクリルキーホルダーをつくってみた Adobeイラストレータとフォトショップを使った講座動画になっています。自前でアクリルキーホルダーのデータを作れる方にはおすすめの動画です。ぜひこの動画を見てオリジナルのアクリルキーホルダーを作ってみてください!

    【Adobe】アクリルキーホルダーをつくってみた 

    Adobe Illustrator Photoshop

    アクリルキーホルダーをつくってみた Adobeイラストレータとフォトショップを使った講座動画になっています。自前でアクリルキーホルダーのデータを作れる方にはおすすめの動画です。ぜひこの動画を見てオリジナルのアクリルキーホルダーを作ってみてください!

  • スマホで簡単!アクリルフィギュアの台座をデザイン!

    スマホで簡単!アクリルフィギュアの台座をデザイン!

    Photoshop WEBサービス

    台座のデザインをしてみたいけどアドビのイラストレーターやフォトショップを持っていない…それどころかパソコンさえ持っていない…そんなあなたにスマホで簡単にデザインができる方法をお教えします! Photoshop EXで簡単デザイン! スマホ専用アプリであるPhotoshop EXを使って台座のデザインをしていきます。無料で使えてとっても便利!台座のデザインだけではなく、バナー制作や動画のサムネイルのデザインもできます!まぁ出力できる形式はjpgかpng形式だけなんですけど。動画で分かりやすくしてみました!※音が出るのでお気を付けください。 お使いのブラウザはこの動画に対応していません。

    スマホで簡単!アクリルフィギュアの台座をデザイン!

    Photoshop WEBサービス

    台座のデザインをしてみたいけどアドビのイラストレーターやフォトショップを持っていない…それどころかパソコンさえ持っていない…そんなあなたにスマホで簡単にデザインができる方法をお教えします! Photoshop EXで簡単デザイン! スマホ専用アプリであるPhotoshop EXを使って台座のデザインをしていきます。無料で使えてとっても便利!台座のデザインだけではなく、バナー制作や動画のサムネイルのデザインもできます!まぁ出力できる形式はjpgかpng形式だけなんですけど。動画で分かりやすくしてみました!※音が出るのでお気を付けください。 お使いのブラウザはこの動画に対応していません。

  • 【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    Shopify コーディング

    ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか?このブログを期間中に見ているということは、あなた…ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。一生ついていくから一株ゆずってくれぇ!以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。なぜなら、スライドショーが一新されておしゃれになったからです。しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。なんで? スライドショーの画像にリンクをつける!  前回のようにセクションのslideshow.liquidを編集します。以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。     { "type": "url", "id": "image_link", "label": "Image Link" } そして次にhtmlをコーディングします。以下のコードをいれます。 {% if block.settings.image_link %} <a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item"> {% endif %} {% if block.settings.image_link...

    【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    Shopify コーディング

    ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか?このブログを期間中に見ているということは、あなた…ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。一生ついていくから一株ゆずってくれぇ!以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。なぜなら、スライドショーが一新されておしゃれになったからです。しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。なんで? スライドショーの画像にリンクをつける!  前回のようにセクションのslideshow.liquidを編集します。以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。     { "type": "url", "id": "image_link", "label": "Image Link" } そして次にhtmlをコーディングします。以下のコードをいれます。 {% if block.settings.image_link %} <a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item"> {% endif %} {% if block.settings.image_link...

  • 身バレ防止!匿名での商品の発送の仕方

    身バレ防止!匿名での商品の発送の仕方

    Vtuber WEBサービス お得情報

    Vtuberやイラストレーターさんは自分のグッズを買ってもらった後どうやって発送していますか?まさか自宅住所がわかるように発送していませんか?自宅がばれたくない!そんなあなたに私の叡智を授けましょう…   クロネコメンバーズで匿名発送! クロネコヤマトでクロネコメンバーズに登録すれば匿名で商品を発送することができます!オプション料として100円(税抜き)かかりますが、身を守るという面では安いくらいです。もうグッズの販売価格に入れ込んでしまっていいんじゃないですか?詳しくはクロネコメンバーズQ&Aへ 匿名発送で身を守ろう! 昨今からVtuberに対しての誹謗中傷や傷害事件、ストーカー被害など多くなってきました。ネットリテラシーが薄まる世の中、自分は大丈夫と思っていてもいきなり身に降りかかってくるかもしれません。自宅がばれて近所で張り込まれる可能性だってあります。あなたのファン層が全員善人とは限りません。防げることは多少お金がかかっても行うべきです!っても100円ですからね。しかもクロネコメンバーズ使い勝手いいしおすすめ。

    身バレ防止!匿名での商品の発送の仕方

    Vtuber WEBサービス お得情報

    Vtuberやイラストレーターさんは自分のグッズを買ってもらった後どうやって発送していますか?まさか自宅住所がわかるように発送していませんか?自宅がばれたくない!そんなあなたに私の叡智を授けましょう…   クロネコメンバーズで匿名発送! クロネコヤマトでクロネコメンバーズに登録すれば匿名で商品を発送することができます!オプション料として100円(税抜き)かかりますが、身を守るという面では安いくらいです。もうグッズの販売価格に入れ込んでしまっていいんじゃないですか?詳しくはクロネコメンバーズQ&Aへ 匿名発送で身を守ろう! 昨今からVtuberに対しての誹謗中傷や傷害事件、ストーカー被害など多くなってきました。ネットリテラシーが薄まる世の中、自分は大丈夫と思っていてもいきなり身に降りかかってくるかもしれません。自宅がばれて近所で張り込まれる可能性だってあります。あなたのファン層が全員善人とは限りません。防げることは多少お金がかかっても行うべきです!っても100円ですからね。しかもクロネコメンバーズ使い勝手いいしおすすめ。

  • 配信がもっとぐっと楽になる!スコラボ

    配信がもっとぐっと楽になる!スコラボ

    Vtuber Vtuber素材 WEBサービス お得情報

    配信のためにパソコンを買った!マイクも買った!ミキサーも奮発して買った!あとは配信用の素材を用意して華やかにしよう…ってうわーーーー!やることが多いーーー!と配信初心者は頭を抱えることが多いんじゃないでしょうか?配信者の方との交流があったので、そこの見えない努力ややらなければいけない作業を目の当たりにしいて、大変だなとしみじみ思っていました。今回はそんな時間を割かれる配信面での素材集めの部分を簡略化してくれる神のようなプラットフォームをご紹介します。 素材を選んで設置するだけで簡単スタート! スコラボでは素材を組み合わせて配信画面をデザインすることができます!どうしても自分で作ったり、フリー素材から用意したりとなるとデザインの偏りやクオリティーの担保が難しくなります。例えば、ポップでパリッとした映えるキャラデザのモデルなのに背景がなんか微妙だったり…そうなると全体のデザインがボヤっとなり引き締まらなくなり、世界観が損なわれる可能性が出ます。ですがこのスコラボ、素材のクオリティが高いのです!配信者を際立たせるデザインなので安心して使いたいデザインを選ぶことができます!一つ一つクリエイターがデザインしたものなのでめちゃくちゃおしゃれです!全部使ってみたくなる素材たちばかりです!   配信画面だけでなくサムネイル作成にも! 配信画面を作らないユーザーにも使えるようにサムネイル作成もスコラボで作れます!う~ん…最強だ…       使用可能な素材は4000種類以上! 何がすごいって利用できる素材の数に圧倒されます!4000種類以上の素材が利用できるので何を使おうが迷ってしまいます…ですがちゃんと行う配信目的に沿ってデザインをソートできるので、迷ってしまう時間が生まれません!選べる素材が多いと配信するのが楽しくなりそうですね!     OBSにリンクをして配信開始! OBS側にスコラボで作成されたリンクを「ブラウザ」ソースに紐づけすれば準備OK!誰でも簡単に配信画面を作成して配信できます。     どれだけ使っても使用料0円!? スコラボは無料です。これだけ使えるなら月額制にしたらいいのに…それぐらい使いやすい神webアプリです。   いかがでしたか?4000種類の素材が無料で使えるスコラボ。とにかく神様のようなこちらのサービス使わない手はないでしょう。Vtuberの人だけではなくYoutuberの人にも使えてとってもGood!僕もこれを機にストリーマーデビューしちゃおうかなって考えてみちゃったりなんかしちゃったりしてちなみにスコラボさんから依頼を受けてこのブログ書いているわけではありませんのでご安心ください!(?)とにかくめちゃくちゃ便利で楽しいサイト「スコラボ」さんのご紹介でした!   スコラボ公式サイト

    配信がもっとぐっと楽になる!スコラボ

    Vtuber Vtuber素材 WEBサービス お得情報

    配信のためにパソコンを買った!マイクも買った!ミキサーも奮発して買った!あとは配信用の素材を用意して華やかにしよう…ってうわーーーー!やることが多いーーー!と配信初心者は頭を抱えることが多いんじゃないでしょうか?配信者の方との交流があったので、そこの見えない努力ややらなければいけない作業を目の当たりにしいて、大変だなとしみじみ思っていました。今回はそんな時間を割かれる配信面での素材集めの部分を簡略化してくれる神のようなプラットフォームをご紹介します。 素材を選んで設置するだけで簡単スタート! スコラボでは素材を組み合わせて配信画面をデザインすることができます!どうしても自分で作ったり、フリー素材から用意したりとなるとデザインの偏りやクオリティーの担保が難しくなります。例えば、ポップでパリッとした映えるキャラデザのモデルなのに背景がなんか微妙だったり…そうなると全体のデザインがボヤっとなり引き締まらなくなり、世界観が損なわれる可能性が出ます。ですがこのスコラボ、素材のクオリティが高いのです!配信者を際立たせるデザインなので安心して使いたいデザインを選ぶことができます!一つ一つクリエイターがデザインしたものなのでめちゃくちゃおしゃれです!全部使ってみたくなる素材たちばかりです!   配信画面だけでなくサムネイル作成にも! 配信画面を作らないユーザーにも使えるようにサムネイル作成もスコラボで作れます!う~ん…最強だ…       使用可能な素材は4000種類以上! 何がすごいって利用できる素材の数に圧倒されます!4000種類以上の素材が利用できるので何を使おうが迷ってしまいます…ですがちゃんと行う配信目的に沿ってデザインをソートできるので、迷ってしまう時間が生まれません!選べる素材が多いと配信するのが楽しくなりそうですね!     OBSにリンクをして配信開始! OBS側にスコラボで作成されたリンクを「ブラウザ」ソースに紐づけすれば準備OK!誰でも簡単に配信画面を作成して配信できます。     どれだけ使っても使用料0円!? スコラボは無料です。これだけ使えるなら月額制にしたらいいのに…それぐらい使いやすい神webアプリです。   いかがでしたか?4000種類の素材が無料で使えるスコラボ。とにかく神様のようなこちらのサービス使わない手はないでしょう。Vtuberの人だけではなくYoutuberの人にも使えてとってもGood!僕もこれを機にストリーマーデビューしちゃおうかなって考えてみちゃったりなんかしちゃったりしてちなみにスコラボさんから依頼を受けてこのブログ書いているわけではありませんのでご安心ください!(?)とにかくめちゃくちゃ便利で楽しいサイト「スコラボ」さんのご紹介でした!   スコラボ公式サイト

1 6