Boundlessの商品ページのメイン画像に、余白を設けたい

[Hiroaii]

テーマはBoundlessを使用しています。

商品ページのメイン画像が横幅いっぱいで余白がない仕様になっているのですが

これを商品ページ下部のフォーム・テキストエリアと同様の余白を設けたいです。

その場合、どのようにコードを調整すれば良いでしょうか？

どなたかご教示いただけますと幸いです。

よろしくお願いいたします。

[Diamond_Team]

こんにちは

https://boundless-product-page-template.myshopify.com/products/product-page-template

[さんつ · Accepted solution]

メイン画像に余白を追加する際は、cssのコードを編集する必要があります。

簡単な手順をご紹介します。

例）商品ページのメイン画像幅を95%にし、中央に寄せにする。

１．検証ツールで該当するClass名を調べる

　　例）.product__photo

２．そのClassにcssを追記して表示を調整する

　　例）

.product__photo {
    position: relative;
    width: 95%;
    margin: 0 auto;
    float: none;
}

３．cssをコピーする

４．オンラインストアのテーマを複製する

５．コードを編集する

６．theme.scss.liquidの最終行に３でコピーしたcssを貼り付けて保存する

７．プレビューで確認する

８．公開するで本番適用する

以上となります。

例を参考にCSSを調整してみてください。

宜しくお願い致します。

[Hiroaii]

ありがとうございます！

おかげさまで思った通りの余白を設けられました。

[Hiroaii]

自身でコードを変更することを想定していましたが

こちらのサービスも参考にさせていただきますね。