カラースウォッチが機能しない

[Moe99]

こんにちは。

現在、私の運営しているストア（https://taotte.com/)にて、カラースウォッチが機能しないという不具合が生じています（下記画像のように真っ白になってしまう）。

使用しているテーマは「Impulse」で、問い合わせをしたところ返信がきたのですがいまいちよく分からず・・・。

お詳しい方、ご教授いただけますと幸いです。

[株式会社フルバランス]

Moe99さま

カラースウォッチはテーマ独自のやり方があって難しいですよね。

カラースウォッチ用の画像がうまく読み込めていないように見えますので、
Impulseのドキュメント(https://archetypethemes.co/blogs/impulse/how-do-i-set-up-color-swatches
)を参考に以下３点をご確認いただけますでしょうか？

・画像のファイル形式が.png
・画像のファイル名が英語
・バリエーションの名前と画像ファイルの名前が一致しているか

※ファイル名に関する注意点：
・バリエーションの大文字はファイル名では小文字になります
　例）バリエーション名Green->ファイル名green.png
・バリエーションのスペースはファイル名ではハイフンになります
　例）バリエーション名Heather grey->ファイル名heather-grey.png

もしそれでも解決しない場合は、上記対応済みの旨も添えてベンダーに再度問い合わせいただくのが確実かと存じます。

参考になりましたら幸いです。

株式会社フルバランス　渡邉

[Moe99]

株式会社フルバランス御中

この度は返信が遅くなってしまい、大変失礼いたしました。

カラースウォッチにつきまして詳細をご教授くださり、誠にありがとうございます！

参考とさせていただきます。

[株式会社おいかぜ]

@Moe99 

こんにちは！

カラースウォッチの色表示の指定には二種類方法がございます。

1. カラー名をHTMLカラーコードと合わせる

2. カラー名とassetsフォルダにある色画像（png画像）の名前を合わせる（カラー名.png）

サイトの「カシミヤ入りニットカーディガン」を例に挙げますと、イエローの色指定があると思うのですが

 

これをyellowとすると黄色になるかと思います。（1の方法）

あるいは画像としてassetsフォルダにイエロー.pngをアップロードしてみてください。（2の方法）

解決の手助けとなりましたら幸いです。よろしくお願いします。

[Moe99]

ご丁寧にご返信くださり、誠にありがとうございます。

1. の場合、商品管理ページでカラー名を英語に修正するということでしょうか？

それとも、HTMLの方のカラー名を英語に修正するということでしょうか？

お手数ですがご教授いただけますと幸いです。

[株式会社おいかぜ]

@Moe99 

---

@Moe99 さんは書きました:

1. の場合、商品管理ページでカラー名を英語に修正するということでしょうか？

---

上記 @株式会社フルバランス さまの提示頂いているドキュメント

Impulseのドキュメント(https://archetypethemes.co/blogs/impulse/how-do-i-set-up-color-swatches

---

に「同じ名前の HTML カラー名」と記載ございます通り、商品管理ページのバリアント名を英語に修正する　です。（HTMLカラー名をバリアントに入れるということです）

カラー名は下記等を参考にしてください。（Color nameの列です）

https://itsakura.com/html-color-codes

[Moe99]

詳細を教えてくださいまして誠にありがとうございます。

「コードを編集」ページからHTMLのページに遷移することはできたのですが、カラー名はどこに記載があるのでしょうか？

恐れ入りますが、こちらもご返信いただけますと幸いです。

[株式会社おいかぜ]

@Moe99 

言葉足らずで申し訳ございません。

「コードの編集」を行う必要はございません。

商品の編集を行うと下記のようにオプションを選択できるかと思います。

---

---

このColorの箇所をHTMLカラーコード のいずれかにしてください。

※ 画像の「Heather grey」「Green」となっている箇所がカシミヤ入りニットカーディガン の場合、「ヴァイオレット」「アプリコット」「クリーミーホワイト」「オレンジ」「イエロー」になっているかと思います

[Moe99]

詳細をお伝えくださり、誠にありがとうございました！

ご教授いただいた通りに対処致したく思います。