Shopifyのテーマにてカタログを選択すると商品一覧が表示されるのですがすべての商品が画像のサイズがそれぞれ異なっており非常に見栄えが良くないのですが、画像の表示サイズを手間をかけずに自動でそろえる方法は無いのでしょうか？例えば、商品が自動で四角の中に納まるようにするなど・・。
宜しくお願いいたします。
Topic summary
・商品一覧の画像サイズが不揃いで見栄えが悪く、手間をかけず自動で揃える方法を相談。
・提案1：CSSを調整して、縦横比が異なる画像でも想定どおりに表示させる。知見がなければShopify Partner等への依頼を推奨。
・提案2：元画像に余白を追加して同一比率に整える。画像加工のみで対応でき、比較的容易。
・最新の具体策：テーマのassets/custom.cssで該当クラス（grid-view-item__link／grid-view-item__image-container／full-width-link）を確認し、横幅指定を高さ指定へ変更（例：width:300px → height:700x）。横だけの指定は縦が切れる可能性があり、高さ指定のほうが収まりが良い。
・補足：Chrome/Firefoxの開発者ツールで要素を検証し、適用CSSを特定。不慣れならカスタマイズの専門家に相談。
・備考：CSSコード例が理解に重要。解決報告はなく、提案段階で継続中。
1.cssなどを調整して縦横サイズが違っても想定の表示になる様に調整する
→知見がない場合、Shopify Partnerなどにご依頼をされると良いかと思います
2.もとの画像の状態で余白をつけてサイズを揃える
余白をつけることで、縦横比が違う画像でも同じ比率で上げる形です。こちらは画像加工のみで対応可能ですので、
比較的実現しやすいと思います
1 Like
お使いのテーマが分からないのですが、assetsの中のcustom.cssの中で、下記のクラス名を探してみてください。
grid-view-item__link grid-view-item__image-container full-width-link
横方向のみサイズを指定していると思います。
これを縦方向のみのサイズ指定に、変えてみてください。
width:300px;
を
height:700x;
のような感じで、書き換えると良いです。
横方向のみ指定では、縦が見切れてしまうことがあります。
縦を指定した方が、収まりが良いと思います。
chromやfirfoxの開発者ツールを使って、画像を右クリックして表示されるメニューで、調査や要素を調べるのような項目を選択すると、HTMLやCSS を確認できます。
お使いのテーマのクラス名を確認して、試してみてください。
こうした操作が不慣れ場場合は、カスタマイズの相談に応じている方に、ご相談されると良いと思います。