【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>

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

商品管理で設定

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