How to reduce the product bottom spacing ? I already took off everything possible with the customizer and I still want to remove some
Topic summary
A user seeks to reduce excessive bottom spacing on their Shopify product pages after exhausting customizer options. Screenshots show the spacing issues between various page sections.
Initial Solution:
- Custom CSS provided to reduce product page bottom padding:
.page-content--product {
padding-bottom: 50px;
}
Additional Spacing Issues:
The user then requests help reducing spacing between:
- Large image with text box and Related products section
- Related Products and FAQ section
Follow-up Solution:
CSS code provided for product recommendations spacing, but initial implementation failed due to a syntax error—missing closing brace. The corrected code requires adding an extra } above line 13200 to properly close the media query.
Status: Issue appears resolved pending correct CSS implementation. The discussion demonstrates a common theme customization workflow requiring custom CSS beyond built-in settings.
Hi @Jim3 ,
There is no any settings but you can add custom setting for spacing or you can use this custom css :
.page-content--product {
padding-bottom: 50px;
}
1 Like
@Dev_Inflame Thank you !
1 Like
Hi @Jim3 ,
Great to hear the issue has been resolved! If you found my assistance helpful, feel free to reach out anytime if you need further support.
1 Like
@Dev_Inflame I actually need to do the same thing for the next 2 sections. I need to reduce the spacing a bit between Large image with text box and Related products. And also between Related Products and FAQ section. Can you please help me with this as well?
@Jim3 ,
Please add this css :
@media only screen and (min-width: 769px) {
.template-product product-recommendations .index-section {
margin: 50px 0;
}
}
@Jim3 ,
Ohh!!! you made mistake in code 
.
Please add one more } above the line number 13200 .
So your code look like this :
}
@media only screen and (min-width: 769px) {
.template-product product-recommendations .index-section {
margin: 50px 0;
}
}