Changing the width of the Add To Cart button in Brooklyn theme

New Member
2 0 1

Hi noam b,

Try this 

#AddToCart--product-template {
 width: 350px; 
}

0 Likes
Tourist
28 0 1

Thank you very much it worked :)

0 Likes
Shopify Partner
2 0 0

Thank you 

0 Likes
New Member
1 0 0

Thank you very much it worked :)

0 Likes
New Member
1 0 1

Thank you it worked for me too, but...

It looks great on desktop, but now the AddToCart button is too big on mobile. It goes off the screen only on the right side and looks unprofessional. Is there a way to make it adjust automatically for mobile? Or to manually set an additional width for only mobile?

1 Like
New Member
2 0 0

Hi ! May I know where can I place this code to change the cart icon size?

#AddToCart--product-template {
width: 350px;
}


@Tay_Tze_Wee wrote:

Hi noam b,

Try this 

#AddToCart--product-template {
 width: 350px; 
}


 

0 Likes
Tourist
21 0 0

if you are looking to change a button on a certain page or collection.

 

Find the button code on that page, like the code on the product.template section <-- just as reference

 

then add this to the end of the code: 

style="height:50px; width: 80px; font-size:22px;"

Full example:

<button type="submit" name="add" id="addToCart-{{ product.variants.first.id }}" class="{{ btn_class }} btn" style="height:50pxwidth:80px; font-size:8px;" > 

 

Change the numbers in height width and font size to affect that one button and not globally all buttons. Just know it will change all buttons on that page for all items that are under that display.

 

0 Likes