What's your biggest current challenge? Have your say in Community Polls along the right column.

mobile "Buy Buttons" size issue

Solved

mobile "Buy Buttons" size issue

JhordanMSUITE
Shopify Partner
135 2 42

Hello, the CTA buttons on product pages are different sizes. All of the buttons on my site have a padding of 14px. When I try to change the size of the Shop Pay button, the padding is black while the button is purple. This is a dynamic button so depending on the customers payment preference, that specific buy button with formulate. Can anyone help make these buttons the same size with a padding of 14px?

https://2d26b3.myshopify.com/products/zz?variant=47134173724968
pw: reishi

 

Thank you!

Screenshot 2024-05-20 at 2.37.01 PM.png

Accepted Solution (1)

TerenceKEANE
Shopify Partner
512 86 79

This is an accepted solution.

Hi!

 

Actually, a unit like 'vh' was used instead of padding.

 

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

<style>



.shopify-payment-button__button {
    height: 6.5vh!important;
}
  
</style>

 

shopify.head.jpg

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 3 (3)

TerenceKEANE
Shopify Partner
512 86 79

This is an accepted solution.

Hi!

 

Actually, a unit like 'vh' was used instead of padding.

 

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.

2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.

 

<style>



.shopify-payment-button__button {
    height: 6.5vh!important;
}
  
</style>

 

shopify.head.jpg

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
JhordanMSUITE
Shopify Partner
135 2 42

Thank you kindly @TerenceKEANE 

TerenceKEANE
Shopify Partner
512 86 79

You are welcome 😉

Let me know if you need any further assistance. Feel free to tag me or send a private message when opening a new topic. If I find time outside of our software and "Shopify  Premium Support" service, I can assist.

Terence.

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites