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
Topic summary
Goal: Move the Buy button higher on the product page to improve CVR (conversion rate).
Key steps and attempts:
- Multiple helpers requested a preview/store URL; the OP shared: https://trendivo.us/products/babybuddy-protector.
- Initial CSS suggestion targeted #AddToCart in base.css with a negative top margin. This did not affect the Buy buttons and instead shifted a custom liquid block.
Working solution:
- Add custom CSS in theme.liquid (either before or after ) targeting the correct selector for the button container:
- .product-form__buttons.product-form__buttons–uppercase { margin-top: -25px !important; }
- Implement via: Online Store > Themes > Edit code > theme.liquid, paste the style block in the specified location.
Outcome:
- The OP confirmed the CSS adjustment worked and raised the Buy button as intended. A result screenshot was shared. No further issues reported.
Status: Resolved with a CSS selector/placement fix; earlier #AddToCart targeting was incorrect for this theme.
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
@Agzer Please provide the URL, so that i can check.
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 */
}
1 Like
Hello @Agzer
Can you share store URL?
https://trendivo.us/products/babybuddy-protector
This is URL.
Hello, thank you for assistance -
This is store url -
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
Try this
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hey @Agzer
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Hi @Agzer
You can do that by following those steps
- Go to Online store > Themes
- Click “…” in the current theme, select Edit code
- Open theme.liquid file, add this code after
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.