We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Add Padding to Product Page

Solved

Add Padding to Product Page

ctatumt
Tourist
3 0 1

Hi friends! I am looking to add padding between the product image and the add to cart section. The add to cart section seems way too big to me. And then shorten the padding between the product info on the bottom so its a little closer to the images 

https://shopbettersister.com/collections/all-wellness/products/eucalyptus-blossom-lip-body-balm

site password: eghohg

Accepted Solution (1)

Guleria
Shopify Partner
4299 825 1189

This is an accepted solution.

Hello @ctatumt ,

 

I think in you theme product settings there is option available  to manage it.

If not I suggest change the class in media section from span 6 to span 8 and from atc section from span 6 to span 4.

In this way they will auto-adjust.

 

or 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.css file and paste the following code at the bottom:

.product-photos.span-6.auto {
    grid-column: auto/span 7;
}
article.product__section-right.span-6.auto {
    grid-column: auto/span 5;
}
section.section__product-details {
    padding-top: 3px;
}

 

Regards
Guleria

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.

View solution in original post

Replies 4 (4)

Guleria
Shopify Partner
4299 825 1189

This is an accepted solution.

Hello @ctatumt ,

 

I think in you theme product settings there is option available  to manage it.

If not I suggest change the class in media section from span 6 to span 8 and from atc section from span 6 to span 4.

In this way they will auto-adjust.

 

or 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.css file and paste the following code at the bottom:

.product-photos.span-6.auto {
    grid-column: auto/span 7;
}
article.product__section-right.span-6.auto {
    grid-column: auto/span 5;
}
section.section__product-details {
    padding-top: 3px;
}

 

Regards
Guleria

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.
ctatumt
Tourist
3 0 1

I tried adding the code to my theme but it made no changes. Any other suggestions? 

Guleria
Shopify Partner
4299 825 1189

But I can clearly see the changes.

Now media section is larger than atc section and description section is moved up.

 

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.
ctatumt
Tourist
3 0 1

Oh my gosh your totally right! I might have refreshed it too fast before it went through. Thank you you're the best!!!