We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

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
37635 3670 12168

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
37635 3670 12168

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
37635 3670 12168

@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 761

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 761

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!