Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
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;}
This is an accepted solution.
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;}
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!
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;
}
its my pleasure to help us
Hi @TechExplorer,
Sorry for the missed. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
User | RANK |
---|---|
182 | |
154 | |
72 | |
35 | |
33 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023