Liquid、JavaScriptなどに関する質問
成功
コードを埋め込まれた場所が、数量セレクタの部分ですね。
さらに、隠しテキストのような位置付けのHTMLなので、そちらに設定されても何も変化はないかと思います。
テーマはDawnをお使いでしょうか?
貼っていただいたコード的にDawnだと思いますので、Dawnを前提に回答いたします。
<div class="product__title" {{ block.shopify_attributes }}>
<h1>{{ product.title | escape }}</h1>
<a href="{{ product.url }}" class="product__title">
<h2 class="h1">
{{ product.title | escape }}
</h2>
</a>
</div>
main-product.liquidに上記のコードがあるかと思います。(カスタマイズ状況によってコードは異なります。)
この中の、
<h1>{{ product.title | escape }}</h1>
を、
<h1 style="{% if product.tags contains "レディース" %}color: pink;{% endif %}">{{ product.title | escape }}</h1>
としてみてください。
商品名がpinkになるかと思います。
ご参考まで。
(キュー田辺)
もし、商品名のHTMLが下記であった場合、
<span>商品名</sapn>
下記のようにすることで、文字色を変更することは可能かと思われます。
<span style="{% if product.tags contains "レディース" %}color: pink;{% endif %}">商品名</span>
実用に耐えるコードにしようと思うと下記のようになるかもしれません。
{% 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 %}
<span{% if product_title_mod %} class="{{ product_title_mod }}"{% endif %}>商品名</span>
<style>
.mod-mens {
color: blue;
}
.mod-womens {
color: pink;
}
</style>
上記コードは動作確認をしておりませんので、
あくまでご参考まで。
(キュー田辺)
ご回答ありがとうございます。
main-product.liquidの添付部分に埋め込みましたが変化ありませんでした。
場所あってますかね?
成功
コードを埋め込まれた場所が、数量セレクタの部分ですね。
さらに、隠しテキストのような位置付けのHTMLなので、そちらに設定されても何も変化はないかと思います。
テーマはDawnをお使いでしょうか?
貼っていただいたコード的にDawnだと思いますので、Dawnを前提に回答いたします。
<div class="product__title" {{ block.shopify_attributes }}>
<h1>{{ product.title | escape }}</h1>
<a href="{{ product.url }}" class="product__title">
<h2 class="h1">
{{ product.title | escape }}
</h2>
</a>
</div>
main-product.liquidに上記のコードがあるかと思います。(カスタマイズ状況によってコードは異なります。)
この中の、
<h1>{{ product.title | escape }}</h1>
を、
<h1 style="{% if product.tags contains "レディース" %}color: pink;{% endif %}">{{ product.title | escape }}</h1>
としてみてください。
商品名がpinkになるかと思います。
ご参考まで。
(キュー田辺)
出来ました。
ご丁寧に教えて頂きありがとうございました。
本当に助かりました。
申し訳ございません。
1つ前のページ
https://myshopify.com/collections/ワンピース
の部分の商品名も同様にしたいのですが、
collectionが付いているliquidファイルは全て確認したのですが、
product.titleが見つかりません。
こちらも場所の
ご教授頂けないでしょうか?
商品一覧ページの場合は、
snippets/card_product.liquid
を編集すると良いです。
<h3 class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"{% if card_product.featured_media or settings.card_style == 'card' %} id="title-{{ section_id }}-{{ card_product.id }}"{% endif %}>
<a href="{{ card_product.url }}" class="full-unstyled-link">
{{ card_product.title | escape }}
</a>
</h3>
こちらのコードを編集します。(似たようなコードがいくつかありますので、ご注意ください。<h3>の記述内容や"{{ card_product.title | escape }}"の部分が異なっているのでそちらに注目していただけば見分けがつくかと思います。)
<a href="{{ card_product.url }}" class="full-unstyled-link">
{{ card_product.title | escape }}
</a>
こちらを、
<a href="{{ card_product.url }}" class="full-unstyled-link" style="{% if card_product.tags contains "レディース" %}color: pink;{% endif %}">
{{ card_product.title | escape }}
</a>
にしていただくと、
ご希望の結果になるはずです。
(動作確認はしておりません。)
ご参考まで。
(キュー田辺)
出来ました。
細かくお教え頂き本当にありがとうございました。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025