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

Re: 商品につけたタグをラベルとして表示

解決済

商品につけたタグをラベルとして表示

ec_man
Shopify Partner
19 0 2

テーマDawnで商品一覧の各商品部分にタグをラベル表示したく、card-product.liquidに下記コードを入れましたが表示されません。

 

 

 

{% for tag in product.tags %}
  <span>{{ tag }}</span>
{% endfor %}

 

 

 

商品タグは登録しており、試しに商品詳細ページ(main-product.liquid)に上記コードを入れたら表示されました。

 

どの外部サイトを見ても上記コードで合っていそうなのですが、何故でしょうか。

 

ご回答頂けますと幸いです。

1 件の受理された解決策

Qcoltd
Shopify Partner
1120 453 448

成功

ご質問いただいている、商品一覧でタグを出力したい件ですが、

ご記載いただいておりますタグを下記に修正いただきますと、商品タグを出力することが可能かと思われます。

{% for tag in card_product.tags %}
  <span>{{ tag }}</span>
{% endfor %}


ご参考まで。
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

6件の返信6

Qcoltd
Shopify Partner
1120 453 448

成功

ご質問いただいている、商品一覧でタグを出力したい件ですが、

ご記載いただいておりますタグを下記に修正いただきますと、商品タグを出力することが可能かと思われます。

{% for tag in card_product.tags %}
  <span>{{ tag }}</span>
{% endfor %}


ご参考まで。
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
ec_man
Shopify Partner
19 0 2

商品タグを無事に出力することが出来ました。

 

card-product.liquidファイルではcard_productで取得できるのですね。

ご回答ありがとうございました。

SSHH_09
新規メンバー
4 0 0

申し訳ございません。

{% for tag in card_product.tags %}
<span>{{ tag }}</span>
{% endfor %}

上記、コードを入力してラベルを表示させたいのですが。

どの部分に入れれば良いのか教えていただけないでしょうか。

ec_man
Shopify Partner
19 0 2

テーマDawnのcard-product.liquidに挿入する前提でお伝え致します。

 

画像上にラベル表示させるのか、画像下の部分に表示させるのかによって異なりますが、前者であれば<div class="card__inner>内の<div class="card__content">以下に記載しこのspan要素にclass名を指定してcssでposition: absolute;で位置を指定、後者であれば<div class="card__inner>の兄弟要素の<div class="card__content">以下の記載したい位置に記載ということなります。

 
今回に限らずですが、ブラウザの開発者ツールで表示させたい箇所周辺のタグの構造を理解されると、コードの記載位置がお分かり頂けるかと思います。
SSHH_09
新規メンバー
4 0 0

ご教授いただきありがとうございます。

上手く画像上にラベル表示させるが出来ました。

何度も申し訳ございません。

もう一点質問なのですが、上記

{% for tag in card_product.tags %}
<span>{{ tag }}</span>
{% endfor %}

を入れた場合Label__Newとした場合、Label__Newと表示されます。

Label__NewこのLabel__を表示させずに、Label__と入ったタグのみを画像の上に表示させる事も可能でしょうか?

Done_hm
訪問者
1 0 0

横から失礼します。

上記でラベル表示に成功しました。

文字のカラーをBLACK→WHITEに変更するにはどうしたらよろしいでしょうか?