FROM CACHE - jp_header
解決済

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

Hiroaii
観光客
3 0 0

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

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

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

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

 

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

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

1 件の受理された解決策

さんつ
Shopify Partner
43 14 53

成功

メイン画像に余白を追加する際は、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を調整してみてください。
宜しくお願い致します。

元の投稿で解決策を見る

4件の返信4

Diamond_Team
Shopify Partner
112 14 24

こんにちは

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
Hiroaii
観光客
3 0 0

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

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

さんつ
Shopify Partner
43 14 53

成功

メイン画像に余白を追加する際は、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

ありがとうございます!

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