Shopify themes, liquid, logos, and UX
Hello,
I've been struggling to find the solution online.
I would like to raise my buy button a bit higher for CVR purposes.
Can someone help how to do it? I can't find code online.
Here i want tot move it up a bit
Solved! Go to the solution
This is an accepted solution.
Hey @Agzer
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
product-form.product-form {
margin-top: -20px !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @Agzer ,
Can you please share a preview url so that I can assist you on?
Thank you
Hey @Agzer
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
This is an accepted solution.
Hey @Agzer
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
product-form.product-form {
margin-top: -20px !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This worked! THANK YOU SO MUCH! Couldn't find a solution for a long time! God bless you!
Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
@Agzer Please provide the URL, so that i can check.
Hello, thank you for assistance -
This is store url -
https://trendivo.us/products/babybuddy-protector
Hi @Agzer,
Go to Online Store > Themes then click on Actions > Edit code. In In the code editor, locate your theme's CSS file, you can add CSS rules to adjust the position of the button, especially, to move the button higher, you can add a negative margin to the top of the button. Example of moving the button 20 pixels higher.
/* CSS to move the button higher */
#AddToCart {
margin-top: -20px; /* Adjust the value as needed */
}
/* Additional CSS to maintain layout */
.product-form {
position: relative; /* Ensure the parent container has relative positioning */
top: 20px; /* Adjust this value if needed to maintain layout consistency */
}
This code moves my custom liquid higher and does not move Buy Buttons at all.
Thank you so much for assisting me.
Do you think i pasted it somewhere wrong? I went to base.css
Hello @Agzer
Can you share store URL?
Try this
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.product-form__buttons.product-form__buttons--uppercase {
margin-top: -25px !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hi @Agzer
You can do that by following those steps
<style>
.product .product-form {
margin-top: -12px !important;
}
</style>
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025