FROM CACHE - jp_header
解決済

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

n-o
訪問者
2 0 1

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

 

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

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

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

 

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

わかりませんでした。

 

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

よろしくお願いします。

 

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 417

成功

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

 

 

ご参考まで。

(キュー田辺)

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 417

成功

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

 

 

ご参考まで。

(キュー田辺)

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

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

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