Dawnテーマでの商品ページでの画像の表示幅とナビゲーション表示について

[ma-wa]

お世話になります。Shopify初心者です。

Dawnテーマを使用しているのですが、商品ページの画像の表示幅とナビゲーションの表示がうまくいかないため、お教えいただけないでしょうか。

上記のような商品ページを

下記のようにしたいのですが、どのようにしたらよろしいでしょうか。

・大きい画像を画面横幅ギリギリまで表示させたい

・ナビゲーションの表示、表示位置

もし、可能ならアイコンをクリックするとその商品ページに登録されている画像一覧が表示されるようにもしたいのすが、可能でしょうか。

ご教授いただきますようお願いいたします。

[Qcoltd]

@ma-wa

すでに解決されているかもしれませんが、ご質問いただいている「大きい画像を画面横幅ギリギリまで表示させたい」については、CSSを追加することでスマホサイズで表示した際の見た目を調整可能ですので下記に調整方法を記載させていただきます。

調整方法

1. 管理画面のテーマからカスタマイズボタンクリック

2. 上部のホームページ部分から 商品 > デフォルトの商品を選択

3. 左メニューの商品情報をクリック

   

4. カスタムCSSに下部CSSを追加し保存

   

@media screen and (max-width: 749px) {
  .product__media-list.slider.slider--mobile {
    scroll-padding-left: 0;
  }
  .product__media-list.slider.slider--mobile .product-media-container.constrain-height.media-fit-contain {
    border: none;
    width: 100vw;
    margin: 0;
  }
  .product__media-list.slider.slider--mobile .product-media-container.constrain-height .media {
    width: 100vw;
  }
  .grid--peek.slider .grid__item {
    width: 100vw;
    margin-left: 0;
  }
}

また、他にご質問いただいていました「ナビゲーションの表示、表示位置」「可能ならアイコンをクリックするとその商品ページに登録されている画像一覧が表示されるようにもしたい」につきましては、Dwanテーマを改修することで対応は可能だと思われます。

テンプレートの改修につきましては有料にはなりますが、改修のご依頼をお受けすることも可能です。
プライベートメッセージ等でご相談いただければと思います。

ご参考まで
(キュー小坂)

[Mirai]

@ma-wa 様、Shopifyコミュニティで質問を投稿して頂き、ありがとうございます。

上記にて小坂様がコード編集方法の詳細を提供していますが、ご自身での編集が難しい場合、Shopifyテーマサポートによるカスタマイズの依頼が可能となっております。Shopify無料テーマをご利用されている販売者様には、６０分間のデザイン相談時間が付与されています。デザインサポートは１５分間単位で計算され、サポートされないカスタマイズなどもございます。

今回は画像の表示幅と、ナビゲーション表示のカスタマイズを希望していますが、弊サポートチームにデザイン相談時間のご利用を依頼して頂きますと、サポートよりテーマサポートの方に依頼を送信します。上記と重複しますが、サポートされないカスタマイズもございます事、予めご了承下さい。

デザイン相談時間のご利用を希望する場合、弊サポートチームにお問い合わせ下さい。カスタマイズの内容を具体的にご教示頂き、参考写真なども添付して頂く事をお願いします。