商品ページのデフォルト画像の設定方法

[nelle1]

下記参考のようなアプリかテーマを使って、商品ページのカラー選択でスライド画像をカラー別切り替える予定です。

なのでサーチ画面等から入った際は、カラーやサイズなど複数項目が選択された状態（スライド画像も切り替わった状態）でページ表示される想定をしていますが、カラーやサイズ等の選択項目を選択されていない状態で商品ページを開くことも可能でものしょうか。またそれ用（デフォルト用）のスライド画像設定をすることは可能でしょうか。

よろしくお願いします。

参考デモサイト

https://demo.starapps.studio/products/printed-maxi-dress

[Qcoltd · Accepted solution]

> カラーやサイズ等の選択項目を選択されていない状態で商品ページを開くことも可能でものしょうか。

可能かと思われます。

それが実現可能なアプリを私は知らないのでご紹介できないですし、

実際のコードを構築するには時間がかかる、かつ、お使いのテーマによって実装内容が変わってくるので、こちらに記載できませんが、

考え方としては下記になるかと思います。

カラーやサイズが選択されている状態、というのはvariantが指定されている状態であり、

URLで表現すると下記になります。

https://demo.starapps.studio/products/printed-maxi-dress?variant=32209409638478

そして、variantが特別指定されていない状態をURLで示すと下記になります。

https://demo.starapps.studio/products/printed-maxi-dress

したがいまして、「?variant=」の有無で、

商品詳細ページの処理を変えることで、

質問者様がおっしゃっている挙動も実現できるはずです。

いくつかハードルがあります。

• Shopifyの標準では、一番最初のvariant(バリエーション)が、「variantが指定されていない」時に選ばれるようになっていますので、その処理をうまく曲げる必要があります。

• 「?variant=」というクエリパラメータの有無を判断する必要があります。しかし、こちらのページなどで、クエリパラメータの取得方法が記載されていますので参考にできるかと思います。https://note.com/hmeta/n/nfa3cc809adb9 。しかし、Shopifyには強力なサーバキャッシュがありますので、JavaScriptで実装した方が良い場合もあります。https://www.slicedbread.agency/blogs/shopify/parsing-query-string-parameters-in-shopify
• variant(バリエーション)ごとに、スライド画像を切り替える処理を自作する必要があるかもしれません。しかし、それは参考に掲載されている、https://apps.shopify.com/variant-swatch-king?locale=ja のアプリのやり方を踏襲すると意外と簡単にできるかもしれません。(商品画像の並び順を工夫する、というやり方だったかと思います。)

> またそれ用（デフォルト用）のスライド画像設定をすることは可能でしょうか。

可能と思われます。

上記のハードルをクリアしていくと、商品画像の一番目をデフォルトとして扱う、ような実装が自然と見えてくるかと思います。

具体的なコードやアプリの紹介ではなく、考え方をお伝えするに留まり恐縮です。

また、実装するにはそれなりに時間がかかりそうです。

場合によっては、希望通りのテーマが販売されている可能性もありますので、

テーマストアを一度ご覧になるのも良いかもしれません。

https://themes.shopify.com/?locale=ja

ご参考まで。

(キュー田辺)

[nelle1]

ご返信遅くなって申し訳ありません。

実装は可能ということ、実装に時間かかる旨、理解でしました。

ご丁寧なご返答、感謝いたします。ありがとうございます。