Re: テーマ「Dawn」の商品ページの２点目以降の画像サイズの変更

Hiro24 · ‎12-31-2022

テーマ「Dawn」でサイトを構築しています。

デフォルトでは、商品ページのメディアに複数の画像を登録すると、１点目は大きく表示されますが、２点目以降は横幅が半分のサイズになって２列に表示されていくと思います。

これを、２点目以降の画像も、１点目の画像と同じ横幅で大きく表示したいのですが、コードのどこをどう編集すればよいのかが探していても良くわかりません。

どなたかお分かりになる方はおられますでしょうか。

何か手掛かりでもご教示いただけますと大変助かります。

何卒よろしくお願い致します。

Qcoltd · ‎01-05-2023

ご質問いただいている、商品ページのメディア画像の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枚目と同じサイズで縦積みで表示されます。

ご参考まで。

(キュー小坂)

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

Qcoltd · ‎01-05-2023