Hi,
These excess boxes and ticks somehow show up in my filter list. Can I ask if it happens to anyone and how to remove/hide it?
Thank you so much.
1 Like
Hi @viyviy ,
Thank you for reaching out to the Shopify Community!
Please share your store URL here so that we can check and provide a solution to you.
Thanks & Regards,
Ahsan ANC
Hi, the store URL is https://thalassea.com.au/ and the password is “sea2022!”.
Thank you so much for your help.
Hi, the store URL is https://thalassea.com.au/ and the password is “sea2022!”.
Thank you so much for your help.
Hi @viyviy can you confirm you have not made any changes to the collection template file?
Hi, I don’t think I did anything like that.
have you added or deleted any css code recently?
Hi. I’ve been changing CSS quite a few times already and nothing like that happened. It possibly happened after my teammate, who never touched the code, added tags to the products. Don’t know if this will help you figure out the problem but anyway, thank you so much for your help, appreciate it so much
can you come on TeamViewer so I can look at the code and find a possible solution?
did you hide the filters ?
Hi, I am so sorry for the late response as I haven’t worked in the last few days.
My team actually wanted a sub-menu inside of the Jewellery collection instead of a filter so I tried to add HTML as custom liquid to create a sub-menu like that and hid the filter. I haven’t figured out how to link it directly to the tags so I just added the URL that we have from using the filter into the HTML code.
Can I ask if there is any way I can add custom liquid into one collection only instead of all of the collections?
And do you suggest a better way to add the link to the tags instead of putting the filter URL like that?
<html>
<head>
<style>
.sub-col {
text-align:center;
width: 100%;
background: #bebebe;
padding: 0;
margin: 0;
height: fit-content;
position:relative;
}
.sub-col ul {
background: #fff;
list-style:none;
padding:0 10px;
margin: 0;
height: 60px;
}
.sub-col ul li {
display: inline-block;
}
.sub-col ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: fit-content;
line-height: 60px;
}
.sub-col ul li:hover {
background: #fff;
text-decoration-line: underline;
z-index: 100;
}
.sub-col ul li:hover > a{
color:#000;
text-decoration-line: underline;
z-index: 100;
}
.sub-col ul li:hover > ul {
display:block;
z-index: 100;
}
.sub-col ul ul {
background: #fff;
padding:0;
text-align: center;
display:none;
width: 100%;
height: fit-content;
position: absolute;
top: 60px;
left: 0px;
}
</style>
</head>
<body>
<div class="sub-col">
<ul>
<li><a href="#">Collections</a>
<ul>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.collection=Classical+Collection">Classical Collection</a></li>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.collection=Modern+Collection">Modern Collection</a></li>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.collection=The+Summer+Sun+Collection">The Summer Sun Collection</a></li>
</ul>
</li>
<li><a href="#">Finish</a>
<ul>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.materials=Gold">Gold</a></li>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.materials=Gold+plated">Gold Plated</a></li>
<li><a href="#">Fabric</a></li>
<li><a href="#">Stone</a></li>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.materials=Brass">Brass</a></li>
<li><a href="#">Macrame </a></li>
<li><a href="#">Polyamide </a></li>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.materials=Porcelaine">Porcelaine </a></li>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.materials=Resin">Resin</a></li>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.materials=Silver">Silver</a></li>
<li><a href="https://thalassea.com.au/collections/jewellery-1?filter.p.m.custom.materials=Synthetic+leather">Synthetic leathe</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Can’t thank you enough for all your help. Appreciate it so much.
Hi @viyviy you can create a new collection template and add code to it and assign that to a collection. this is not the best way to add filters. you can share some kind of design I will create a liquid code to accomplish that.
Hi. Thank you so much for your help. We definitely don’t want filters there and that was just something I quickly came up with before figuring out the right way to do it. What we wanted to have is a sub-menu where the collection can be separated into different smaller collections (in this case, we used tags to organize and separate them). We are looking for a layout like this, the top menu is the header that we’ve already had, and the menu under “JEWELLERY” is what we want to achieve.
Thank you
Hi @viyviy you want this only for the jewelry section or for every collection? You can share the collection template liquid file code so I can edit it. Please don’t share the code here just put it in a google doc file with editor permission for everyone.
Hi, I want it for the jewelry collection only, not every collection. Can I ask which collection template liquid file I need to share? Because I don’t know liquid and only made any changes to the CSS file so all the liquid files should be at default, I think.
Thank you.