How can I adjust margins and spacing on my product page?

Solved

How can I adjust margins and spacing on my product page?

PriyaP
Tourist
4 0 4

Hi Shopify Community!

I'd like to expand the margins on my product page to leave more space on either end, and have the products (3 on each row) shows up more towards the center. 

I'd also like to reduce the amount of space between the header and the product pictures. There is a lot of white space.

I'm sure this requires edits to the code, but I'm not sure how to do that.

Here is the page I'm referring to - https://rentindus.com/collections/our-garments

Would appreciate any help 🙂 Thanks!

Accepted Solution (1)
KetanKumar
Shopify Partner
37133 3648 12061

This is an accepted solution.

@PriyaP 

yes please add this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.collection-content {
    padding-top: 6px;
}
#CollectionAjaxContent .page-width {
    padding: 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 7 (7)

KetanKumar
Shopify Partner
37133 3648 12061

@PriyaP 

sorry for any issue can you please share issue image so i will give you proper solution 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PriyaP
Tourist
4 0 4

@KetanKumar Apologies! I have attached a screenshot. I've circled the areas I'm referring to with red circles. The area at the top is too large, and the areas on the sides is too little.

KetanKumar
Shopify Partner
37133 3648 12061

@PriyaP 

can you please confirm this look fine?

KetanKumar_0-1635915490588.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PriyaP
Tourist
4 0 4

Hi @KetanKumar, apologies - I think I forgot to attach the screenshot in my last message.

Please see this Google doc - https://docs.google.com/document/d/1gVjogd0-bM3xgR4vG_Xxnn2ugW6FBeMCp1Jvjc3_New/edit. I have circled the empty space at the top - I would like to make this space smaller. I have also circled the margins on the side of the page - I would like these to be larger.

Please let me know if that makes sense.

Thank you for your patience!

KetanKumar
Shopify Partner
37133 3648 12061

This is an accepted solution.

@PriyaP 

yes please add this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.collection-content {
    padding-top: 6px;
}
#CollectionAjaxContent .page-width {
    padding: 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PriyaP
Tourist
4 0 4

Thank you so much, @KetanKumar! I appreciate the help. 

KetanKumar
Shopify Partner
37133 3648 12061

@PriyaP 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing