Border around buttons - Brooklyn Theme

13 0 7

Hello - I can't seem to figure out how to put a simple border around all my buttons (on all pages) in Brooklyn theme. I want a simple black border/outline (1 px?) around a white button so it pops off a white background. I have very little coding experience, but I've had good experience cutting and pasting code from message boards in the past.... Kind thanks in advance!

1 Like
Shopify Expert
808 67 188

This is an accepted solution.

Here's the approach I take to edit CSS on a site:


1) Use chrome dev tools inspector (on mac it's CMD + Shift + C) to find the ID / class of the element you want to change, in this case your button.


2) If you don't have a custom css file yet, create one by adding an asset custom.scss.liquid, then call it in your theme.liquid file after your theme's css file like this: {{ 'custom.scss.css' | asset_url | stylesheet_tag }}


3) Add the css to that file, example:

.button-class {
  border: 1px solid #000;
  background: #fff;
  color: #000;



Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
13 0 7

Done and done. Exactly what I wanted - thank you so much!


1 Like
New Member
1 0 0


Do you know where to place this code when using MOTION - theme?