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

日本語 ディスカッション 技術的なQ＆A

Topic summary

商品ページでカラー・サイズ未選択の状態を表示し、デフォルト用のスライド画像を設定できるかが議題。参考デモのように、選択状態での画像切替も想定。

結論：実装は可能。ただしテーマ依存で時間がかかり、具体的なコードや特定アプリの紹介はなし。

アプローチ：URLの「?variant=」クエリパラメータ有無で挙動を分岐。例として「…?variant=ID」が選択済み、「…/products/slug」が未指定。

課題：Shopify標準では未指定時に最初のバリエーションが自動選択されるため、その挙動を変更する必要。クエリパラメータ取得の実装（キャッシュ考慮でJavaScript推奨）も必要。

画像切替：バリエーションごとにスライド画像を切替える処理を用意。Variant Swatch Kingなどの手法（商品画像の並び順を工夫）を参考にすると簡易対応の可能性。

デフォルト画像：上記を整えることで、商品画像の一番目をデフォルトとして扱う設計が自然。

その他：希望に近い挙動を持つテーマがテーマストアにある可能性。リンク（デモ、クエリ解説）は理解の補助に有用。

進捗：質問者は「可能であり時間がかかる」点を理解し感謝を表明。実装案は概念提示に留まり、解決は今後の開発次第で未了。

Summarized with AI on February 9. AI used: gpt-5.
1

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

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

よろしくお願いします。

参考デモサイト

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

2

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

可能かと思われます。

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

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

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

カラーやサイズが選択されている状態、というのは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

ご参考まで。

(キュー田辺)

3

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

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

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

1 Like