商品画像をクリックした際の拡大画像の表示サイズ

日本語 ディスカッション 技術的なQ＆A

Topic summary

テーマDawnの商品画像クリック時に表示される拡大（モーダル）画像のサイズを小さくしたい、または拡大自体を無効化したいという相談。

提案・方法

  • 拡大表示を無効化：Shopifyコミュニティの手順リンクが紹介されたが、Dawnの更新が早いため現在も有効かは未確認。
  • 表示サイズを小さくする（CSS編集）：
    • 対モバイル（狭い幅）：assets/section-main-product.css 約735行目の .product-media-modal__content > * に width: 100% を追加（display: block; height: auto; margin: auto; を維持）。
    • 対デスクトップ（広い幅）：同CSSの約770行目の .product-media-modal__content > * の width を 70%（任意で調整可能）に変更。
  • 注意点：動作未検証の提示であり、Dawnのバージョンや既存カスタマイズによりコード位置・内容が異なる可能性あり。

結果・現状

  • 投稿者は案内どおりの編集で拡大画像のサイズを小さくすることに成功。
  • 問題は実質的に解決。コードスニペット（CSS編集）が理解の中心。
Summarized with AI on February 14. AI used: gpt-5.
1

テーマは[Dawn]を使用しています。

商品画像をクリックした際に、画像が拡大されるのですが、

その拡大された画像の表示サイズを小さく変更したいと思っています。

(もしくは、拡大表示をさせない方法もあるのでしょうか・・・)

「product-media.liquid」で変更可能ではないかと思い、調べているのですが

わかりませんでした。

どなたか教えて頂けますでしょうか。

よろしくお願いします。

2

海外のShopifyコミュニティの投稿ですが、

拡大表示そのものをなくす方法がありました。

https://community.shopify.com/topic/1448547

Dawnのバージョンアップが早いため、

今も上記のカスタマイズが有効か、

は確認しておりません。

なお、

画像を小さくする方法も記載いたします。

(動作確認をしておりませんので、うまくいかない可能性があります。また、お使いのDawnのバージョンやカスタマイズ状況によってコードが異なる場合があります。)

モバイルなど横幅が狭い端末で閲覧した際に画像を小さくしたい場合は、

assets/section-main-product.cssの735行目付近の、

.product-media-modal__content > * {
  display: block;
  height: auto;
  margin: auto;
}

を、下記に変更します。

.product-media-modal__content > * {
  display: block;
  height: auto;
  margin: auto;
  width: 100%;
}

さらに、デスクトップなど横幅が広い端末で閲覧した際に画像を小さくしたい場合は、

assets/section-main-product.cssの770行目付近の、

.product-media-modal__content > * {
    width: 100%;
  }

を、下記に変更します。

.product-media-modal__content > * {
    width: 70%; /* お好みの数値に変更してください。 */
  }

ご参考まで。

(キュー田辺)

2 Likes
3

丁寧な対応ありがとうございました。

無事にサイズを小さくすることができました！

1 Like