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

解決済
Hiroaii
観光客
3 0 0

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

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

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

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

 

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

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

0 件の「いいね!」
Diamond_Team
開拓者
64 14 20

こんにちは

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

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
さんつ
Shopify Partner
35 10 49

成功

メイン画像に余白を追加する際は、cssのコードを編集する必要があります。
 
簡単な手順をご紹介します。
例)商品ページのメイン画像幅を95%にし、中央に寄せにする。
 
1.検証ツールで該当するClass名を調べる
  例).product__photo
 
2.そのClassにcssを追記して表示を調整する
  例)

 

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

 

 
3.cssをコピーする
4.オンラインストアのテーマを複製する
5.コードを編集する
6.theme.scss.liquidの最終行に3でコピーしたcssを貼り付けて保存する
7.プレビューで確認する
8.公開するで本番適用する
 
以上となります。
 
例を参考にCSSを調整してみてください。
宜しくお願い致します。
Hiroaii
観光客
3 0 0

ありがとうございます!

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

0 件の「いいね!」
Hiroaii
観光客
3 0 0

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

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

0 件の「いいね!」