テーマ「Dawn」でサイトを構築しています。
デフォルトでは、商品ページのメディアに複数の画像を登録すると、１点目は大きく表示されますが、２点目以降は横幅が半分のサイズになって２列に表示されていくと思います。
これを、２点目以降の画像も、１点目の画像と同じ横幅で大きく表示したいのですが、コードのどこをどう編集すればよいのかが探していても良くわかりません。
どなたかお分かりになる方はおられますでしょうか。
何か手掛かりでもご教示いただけますと大変助かります。
何卒よろしくお願い致します。
Topic summary
Dawnテーマの商品ページで、デフォルトでは1枚目の画像は大きく表示されるが、2枚目以降は横幅が半分になり2列表示される仕様について、すべての画像を同じ幅で表示させたいという質問。
解決方法:
CSSコードの編集により変更可能。具体的な手順は以下の通り:
- 管理画面 > オンラインストア > カスタマイズ > コードを編集
- 検索窓で「section-main-product」を入力し、section-main-product.cssを選択
.product--stacked .product__media-itemのCSSコードを検索max-widthとwidthの値をcalc(50% - var(--grid-desktop-horizontal-spacing) / 2)から100%に変更- 保存ボタンをクリック
スクリーンショット付きで詳細な手順が提供され、質問者は解決できたことを報告。
ご質問いただいている、商品ページのメディア画像の2点目以降も1枚目と同じ幅で表示させる件ですが、コード編集画面からCSSを修正することで変更が可能です。
下記変更手順となります。
**1．**管理画面 > オンラインスト > カスタマイズ横の「・・・」 > コードを編集をクリック
**2．**左上の検索窓に「section-main-product」を入力するとファイルが絞り込まれ、section-main-product.cssが絞り込まれますので、section-main-product.cssをクリック
**3．**右側に表示されたソースコードの中から下記を検索
.product--stacked .product__media-item {
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
**4．**3で検索したソースコードを下記コードに変更
.product--stacked .product__media-item {
max-width: 100%;
width: 100%;
}
**5．**右上の保存ボタンをクリック
以上で下記画像の様にメディア画像が1枚目と同じサイズで縦積みで表示されます。
ご参考まで。
(キュー小坂)
ありがとうございます！
教えていただいた方法でできました！