FROM CACHE - jp_header

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

Moe99
新規メンバー
5 0 0

こんにちは。

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

スクリーンショット 2022-07-28 15.34.28.png

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

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

8件の返信8

株式会社フルバランス
Shopify Partner
1375 487 623

Moe99さま

 

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

 

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

 

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

 

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

 

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

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


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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
Moe99
新規メンバー
5 0 0

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

 

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

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

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

株式会社おいかぜ
Shopify Partner
84 34 32

@Moe99 

 

こんにちは!

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

 

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

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

 

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

 

Screen Shot 2022-08-01 at 10.10.33.png

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

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

 

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

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp
Moe99
新規メンバー
5 0 0

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

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

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

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

株式会社おいかぜ
Shopify Partner
84 34 32

@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

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp
Moe99
新規メンバー
5 0 0

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

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

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

スクリーンショット 2022-08-01 15.59.41.png

株式会社おいかぜ
Shopify Partner
84 34 32

@Moe99 

 

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

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

 

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



Screen Shot 2022-08-01 at 16.44.08.png

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

 

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

京都・西院に本社を構えるウェブデザイン・グラフィックデザイン制作会社です。
Shopifyストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp
Moe99
新規メンバー
5 0 0

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

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