How to customise the filter tags in the collection page of Brooklyn theme

Store Design

Topic summary

Goal: Improve the visual styling of collection filter tags in the Shopify Brooklyn theme (e.g., show tags in boxes; radio buttons or images were requested).

Actions taken:

  • Added custom CSS in Assets > theme.scss.liquid to style tag items with borders, padding, background colors, and margins.
  • Two solutions were provided:
    • Styling with padding/background and active-state color (.tags a, .tag–active a).
    • Box-style tags with borders, padding, and responsive margins via a media query (@media min-width: 769px).
  • A minor typo was corrected by the OP (missing “{” in the media query), with the final working CSS posted.

Key terms:

  • Brooklyn: a Shopify theme.
  • Tag filter: shows product tags as clickable filters on collection pages.
  • theme.scss.liquid: the theme’s stylesheet where CSS changes are made.
  • Media query: CSS technique to adjust styles at specific screen widths.

Outcome:

  • Visual enhancement achieved; tags display as boxed items with suitable spacing and active-state styling.
  • The thread is effectively resolved; a request to mark the solution was made.

Unaddressed:

  • Replacing tags with radio buttons or images was not implemented or detailed.

Note:

  • A link and an image were shared but not essential to the solution.
Summarized with AI on February 27. AI used: gpt-5.
1

Hello experts,

I am using the tag filter available in Brooklyn theme.

I would like to show the tags within a box or as a radio button to make it look nicer.

it would be even better if the tags can be replaced with images.

Pleaase advise how can i do this.

https://meden-perzen.nl/collections/kelim-tapijten

TechExplorer_0-1635280599709.png
TechExplorer_0-1635280599709.png1209Ă—536 74.6 KB

Thanks in advance!

1 Like
2

@TechExplorer

sorry for that issue

yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.tags--collection li {margin: 0 px 5 px ;}
.tags a {padding: 8 px 15 px ; background: #f6f6f6;}
.tag--active a {color: #fff; background: #a56600;}
1 Like
3

Hi @TechExplorer ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.tags--collection li {
	border: 1px solid #1f2021;
    padding: 15px;
}
@media screen and (min-width: 769px)
	.tags--collection li {
		margin-right: 15px;
	}
	.tags--collection li:last-child {
		margin-right: 0px;
	}
}
.tags--collection li {
	margin-bottom: 15px;
}
.tags--collection li:last-child {
	margin-bottom: 0px;
}

Hope it helps!

1 Like
4

Works perfect!

there was a typo(missed { for media).. corrected here

Many thanks for the suggestion!!

.tags–collection li {
border: 1px solid #1f2021;
padding: 15px;
}
@media screen and (min-width: 769px) {
.tags–collection li {
margin-right: 15px;
}
.tags–collection li:last-child {
margin-right: 0px;
}
}
.tags–collection li {
margin-bottom: 15px;
}
.tags–collection li:last-child {
margin-bottom: 0px;
}

5

Many thanks @KetanKumar for the suggestion!!

works well!

1 Like
6

@TechExplorer

its my pleasure to help us

7

Hi @TechExplorer ,

Sorry for the missed. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.