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

[TechExplorer]

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

Thanks in advance!

[KetanKumar · Accepted solution]

@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;}

[LitCommerce]

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!

[TechExplorer]

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;
}

[TechExplorer]

Many thanks @KetanKumar for the suggestion!!

works well!

[KetanKumar]

@TechExplorer 

its my pleasure to help us 

[LitCommerce]

Hi @TechExplorer,

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