FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

サン
Shopify Partner
17 0 3

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

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

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

 

DAWNを使用しています。

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

スクリーンショット-2024-10-03-9.22.38.jpg

 

 

️やってみたのは、

商品タグに 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で装飾。

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

 

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

3 件の受理された解決策

Naru_05
Shopify Partner
64 11 13

成功

サン様
はじめまして。
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
Shopify Partner
64 11 13

成功

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

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

元の投稿で解決策を見る

Naru_05
Shopify Partner
64 11 13

成功

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

横並びにしています。

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;
  }

元の投稿で解決策を見る

11件の返信11

Naru_05
Shopify Partner
64 11 13

成功

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

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

 

サン
Shopify Partner
17 0 3

Naru_05様

 

ありがとうございます!

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

 

あと1つ教えていただきたいのですが、カスタム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
Shopify Partner
64 11 13

 

解決してよかったです。
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;
  }
}

 

サン
Shopify Partner
17 0 3

なるほど!できました!

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

嬉しいです。

Naru_05
Shopify Partner
64 11 13

成功

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

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

サン
Shopify Partner
17 0 3

Naru_05 様

 

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

 

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

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

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

ご教示くださいませ。

 

Naru_05
Shopify Partner
64 11 13

サン 様

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

 

{% 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 %}

 

一度ご確認ください!

サン
Shopify Partner
17 0 3

Naru_05 様

 

ありがとうございます。

やってみます!

 

サン
Shopify Partner
17 0 3

Naru_05 様

 

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

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

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

スクリーンショット-2024-10-03-9.22.38.jpg

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

 

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

ご教示ください。

Naru_05
Shopify Partner
64 11 13

成功

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

横並びにしています。

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;
  }
サン
Shopify Partner
17 0 3

Naru_05 様

 

ありがとうございます!

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

嬉しい限りです。

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