商品ページでカラー選択した際に下記の参考サイトのように、カラー選択別にスライダーの内容を切り替えるような設定はできるものでしょうか。
参考サイトのurlを見ると商品IDので切り替わっているように見えます。お分かりになる方、ご教授いただけると助かります。よろしくお願いします。
参考
Topic summary
商品ページでカラー選択に応じて画像スライダー（商品画像ギャラリー）を切り替える方法の可否が議題。参考サイトのように色ごとに画像が変わる実装を希望。
・提案：Shopifyアプリ「Variant Image Automator」で実現可能。テーマによっては制限がある可能性あり。ストアリンクとデモリンクが提示。
・設定の要点（過去の仕様に基づく）：商品メディアでバリエーション（例：黒/白/赤）ごとに画像をまとまりで並べる。各バリエーションの「featured image（代表画像）」に、そのまとまりの先頭画像を設定。仕様はアプリのアップデートで変わる可能性に言及。
・代替案：上記の画像配置ルールを守れば、アプリなしのテーマカスタマイズでもバリエーションごとに画像切り替えは可能。
・用語補足：バリエーション＝色などの選択肢、featured image＝そのバリエーションの代表画像。
・進展：質問者は提案がニーズに合致したと確認し、感謝。アプリ多用による表示速度低下を懸念し、カスタマイズ案も検討へ。
・ステータス：解決の方向。最終的な実装方法（アプリ利用かカスタマイズか）は未決。リンクのデモが理解に重要。
使用できるテーマに制限があるかもしれませんが、
こちらのアプリで可能かと思います。
https://apps.shopify.com/variant-image-automator
デモサイト
https://demo.starapps.studio/products/printed-maxi-dress
記憶が曖昧で恐縮なのですが、
確か、商品管理画面にて、画像の設定を下記のようにする必要があったはずです。
(1年以上前に確認した際の記憶ですのでアプリのバージョンアップで仕様が変わっているかもしれません。)
- メディア内にて、バリエーションごとに画像をまとめて、並べる。例えば、黒シャツ1, 黒シャツ2, 黒シャツ3, 白シャツ1, 白シャツ2, 白シャツ3, 赤シャツ1, 赤シャツ2, 赤シャツ3 のようにします。
- 各バリエーションのfeatured image(バリエーションの代表画像のようなもの) には、黒シャツ1や白シャツ1など、メディア内で各バリエーションの画像のかたまりの先頭に来る画像を設定する。
なお、このルールさえ守れば、アプリを使わず、
自力のカスタマイズで、バリエーションごとに画像を切り替えることも可能です。
ご参考まで。
(キュー田辺)
1 Like
@Qcoltd キュー田辺様
ご回答ありがとうございます。
探していたアプリはまさにこのような仕様です。
とても参考になり大変助かりました。ありがとうございます！
また、アプリを使わずカスタマイズでも切り替えもできるのですね。
アプリを入れすぎると動作が遅くなる懸念もあるため、検討してみたいと思います。
1 Like