商品画像の左上に「NEW」というラベルを表示

[サン]

新着商品が入荷した場合に商品画像の左上に「NEW」というラベルを表示させたいのです。

タグで管理したいと思っています。いろいろと調べてやってはみるのですがうまくいきません。

どなたか、ご教示ください。

DAWNを使用しています。

shopify初心者でコードのことはあまりわかっていません。

◾️やってみたのは、

商品タグに　label_newと入れる。

product-card.liquidファイルのcard__innerクラスの上に下記を記述

{% for tag in product_card_product.tags %}
 {%- if tag contains 'label_' -%}
  <div class="card--tag">
   {{ tag | split: 'label_' | limit:1 }}
  </div>
 {%- endif -%}
{% endfor %}

あとはカスタムCSSで装飾。

他にも色々なやり方は試してみましたが、うまくいかず。。。

よろしくお願いいたします。

[Naru_05 · Accepted solution]

サン様
はじめまして。
CSSの細かな調整は必要ですが、商品タグの取得、表示は下記ソースをお試しください。
検証ツールでは「new」の確認は出来ました。

{% for tag in card_product.tags %}
 {%- if tag contains 'label_' -%}
  <div class="card--tag">
   {{ tag | split: 'label_' | limit:1 }}
  </div>
 {%- endif -%}
{% endfor %}

[Naru_05 · Accepted solution]

解決できてよかったです。

サイズを変えたい場合は適宜、 widthとheightを調整してください!

[Naru_05 · Accepted solution]

サン様
はじめまして。
CSSの細かな調整は必要ですが、商品タグの取得、表示は下記ソースをお試しください。
検証ツールでは「new」の確認は出来ました。

{% for tag in card_product.tags %}
 {%- if tag contains 'label_' -%}
  <div class="card--tag">
   {{ tag | split: 'label_' | limit:1 }}
  </div>
 {%- endif -%}
{% endfor %}

[サン]

Naru_05様

ありがとうございます！

NEWを入れることができました。助かりました！！

あと１つ教えていただきたいのですが、カスタムCSSに下記のコードを入れたのですが、

.card--tag {
font-size: 1.2rem;
position: absolute;
top: 0;
left: 0;
color: #333;
background-color: #efdf1d;
padding: 2px 10px;
z-index: 1;
min-width: 60px;
text-align: center;
}
@media only screen and (min-width: 750px) {
.card--tag {
font-size: 1.6rem;
padding: 2px 10px;
min-width: 80px;
}
}

①newの文字とそのバックに入れている黄色の帯を大きくしたいのですが

どこを触ると直せますか？

②ちなみに黄色の帯の形を丸にするには、どこを触ると丸になりますか？

コードは試し試し触るくらいしかわかりません。

よろしくお願いいたします。

[Naru_05]

解決してよかったです。
border-radius: 50% を使用してタグを丸くし、width と height を同じ値にして完全な円形にしています。
一度お試しください。

.card--tag {
  font-size: 1.2rem;
  position: absolute;
  top: 0;
  left: 0;
  color: #333;
  background-color: #efdf1d;
  padding: 10px;
  z-index: 1;
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width: 750px) {
  .card--tag {
    font-size: 1.6rem;
    width: 80px;
    height: 80px;
  }
}

[サン]

なるほど！できました！

ご丁寧にありがとうございました。

嬉しいです。

[Naru_05 · Accepted solution]

解決できてよかったです。

サイズを変えたい場合は適宜、 widthとheightを調整してください!

[サン]

Naru_05　様

先日は解決していただきありがとうございました。すみませんが、追加で教えていただきたいのですが、

今度は同じように「売れています」ラベルを「NEW」ラベルの右横に並べたいのです。

その商品にLabel_sell（例）とタグ付けして、前回教えていただいたコードの下に更に同じコードを入力したら良いのでしょうか？

それとも、教えていただいたコードをいじった方がよろしいのでしょうか？

ご教示くださいませ。

[Naru_05]

サン　様

このような感じはいかがでしょうか。

{% for tag in card_product.tags %}
  {%- if tag == 'label_new' -%}
    <div class="card--tag">
      New
    </div>
  {%- endif -%}
  
  {%- if tag == 'label_sell' -%}
    <div class="card--tag">
      売れています
    </div>
  {%- endif -%}
{% endfor %}

一度ご確認ください!

[サン]

Naru_05　様

ありがとうございます。

やってみます！

[サン]

Naru_05　様

この場合、前回のCSSの下に新たにコードを追加するということでしょうか？

なんだか上手くいきません。わからなくて、すみません。

例えば、下の画像のような帯で左上に並ぶようにするにはどのようにしたらよろしいでしょうか？

「NEW」の文字のところが「売れてます」という表記にしたいです。大きさもこれくらいがいいです。

ご面倒をおかけして申し訳ございません。

ご教示ください。

 

[Naru_05 · Accepted solution]

このようなイメージでしょうか。

横並びにしています。

liquid

{% for tag in card_product.tags %}
    {%- if tag == 'label_new' -%}
      <div class="card--tag new">
        New
      </div>
    {%- endif -%}
    
    {%- if tag == 'label_sell' -%}
      <div class="card--tag sell">
        売れています
      </div>
    {%- endif -%}
  {% endfor %}

css

.card--tag {
    font-size: 1.2rem;
    position: absolute;
    top: 0px;
    color: #333;
    background-color: #efdf1d;
    padding: 10px;
    z-index: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card--tag.new {
    left: 0;
  }
  .card--tag.sell {
    left: 60px;
  }

[サン]

Naru_05 様

ありがとうございます！

CSSはちょっと変えましたが無事に表示できました。

嬉しい限りです。

何度もお答えしていただき感謝いたします。