Hello,
Anyone could help me to reduce space where there is the product price and just after the payment button please!
Would be truly appreciated 
https://www.pilatera.com/collections/frontpage/products/pilates-reformer-pro
Topic summary
A Shopify store owner seeks help reducing excessive vertical spacing between the product price and payment button on their product page.
Solutions Provided:
Two community members offered CSS code solutions:
- Option 1: Target
.product-single__meta .shopify-blockand.gr-btnjs.mt-4elements, setting margins to 0 - Option 2: Adjust
line-heightfor the price element and modify.mt-4margin-top to-1rem
Implementation Steps:
- Navigate to Online Store → Theme → Edit code
- Open theme.css or base.css file
- Paste the provided CSS at the bottom of the file
- Save changes
Both solutions use !important flags to override existing styles. Screenshots were provided showing the problematic spacing and expected results. The issue was successfully resolved, with the original poster expressing gratitude.
Hi @scheli1
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
.product-single__meta .shopify-block {
margin: 0 !important;
}
.gr-btnjs.mt-4 {
margin-top: 0 !important;
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
1 Like
Hello @scheli1
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.
span#ProductPrice-template--24282987528522__main {
line-height: 0px !important;
}
.mt-4, .my-4 {
margin-top: -1rem !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
1 Like
thank you so much !
Happy to help you…!!!