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

Tourist
28 0 1

Hi, iv'e searcheed the net for a way to change the add to cart btton's width and no solution has worked for me.

In a video i saw i was instructed to paste the code 

#AddToCart {
  
  width: 400px;
  
}

in my theme.scss.liquid at the bottom of the 'Hero header' section, but it didn't resize the button. Anyone knows what could be the problem?

1 Like
Tourist
13 0 2

Hey Noam b,

That you can do very easily. All you need to do is find the proper class name by inspecting that add to cart button. In brooklyn theme, we have this class ".btn--secondary" by default for add to cart button.

Best way of finding class name is:

  1. Hover on the Add to Cart button (Chrome, Mozilla, Opera)
  2. Right click and select "Inspect"

You will see the css class name which is applied to the add to cart button. 

Check this:  https://s.nimbus.everhelper.me/share/1113151/o3wkvg7qcfx4iongdiwq

Good luck!

 

Regards

Mahmudul Hassan

Software Engineer, SJ Innovation

(m.hassan@sjinnovation.com)

0 Likes
Tourist
28 0 1

Thank you very much, Iv'e tried pasting the same code but it didn't work

0 Likes
Tourist
13 0 2

Can you provide me the product page link where you have that add to cart button?

0 Likes
Tourist
28 0 1

Sure, here for example

0 Likes
Tourist
13 0 2

Go to your themes/assets folder. You will find timber.scss file. 
At the vary end of the file and add CSS something like this: 

.btn, .btn--secondary {
    width: 250px;
}

Clear your cache and then reload the page. I have tested the output: https://s.nimbus.everhelper.me/share/1113875/d3zqzwwp3o5a2fezrudu

0 Likes
Tourist
28 0 1

Won't that change all of the buttons on the store?

0 Likes
Tourist
13 0 2

Try this class: "btn add-to-cart"

0 Likes
Tourist
28 0 1

:/ It still changes all of the buttons in the store 

0 Likes
Tourist
13 0 2

This inherited class btn add-to-cart is for cart button only. It shouldn't change all buttons.

Can you give me the CSS code you are trying?

0 Likes