FROM CACHE - jp_header
解決済

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

Hiro24
Shopify Partner
9 0 0

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

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

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

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

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

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 417

成功

ご質問いただいている、商品ページのメディア画像の2点目以降も1枚目と同じ幅で表示させる件ですが、コード編集画面からCSSを修正することで変更が可能です。

 

下記変更手順となります。

1.管理画面 > オンラインスト > カスタマイズ横の「・・・」 > コードを編集をクリック

Qcoltd_0-1672914667125.png

 

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枚目と同じサイズで縦積みで表示されます。

 

Qcoltd_1-1672914667036.png

 

ご参考まで。

(キュー小坂)

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 417

成功

ご質問いただいている、商品ページのメディア画像の2点目以降も1枚目と同じ幅で表示させる件ですが、コード編集画面からCSSを修正することで変更が可能です。

 

下記変更手順となります。

1.管理画面 > オンラインスト > カスタマイズ横の「・・・」 > コードを編集をクリック

Qcoltd_0-1672914667125.png

 

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枚目と同じサイズで縦積みで表示されます。

 

Qcoltd_1-1672914667036.png

 

ご参考まで。

(キュー小坂)

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

ありがとうございます!

教えていただいた方法でできました!