条件によって商品名などの色を変更したい

[afpky]

例えば、商品Aにレディースのタグが付いていて

その商品Aの商品名の色がピンク色にするといったことは可能でしょうか？

[Qcoltd]

もし、商品名の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>

上記コードは動作確認をしておりませんので、

あくまでご参考まで。

(キュー田辺)

[afpky]

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

main-product.liquidの添付部分に埋め込みましたが変化ありませんでした。

場所あってますかね？

 

[Qcoltd · Accepted solution]

コードを埋め込まれた場所が、数量セレクタの部分ですね。

さらに、隠しテキストのような位置付けの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になるかと思います。

 ご参考まで。

(キュー田辺)

[afpky]

出来ました。

ご丁寧に教えて頂きありがとうございました。

本当に助かりました。

[afpky]

申し訳ございません。
1つ前のページ
https://myshopify.com/collections/ワンピース
の部分の商品名も同様にしたいのですが、

collectionが付いているliquidファイルは全て確認したのですが、
product.titleが見つかりません。
こちらも場所の

 

ご教授頂けないでしょうか？

[Qcoltd]

商品一覧ページの場合は、

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>

にしていただくと、

ご希望の結果になるはずです。

(動作確認はしておりません。)

ご参考まで。

(キュー田辺)

[afpky]

出来ました。

細かくお教え頂き本当にありがとうございました。