Change style of add to cart button on Brooklyn Theme

Solved
cliff781
Excursionist
42 0 8

Would like to change the style of the add to cart button. Want the button to be blue background color with white text and also want the button wider to fit the screen on mobile view. 

https://visionprotect.store/products/anti-blue-light-glasses

 

0 Likes
PeanutButter
Shopify Partner
330 66 137

To make button have blue background and white text:

  • Open Sections/product-template.liquid and search for btn--secondary-accent (Your can use the search function by doing CTR-F) It should be around line 227
  • Replace btn--secondary-accent with btn--primary-accent and save the file

It should now look like this:

Screen Shot 2021-01-17 at 01.04.44.png

 

 To make the button full-width:

  • Open Assets/theme.scss.liquid and at the end of file add this:

 

.product-single__add-to-cart {
    width: 100%;
}

 

This makes the button look like this:

Screen Shot 2021-01-17 at 01.07.28.png

Please remember to like and accept my answer if it solves your issue

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
cliff781
Excursionist
42 0 8

Thank you the first part changing colour worked perfectly. 

had issue with second part. When i put the code at the bottom of the file to widen the button, it messed the whole site up, looked funny. Any other way? Thank you

0 Likes
PeanutButter
Shopify Partner
330 66 137

I am 100% sure that code is correct.  If you send me your shopify admin url, which is something like https://example.myshopify.com, I can request collaborator access and fix it for you.

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

@cliff781 I added the code to your theme.  The final code I added is the  following:

// Make add to cart button full-width in mobile
.product-single__add-to-cart {
  @include at-query($max, $small) {
    width: 100%;
  }
}

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es