Shopify themes, liquid, logos, and UX
Hello, I am working on my website and would like to have a sub-category within a section. For instance: I have a "Accessories" section, i would like to be able to click that and then see a breakdown of different Accessories Categories to be able to click into and see the products.
Here is a link to my store's collections page: https://entire-home.myshopify.com/collections
As you can see, there is a "Accessories" option, on the same page you can see I have "underpads" "nails" "t-mould" etc, I would like to see these within the "Accessories" section.
Any help or assistance I can get is very much appreciated.
Thank You!
Hey, @EntireHome.
Thanks for reaching out in our Community forum with your question. I am more than happy to provide you with some suggestions to help achieve your desired subset collection feature.
From what you've shared, it sounds like you would like to create a feature subset of collections on a page, is that right? If so, may I ask which theme you are using? If you are using a Shopify theme you can achieve this by editing your theme code. Depending on which Shopify theme you use, you can follow the guide listed in our help documentation: Feature a subset of collections on a page. For context, it will appear like this on your storefront:
If you're going to edit the code of your theme, I highly recommend duplicating your theme first, and learning how to roll back to an older version of your theme. That way, you can reverse the changes if needed. If you don't feel comfortable making these changes, or you are using a third-party theme, you could also consider hiring a Shopify Expert to help you make this customization. I suggest browsing the list of Experts that specialize in theme customizations here.
Or, if you'd prefer a multi-level drop-down like this, an app would be the best route to take. You can check out some great options for this in our Shopify App Store, such as Mega Menu.
Please let me know if you have any questions! In the meantime, your website is looking fantastic. Your store's design is simple, detailed, and easy to navigate. You've worked really hard on your store and it definitely shows. How has everything been going with business so far?
Luna | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Hello! Thanks for the info. I am using the Minimal Theme.
When you click "Shop Now" on the site, it takes you to a new page (ignoring the drop down menu). The Collections page, you'll see "Accessories" as the first option. After Clicking "Accessories" I would like to load to a new page for the sub-categories of "Accessories" such as "Nails" "Adhesives" "Stainers" etc.
You can actually see my sub-categories on The Collections page *see image below*
adhesives, baseboards, nails suppose to be inside of accessories as sub-categories
Most of the themes have a drop-down menu to add subcategories in shopify store. You can check if your theme also has this option by following these steps:
If you could not find the Enable filtering option, then you can add it by editing your theme code. To add the option you can follow the below steps.
Editing your theme.liquid file
<script>
/* Product Tag Filters – Good for any number of filters on any type of collection pages */
var collFilters = jQuery(‘.coll-filter’);
collFilters.change(function() {
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
if (newTags.length) {
var query = newTags.join(‘+’);
window.location.href = jQuery(‘{{ ‘tag’ | link_to_tag: ‘tag’ }}’).attr(‘href’).replace(‘/’ + ‘tag’, ‘/’ + query);
}
else {
{% if collection.handle %}
window.location.href = ‘/collections/{{ collection.handle }}’;
{% elsif collection.products.first.type == collection.title %}
window.location.href = ‘{{ collection.title | url_for_type }}’;
{% elsif collection.products.first.vendor == collection.title %}
window.location.href = ‘{{ collection.title | url_for_vendor }}’;
{% endif %}
}
});
</script>
Add a Drop-down menu to Collection page
To add a drop-down menu, you can follow the following steps. But you can skip these steps if you want to use the radio button.
User | RANK |
---|---|
178 | |
153 | |
72 | |
35 | |
34 |
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