Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

TechExplorer
Explorer
61 1 20

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

 

Thanks in advance!

Accepted Solution (1)

KetanKumar
Shopify Partner
37409 3659 12113

This is an 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;}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 6 (6)

KetanKumar
Shopify Partner
37409 3659 12113

This is an 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;}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TechExplorer
Explorer
61 1 20

Many thanks @KetanKumar for the suggestion!!

works well!

KetanKumar
Shopify Partner
37409 3659 12113

@TechExplorer 

its my pleasure to help us 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitCommerce
Astronaut
2860 684 754

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
TechExplorer
Explorer
61 1 20

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

LitCommerce
Astronaut
2860 684 754

Hi @TechExplorer,

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!