Solved

resizing add to cart button on refresh theme, but have issue

Polmond
New Member
5 0 0

Hello shopify community!

I'm basically trying to resize the add to cart button of my store so it's bigger- using this bit of code, inserting it above </head> in the theme.liquid in the backend

<style>
@media (min-width: 1200px){
 .productinfo-wrapper .product-form .product-formbuttons{
    max-width: 50%;
  }
}
</style>

This worked well, and the button was resized for the first product's button. However, for the second product's product page's add to cart button, the button won't change size no matter what I do. It always stays the same size while the first product's button will change if I increase or decrease the max width value

The first product was the first product I ever created on shopify, and the second product's product page was created using a template based off of the first product's page.

could you please help me figure out why the code doesn't resize the second product's add to cart button?

Thank you very much for the time in advance.

 
 
Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1729 481 354

This is an accepted solution.

That's odd.

 

Anyway, you can add this to kind of guarantee it.

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
body .product-form__buttons {
   max-width: 100% !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708857956372.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
1729 481 354

Hey @Polmond,

 

Can you share the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Polmond
New Member
5 0 0

https://admin.shopify.com/store/c426bc-3/themes/137885974740/editor?previewPath=%2Fproducts%2Fgentle...

just a rough draft. here is the second product's product page. as you can see the add to cart button is default size

ThePrimeWeb
Shopify Partner
1729 481 354

Hey @Polmond,

 

It says the product page doesn't exist. Have you saved it?

ThePrimeWeb_0-1708854567532.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Polmond
New Member
5 0 0

whoops sorry, i kept it in draft mode. please check again

ThePrimeWeb
Shopify Partner
1729 481 354

Hey @Polmond,

 

How do you want this resized?

ThePrimeWeb_0-1708856412232.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Polmond
New Member
5 0 0

wait what? did you resize the button for me? thats exactly how i want it to look but it doesnt look like that from my end

 

ThePrimeWeb
Shopify Partner
1729 481 354

This is an accepted solution.

That's odd.

 

Anyway, you can add this to kind of guarantee it.

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
body .product-form__buttons {
   max-width: 100% !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708857956372.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Polmond
New Member
5 0 0

thank you! this worked!