FROM CACHE - jp_header

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

解決済
afpky
Shopify Partner
7 0 0

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

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

1 件の受理された解決策
Qcoltd
Shopify Partner
928 370 353

成功

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

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

 

 ご参考まで。

(キュー田辺)

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

元の投稿で解決策を見る

7件の返信7
Qcoltd
Shopify Partner
928 370 353

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

 

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

あくまでご参考まで。

(キュー田辺)

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

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

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

場所あってますかね?

コード埋め込み.PNG

Qcoltd
Shopify Partner
928 370 353

成功

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

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

 

 ご参考まで。

(キュー田辺)

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

出来ました。

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

本当に助かりました。

afpky
Shopify Partner
7 0 0

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

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

zzza.PNG

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

Qcoltd
Shopify Partner
928 370 353

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

 

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>

にしていただくと、

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

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

 

ご参考まで。

(キュー田辺)

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

出来ました。

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