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;}
its my pleasure to help us
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;
}
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 |
---|---|
64 | |
61 | |
59 | |
48 | |
44 |
Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023