I need help with moving a buy button

Solved

I need help with moving a buy button

Agzer
Tourist
7 0 0

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.

 

Agzer_0-1717485894541.png

Here i want tot move it up a bit

Accepted Solution (1)
Moeed
Shopify Partner
6716 1813 2197

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:

Moeed_0-1717489805450.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 15 (15)

LuffyOnePiece
Shopify Partner
650 93 119

Hi @Agzer ,

 

Can you please share a preview url so that I can assist you on?

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
Agzer
Tourist
7 0 0

Moeed
Shopify Partner
6716 1813 2197

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Agzer
Tourist
7 0 0

Hey, thanks for help!

 

This is my URL - 

https://trendivo.us/products/babybuddy-protector

 

Moeed
Shopify Partner
6716 1813 2197

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:

Moeed_0-1717489805450.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Agzer
Tourist
7 0 0

This worked! THANK YOU SO MUCH! Couldn't find a solution for a long time! God bless you!

Moeed
Shopify Partner
6716 1813 2197

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.

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Rahul_dhiman
Shopify Partner
739 143 150

@Agzer Please provide the URL, so that i can check.

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

Agzer
Tourist
7 0 0

Hello, thank you for assistance -

 

This is store url - 

https://trendivo.us/products/babybuddy-protector

 

JuneN
Shopify Partner
145 6 43

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 */
}
If you find my suggestion helpful, please give it a like or mark it as a solution!
And discover more approaches to:
Streamline invoicing process Boost sales with labels & badges Add social proofs & create FOMO
Or get valuable updates and private deals regarding Shopify here.
Agzer
Tourist
7 0 0

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

niraj_patel
Shopify Partner
2391 516 513

Hello @Agzer 
Can you share store URL?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Agzer
Tourist
7 0 0

Hello,

 

Here's the store URL - thanks for help

 

https://trendivo.us/products/babybuddy-protector

niraj_patel
Shopify Partner
2391 516 513

@Agzer 

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.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Dan-From-Ryviu
Shopify Partner
10868 2143 2277

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 <head> 
<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.