How do I reduce the top spacing or padding on a Buy Button?

Store Design
1

I have a shopify store but I’m also using the Shopify “Buy Buttons” on a pre-existing site. I’m trying to remove the spacing above the buy buttons. I seem to be able to reduce the spacing by default when I add a QTY value, but not when I use the regular button without the QTY value. Can’t seem to edit the script on the button and can’t seem to find any place in the CSS file to adjust it.

Here’s how it looks:

button spacing.jpg

Looking through the code,

Here’s how it looks when I add the QTY option

QTY button.jpg

And this is how I WANT it to look.

QTY-button-no-spacing.jpg

When I inspect the code on the live website I see this:

.shopify-buy__btn-wrapper {
margin-top: 20px;

}

And that is not present on the button with the QTY displayed. Problem is I cant find that code in Shopify’s editor to set that margin to 0px.

1 Like
2

@Tim_T

Find css/font.css and paste this at the bottom of the file:

.shopify-buy__btn {
    width: 75% !important;
}

.shopify-buy__btn-wrapper {
    margin-top: 10px !important;
}

Thanks!

3

@Tim_T

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

Welcome to the Shopify community! :blush:
Thanks for your good question.

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

4

Here is the URL

http://atiracing.com/products/flexplate/halp.htm

5

It’s arrived in the iframe. So, might be custom CSS won’t work.

6

@Tim_T

You shall not pass!
atiracing.com is not a shopify shop

7

.shopify-buy__btn {> width: 75% !important;> }> > .shopify-buy__btn-wrapper {> margin-top: 10px !important;> }

I tried adding that code to the site asset css, the font file css as well as the css style script on the page, and still no change.

8

atiracing.com is not a shopify shop

Correct. We are using Shopify buttons on the site.