FROM CACHE - jp_header

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

nelle1
Shopify Partner
8 0 1

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

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

よろしくお願いします。

 

参考デモサイト

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

 

1件の返信1
Qcoltd
Shopify Partner
189 83 81

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

 

可能かと思われます。

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

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

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

 

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
https://techlab.q-co.jp/