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
3927 995 1242

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


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 15 (15)

LuffyOnePiece
Shopify Partner
607 87 105

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
3927 995 1242

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


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Agzer
Tourist
7 0 0

Hey, thanks for help!

 

This is my URL - 

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

 

Moeed
Shopify Partner
3927 995 1242

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


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
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
3927 995 1242

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


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Rahul_dhiman
Shopify Expert
131 23 38

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Agzer
Tourist
7 0 0

Hello, thank you for assistance -

 

This is store url - 

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

 

JuneN
Shopify Partner
97 4 31

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

techlyser_web
Shopify Partner
1687 308 325

Hello @Agzer 
Can you share store URL?

Techlyser || 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

techlyser_web
Shopify Partner
1687 308 325

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

Techlyser || 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
8014 1562 1586

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>

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.