【Shopify】商品公開で「新着」ラベルを表示

Downテーマでの編集。

card-product.liquid

～～～
{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<!-- 新着ラベルCSS -->
{{ 'new_label.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card
        card--{{ settings.card_style }}
        {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
        {% if extend_height %} card--extend-height{% endif %}
        {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
        {% if horizontal_class %} card--horizontal{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
  
<!-- 新着ラベルを表示 -->
<!--   商品がストアで公開されたときのタイム情報 -->
<!--   コレクションページに表示するのでcard_product.published_at -->
<!--   商品詳細ページに表示するにはproduct.published_at -->
{%- assign published_date = card_product.published_at | date: '%s' -%}
{%- assign current_date = 'now' | date: '%s' -%}
{%- assign passed_days_from_publish = current_date | minus: published_date | divided_by: 86400 -%}
<!-- 商品が公開されて3日以内の場合。”3”は任意の数字に変更可能 -->
{%- if passed_days_from_publish <= 3 -%}
<span class="product__label">NEW</span>
{%- endif -%}

new_label.css

.product__label {
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    padding: 2px 10px;
    width: 100%;
    background: red;
}

商品を下書き⇒公開にした場合商品カードにラベルが表示される。