例えば、商品Aにレディースのタグが付いていて
その商品Aの商品名の色がピンク色にするといったことは可能でしょうか？
Topic summary
-
目的: Shopify（Dawn）で、特定タグ（例:「レディース」）が付いた商品の商品名の色を変更したい。
-
提案: Liquidでproduct.tagsを条件分岐し、該当時にクラス（例: mod-womens）を付与し、CSSで色を指定する方法（未検証例として提示）。
-
実装（商品詳細）: main-product.liquidの商品タイトル要素（{{ product.title | escape }} を含むh1付近）にスタイル/クラスを追加。最初は数量セレクタ付近の隠し要素に入れて効果が出ず、正しい箇所を案内。pinkで表示されることを確認。
-
実装（商品一覧）: snippets/card_product.liquid の見出し（{{ card_product.title | escape }} を含む）を編集。似たコードが複数あるため該当ブロックを特定するよう注意。ユーザー側で動作確認済み。
-
結果: 商品詳細・コレクション一覧ともに希望どおりの色変更ができ、解決。
-
補足: Liquid＝Shopifyのテンプレート言語。product.tags＝商品のタグ一覧。添付画像は設置箇所確認の参考で、本質には非依存。
もし、商品名のHTMLが下記であった場合、
商品名
下記のようにすることで、文字色を変更することは可能かと思われます。
商品名
実用に耐えるコードにしようと思うと下記のようになるかもしれません。
{% assign product_title_mod = "" %}
{% if product.tags contains "メンズ" %}
{% assign product_title_mod = "mod-mens" %}
{% elsif product.tags contains "レディース" %}
{% assign product_title_mod = "mod-womens" %}
{% endif %}
上記コードは動作確認をしておりませんので、
あくまでご参考まで。
(キュー田辺)
1 Like
コードを埋め込まれた場所が、数量セレクタの部分ですね。
さらに、隠しテキストのような位置付けのHTMLなので、そちらに設定されても何も変化はないかと思います。
テーマはDawnをお使いでしょうか？
貼っていただいたコード的にDawnだと思いますので、Dawnを前提に回答いたします。
# {{ product.title | escape }}
##
{{ product.title | escape }}
main-product.liquidに上記のコードがあるかと思います。(カスタマイズ状況によってコードは異なります。)
この中の、
# {{ product.title | escape }}
を、
# {{ product.title | escape }}
としてみてください。
商品名がpinkになるかと思います。
ご参考まで。
(キュー田辺)
1 Like
出来ました。
ご丁寧に教えて頂きありがとうございました。
本当に助かりました。
申し訳ございません。
1つ前のページ
https://myshopify.com/collections/ワンピース
の部分の商品名も同様にしたいのですが、
collectionが付いているliquidファイルは全て確認したのですが、
product.titleが見つかりません。
こちらも場所の
ご教授頂けないでしょうか？
商品一覧ページの場合は、
snippets/card_product.liquid
を編集すると良いです。
###
{{ card_product.title | escape }}
こちらのコードを編集します。(似たようなコードがいくつかありますので、ご注意ください。
の記述内容や"{{ card_product.title | escape }}"の部分が異なっているのでそちらに注目していただけば見分けがつくかと思います。)
{{ card_product.title | escape }}
こちらを、
{{ card_product.title | escape }}
にしていただくと、
ご希望の結果になるはずです。
(動作確認はしておりません。)
ご参考まで。
(キュー田辺)
1 Like
出来ました。
細かくお教え頂き本当にありがとうございました。