FROM CACHE - jp_header

売り場の画像をクリックすると各商品(コレクション)ページ遷移させることができるのか

asuka
新規メンバー
3 0 0
近々立ち上げ予定のスーパーのECサイトなのですが、クライアント様の方から
 
スーパーの各売り場図(青果果物・精肉・魚・惣菜・乳製品等)の各コーナー
をクリックすると商品へ移動するようなコンテンツを設置したい
とのご要望がございました。調べたところImageMapを使う方法で実装できそうだと思い、以下のサイトを参考にPrestigeのカスタマイザー(トップページ)で「カスタムHTML」を使用しながら、テストしてみたところ、PC表示だとできたのですが、モバイル表示ではできませんでした
https://ponhiro.com/imagemap-responsive/
 
必ずしもImageMapで実装する必要もないのですが、どなたかこのあたり見聞があられる方、または別の実装方法について心当たりがあられる方はいらっしゃいますでしょうか?もしよろしければ些細なことでも構いませんので、ご教示・ご助力いただけると幸いです。もしShopifyでは実装できそうにない場合、違うデザインを提案しようとも思っております。
 
1件の返信1
toooru
Shopify Partner
93 52 97

HTML/CSSの知識がある前提になりますが、以下のようなものを応用して、背景画像に画像ボタンを乗せてレスポンシブ対応するように組めば可能です。

https://teratail.com/questions/236470

おそらくですがPCと同じものをスマホでも縮めて表示すると小さくて見づらくなると思いますので、スマホ用に背景画像や配置を全く変えるなど、見た目も調整して組む必要があるかもしれません。