Help with Button Misalignment

Nomad1
Tourist
6 0 3

Hello!

 

I've been having an issue with this for a while now. How can I align the "Buy Now" or "Shop with PAY" on the same line as the "Add to Cart" button?

 

Here are two images referring to the misalignment:

misalignment help2.PNGmisalignment help1.PNG

 

 

Thanks!

 

Replies 7 (7)
ZestardTech
Shopify Expert
3359 552 765

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Zworthkey
Shopify Partner
5581 640 1496

@Nomad1 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!


Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
dmwwebartisan
Shopify Partner
10710 2338 3314

@Nomad1 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Nomad1
Tourist
6 0 3

@ZestardTech @Zworthkey  @dmwwebartisan 

 

Thank you very much and I appreciate all the help I can get as this has been persisting for more than a month now!

 

https://nomad-nutrition.myshopify.com/

https://www.nomadnutrition.co/

 

Many thanks!

dmwwebartisan
Shopify Partner
10710 2338 3314

@Nomad1 

Please add the following CSS code to your assets/styles.css bottom of the file.

.purchase-details__buttons.purchase-details__spb--true .shopify-payment-button {
    margin-left: 8px !important;
    max-width: calc(50% - 6px) !important;
    height: inherit !important;
    position: relative !important;
    float: right !important;
    top: -45px !important;
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Nomad1
Tourist
6 0 3

@dmwwebartisan 

Hi, it seems to work just a little bit, the difference is not huge, it moved slightly closer to "Add to  Cart".

I still have a misalignment error.

Also, why does the "More payment options" appear behind the "Buy with ShopPay"?

 

Thanks. Any help is appreciated.

 

 

Nomad1
Tourist
6 0 3

Hi everyone!

 

I've figured it out. I kept code as is and set height to auto. It worked.

Thanks!