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

[n-o]

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

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

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

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

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

わかりませんでした。

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

よろしくお願いします。

[Qcoltd · Accepted solution]

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

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

https://community.shopify.com/c/shopify-design/how-to-turn-off-zoom-photo-on-product-pages-in-dawn/t...

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%; /* お好みの数値に変更してください。 */
  }

ご参考まで。

(キュー田辺)

[n-o]

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

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