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 | |
58 | |
48 | |
42 | |
42 |
Photo 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, 2023With 2-Factor Authentication being required to use Shopify Payments, we’re here to help yo...
By Imogen Apr 26, 2023