Shop Buy Not Button Smaller than Add to Cart

Store Design
,
1

Hello,

My Buy with Shop/Buy Now button is much smaller than the add to cart button.

How can I make them the same size on both Mobile and Desktop?

flashnick01_0-1732392120042.png
flashnick01_0-1732392120042.png1000Ă—282 13.5 KB

Thank you very much

2

Hi @flashnick01 ,

Thank you for question. To make the “Buy with Shop Pay” button the same size as the “Add to cart” button on both mobile and desktop in Shopify, you can try to following steps to modify the CSS for the button. Here’s how:

1. Inspect the Button Class- Use your browser’s Inspect Tool (right-click the “Buy with Shop” button and select “Inspect”) to identify the button’s CSS class. It might look something like .shopify-payment-button.

2. Edit Your Theme Code1. Log in to your Shopify Admin.

  1. Go to Online Store > Themes > Actions > Edit code.
  2. Open the base.css (or theme.css) file under the Assets folder.

3. Add Custom CSS

At the bottom of the CSS file, add the following code:

/* Match “Buy with Shop” button size to “Add to cart” /
.shopify-payment-button {
width: 100% !important; / Ensures it spans the same width as Add to Cart /
padding: 14px 20px !important; / Adjusts button padding /
font-size: 16px !important; / Matches font size with Add to Cart /
border-radius: 5px; / Adjust this to match the Add to Cart button */
}

/* Align text and elements properly inside the button /
.shopify-payment-button__more-options {
text-align: center;
font-size: 14px; / Adjust for consistency */
}

/* Ensure responsiveness for both Mobile and Desktop */
@media (max-width: 768px) {
.shopify-payment-button {
width: 100% !important;
}
}

4. Save and Test- Save the changes.

  • Refresh your website on both mobile and desktop to ensure the buttons are aligned and equal in size.Notes:
  • You may need to tweak the padding, font-size, and border-radius values to perfectly match the style of your “Add to cart” button.
  • If the buttons are wrapped in a flex container, you might need to set their flex properties to match their alignment.

I hope my answer is helpful!

Best,
Liz.

3

Thank you very much @LizHoang is there a clean version of the code or can I paste it as is with this int here “/* Ensures it spans the same width as Add to Cart */” etc

4

Hi @flashnick01 , the content in the box /* */ is actually just a note, therefore you should not add them in the CSS! To better assist you, can you please share your store URL along with its protection password? Thank you!

5

Hi Liz,

I’m having the exact same issue, I’ve tried the code you provided but it doesn’t seem to be working.
Would you mind taking a look at my site and seeing if you can help at all?

Thanks in advance!

Jack

odsltd.co.uk