https://help.stylehatch.com/article/335-product-color-swatches
マニュアルを通りに色名をバリエーションとメタフィールド-colorのところに入れております。
カラースワッチは表示されないです。
テーマカスタマイズ設定では、カラースワッチ表示をＯＮにしております。
原因は何でしょうか。
教えて頂けると助かります。
Topic summary
Shopifyの有料テーマ「District」でカラースワッチが表示されない問題について議論されています。
原因:
- 日本語環境では正常に動作しない可能性が高い
- バリエーション名が日本語に自動翻訳されると、「color」が「色」に変更されるため、カラースウォッチ機能が動作しなくなる
- 表示言語を英語に変更すると正常に動作することが確認されている
解決方法:
以下の2つの方法が提案されています:
- W3Schoolsに記載されている標準CSS色名を使用する
snippets/swatch-colors.liquidにカスタムカラーコードを追加定義する（例：{%- assign swatch_color_aiiro = '#e56183' -%}）
結論:
バリエーション名を「color」に戻すことで、カラースウォッチが表示されるようになったと報告されています。日本語環境での使用には制限があるため、ベンダーへの問い合わせも推奨されています。
@Limue 様
有料のテーマなのでコードまで確認できていないのですが、
結論、日本語ではうまく動かない可能性があります。
https://help.stylehatch.com/article/335-product-color-swatches
こちらのリンクによりますと、
https://www.w3schools.com/cssref/css_colors.php
このページに記載された色名は、自動的にカラースウォッチに反映されるようなのですが、
下図のようにうまくいきません。
ヘルプページに記載の内容が正しいのであれば、最初の2つ、AliceBlueとBlackは、自動的にカラースウォッチになるはずですが、そうなりまりません。
しかし、表示言語をEnglishに変更しますと、下図のようにうまく動作します。
日本語ではうまく動かない可能性が高いので、
ベンダーにお問い合わせいただいた方が良いかと思います。
なお、
https://help.stylehatch.com/article/335-product-color-swatches
こちらのページに記載されているカラースウォッチの表示方法は下記2つでした。
- https://www.w3schools.com/cssref/css_colors.php に記載の名称でカラー名を設定する
- snippets/swatch-colors.liquid に定義を追加する。
2については例えば下記のような記述を追加するようですね。
aiiro(藍色)を追加したい場合:
{%- assign swatch_color_aiiro = '#165e83' -%}
マニュアルを通りに色名をバリエーションとメタフィールド-colorのところに入れております。
とのことですが、
ヘルプページを拝見する限り、
メタフィールドを使用することはなさそうでした。
ご参考まで。
(キュー田辺)
ご連絡ありがとうございます。
ベンダーに問い合わせさせて頂きました。
今回の原因は、
日本語にすると、カラーのバリエーション名は自動的に「色」に変更されてしまいます。
「color」に戻せば、色スワッチが出るようになります。
色々調べて頂き、ありがとうございました。
1 Like