UNIVERSEの商品詳細ページの画像について

質問一覧Category: UNIVERSEUNIVERSEの商品詳細ページの画像について
Cozzycozzy asked 5か月 ago

お世話になります。

UNIVERSEの商品詳細ページの画像についてです。
サムネールの写真がPCでは問題ないのですが、スマホで見るとサイドのマージンがない状態でずれた感じになってしまいます。また商品によっては3つのところで写真が2つしかなかったりすると、横並びの余白が広がってしまいます。

独自CSSで入力してはみましたが、変わりませんでした。すみませんがご指導の方よろしくお願いします。

https://chocolumbus.shopselect.net/items/23770668

4 Answers
BaseadminBaseDesignInfo Staff answered 5か月 ago

ご質問ありがとうございます。

商品ページの画像レイアウト設定が「まとめてギャラリー」の場合、2枚目以降の画像サムネイルはスワイプスライダーになって表示されます。

さらにその状態で、商品画像が2枚しかないにも関わらず「写真サムネイル表示」が「3つ並び」や「4つ並び」になっている場合、どうしてもそのような状態になってしまいます。

商品ごとにページをカスタマイズしていくわけには行かない、ECサイトにおいて、まず最も良い状態としては「できるだけ商品全体で商品画像数を統一し、上記の設定を決める」のがベストですが、解決策としては次のような順でご検討ください。

解決策
まずは「画像レイアウト( OFF:2枚目以降は広いエリアで)」をご検討ください。
この場合、サムネイルは別エリアにて、スワイプスライダーではなく単純な配置でレイアウトされますので、画像数がバラバラでもさほど違和感が出ません。

次に「写真サムネイル表示:2つ並び」をご検討ください。

どうしても今回のような設定がお好みでその状況を避けられない場合、独自CSSで以下のコードをご利用ください。(今回ご相談の点だけを解決することを目的としていますので、様々な条件の組み合わせによっては他の課題が現れるかもしれませんことだけご留意ください。)

.photoThumbs.thumbClm3 ul li,
.photoThumbs.thumbClm4 ul li  {
    width: auto;
}
Cozzycozzy answered 5か月 ago

すみません。レイアウト的にはクライアントの要望でこの形がベストなため、独自CSSで対応してみました。確かに写真と写真のマージンはなくなったものの、一番懸念している全体のマージンが左にズレたままになってしまい困っています。スマホの時だけなのですけど、ターゲット考えるとスマホユーザーが多いため、ご指導よろしくお願いします。

Cozzycozzy answered 5か月 ago

こんな感じです。独自CSSのところはメディアCSSは指定できるんでしょうか??
https://gyazo.com/aa655c4c43a0819da5c9c94acd1cce77?fbclid=IwAR25Sx2LRg0Kl48BeUTuAj5H81zHW_F_pQt2QKo0GrBIOsGDeo6JdqvF7C8

BaseadminBaseDesignInfo Staff replied 5か月 ago

> メディアCSS
というのがブレイクポイントを指定するCSSが記述できるか?ということでしたら、もちろん可能です。

@media screen and (xxx) { }

のように、必要なポイントを指定してマージンを取っていただければ大丈夫です。
ただ沢山の商品画像があるページがどうなるかも合わせて確認しながらCSSを調整して頂く必要はあるかと思います。

Cozzycozzy replied 5か月 ago

@media only screen and (max-width: 480px){
.photoThumbs .thumbClm3 {
margin: 20px ;
}}
でやってみましたがうまくいきません。。。

Cozzycozzy answered 5か月 ago

コメントしたのですけど返答いただけると助かります。

BaseadminBaseDesignInfo Staff replied 5か月 ago

お試し頂きありがとうございます。
こちらの商品数による特定条件での表示について、ケースとしては一般的に考えられるものであるといえるため、テーマ側にて調整対応させていただきました。

テーマアップデートは昨日自動配布されておりますので、一旦「独自CSS」を削除してご確認いただければと思います。
どうぞ宜しくお願いいたします