Solved

How to make shop pay button smaller

BBHJ
Excursionist
13 1 5

Hi. I want to make the 'Buy With Shop Pay' button smaller on my product page. The button I'm referring to is in the image below. Also, how do I remove the small arrow in the box?

Screenshot 2024-03-03 at 7.27.27 AM.png

Accepted Solution (1)

PageFly-Henry
Astronaut
986 283 230

This is an accepted solution.

Hi @BBHJ 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save


.shopify-payment-button__button::before {

    display: none !important;

}

svg.qZgSr5RiiBCTAMfQYsty {

    width: 70px !important;

}

.kqsiVA9Jf8LJAbxw8Bau.h7OYsWHrW5495r9beh2n.jjzYeefyWpPZLH9pIgyw.DnvZqPMEvBFbBre5UuP9.size--small {

    max-height: 30px !important;

    min-height: 20px !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

thirtycoders
Shopify Partner
51 11 12

Hi @BBHJ,

Can you provide a link?

Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

PageFly-Henry
Astronaut
986 283 230

This is an accepted solution.

Hi @BBHJ 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save


.shopify-payment-button__button::before {

    display: none !important;

}

svg.qZgSr5RiiBCTAMfQYsty {

    width: 70px !important;

}

.kqsiVA9Jf8LJAbxw8Bau.h7OYsWHrW5495r9beh2n.jjzYeefyWpPZLH9pIgyw.DnvZqPMEvBFbBre5UuP9.size--small {

    max-height: 30px !important;

    min-height: 20px !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.