# カラー別にスライダー切り替え **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [July 6, 2022, 3:48am UTC](https://community.shopify.com/t/topic/133125 "2022-07-06T03:48:08Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary 商品ページでカラー選択に応じて画像スライダー（商品画像ギャラリー）を切り替える方法の可否が議題。参考サイトのように色ごとに画像が変わる実装を希望。 ・提案：Shopifyアプリ「Variant Image Automator」で実現可能。テーマによっては制限がある可能性あり。ストアリンクとデモリンクが提示。 ・設定の要点（過去の仕様に基づく）：商品メディアでバリエーション（例：黒/白/赤）ごとに画像をまとまりで並べる。各バリエーションの「featured image（代表画像）」に、そのまとまりの先頭画像を設定。仕様はアプリのアップデートで変わる可能性に言及。 ・代替案：上記の画像配置ルールを守れば、アプリなしのテーマカスタマイズでもバリエーションごとに画像切り替えは可能。 ・用語補足：バリエーション＝色などの選択肢、featured image＝そのバリエーションの代表画像。 ・進展：質問者は提案がニーズに合致したと確認し、感謝。アプリ多用による表示速度低下を懸念し、カスタマイズ案も検討へ。 ・ステータス：解決の方向。最終的な実装方法（アプリ利用かカスタマイズか）は未決。リンクのデモが理解に重要。
**Author:** ![nelle1](https://avatars.discourse-cdn.com/v4/letter/n/85e7bf/32.png) [@nelle1](https://community.shopify.com/u/nelle1)\ **Post date:** [July 6, 2022, 3:48am UTC](https://community.shopify.com/t/topic/133125/1 "2022-07-06T03:48:08Z")
商品ページでカラー選択した際に下記の参考サイトのように、カラー選択別にスライダーの内容を切り替えるような設定はできるものでしょうか。 参考サイトのurlを見ると商品IDので切り替わっているように見えます。お分かりになる方、ご教授いただけると助かります。よろしくお願いします。 参考 [https://jp.urbanoutfitters.com/ja-jp/product/washed-cotton-sheet-set/UO-68901578-000?color=wisteria&size=twin-twin-xl](https://jp.urbanoutfitters.com/ja-jp/product/washed-cotton-sheet-set/UO-68901578-000?color=wisteria&size=twin-twin-xl) ---
**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\ **Post date:** [July 11, 2022, 11:48am UTC](https://community.shopify.com/t/topic/133125/2 "2022-07-11T11:48:27Z")
使用できるテーマに制限があるかもしれませんが、 こちらのアプリで可能かと思います。 [https://apps.shopify.com/variant-image-automator](https://apps.shopify.com/variant-image-automator) デモサイト [https://demo.starapps.studio/products/printed-maxi-dress](https://demo.starapps.studio/products/printed-maxi-dress) 記憶が曖昧で恐縮なのですが、 確か、商品管理画面にて、画像の設定を下記のようにする必要があったはずです。 (1年以上前に確認した際の記憶ですのでアプリのバージョンアップで仕様が変わっているかもしれません。) 1. メディア内にて、バリエーションごとに画像をまとめて、並べる。例えば、黒シャツ1, 黒シャツ2, 黒シャツ3, 白シャツ1, 白シャツ2, 白シャツ3, 赤シャツ1, 赤シャツ2, 赤シャツ3 のようにします。 2. 各バリエーションのfeatured image(バリエーションの代表画像のようなもの) には、黒シャツ1や白シャツ1など、メディア内で各バリエーションの画像のかたまりの先頭に来る画像を設定する。 なお、このルールさえ守れば、アプリを使わず、 自力のカスタマイズで、バリエーションごとに画像を切り替えることも可能です。 ご参考まで。 (キュー田辺) ---
**Author:** ![nelle1](https://avatars.discourse-cdn.com/v4/letter/n/85e7bf/32.png) [@nelle1](https://community.shopify.com/u/nelle1)\ **Post date:** [July 13, 2022, 5:05am UTC](https://community.shopify.com/t/topic/133125/3 "2022-07-13T05:05:20Z")
@Qcoltd キュー田辺様 ご回答ありがとうございます。 探していたアプリはまさにこのような仕様です。 とても参考になり大変助かりました。ありがとうございます！ また、アプリを使わずカスタマイズでも切り替えもできるのですね。 アプリを入れすぎると動作が遅くなる懸念もあるため、検討してみたいと思います。