Categories and sub-categories

[Anthony_Angelon]

Do you have main categories and sub-categories? Also I would like a list of the categories on my home page if that is available. Everytime I add a new product it starts a new collection, so I don't see how the customers can find same types of products like that. Should be able to have the Collection as the main subject like Outdoor Living and the sub collections like Windchime, Birdhouses, etc., and you should have a list on your home page with all the different main collections that people can click on.

[Maggie_M]

Hey Anthony!

Maggie here, Shopify Guru. 🙂

I can see why this would be confusing. We don't have a way to distinguish between categories and subcategories, but you can create all the collections (i.e. categories) you want, and arrange them in your navigation/menu to appear in a
drop-down structure. If that sounds confusing, please allow me to explain in more detail!

In your post you say that when you add a new product it starts a new collection. It shouldn't be doing this. Perhaps an app could be capable of this, but you usually need to create the collection in the Products > Collections section, and the collections will be either manual (i.e. you are picking and choosing products randomly) or automatic (i.e. based on conditions (rules) you set for the collection). Having organized products and collections is the first step, and really important! I would recommend reading through these docs here: Building Product Collections and Understanding Products and then watching these videos to ensure you have a good sense of how collections are built:

• Add a Manual Collection
• Add an Automated Collection

When you create your collections: Outdoor Living, Birdhouses, Wind Chimes, etc. they are all equal in the Shopify back-end, but when you set up your main menu (under Shopify Admin > Online Store > Navigation) you can "nest" the collections that you consider the subcategories (Birdhouses, Wind Chimes) under the main category (Outdoor Living). This will cause a drop-down effect to happen in the main menu.

Here's a doc that goes into more detail on this and has great visuals: Menu and links, as well as some videos:

• Understanding Drop-Down Menus
• Creating Drop-Down Menus

If you're still running into trouble after going through those resources, let me know. You can also contact our live support which is available 24/7 -- some things are just easier to explain in real time!

- Maggie M | Shopify

[connectmommy]

The youtube videos are not available... 

[TyW]

Hi @connectmommy, 

Thanks for posting! I've updated some of the links in the previous post. 

• Add a Manual Collection
• Add an Automated Collection
• Understanding Drop-Down Menus
• Creating Drop-Down Menus

[Parts4Cabinets]

I'm good with the menus drop downs and everything in between. Now my problem is that once I have my collections and sub-collections I can't have the sub collections thumbnails be shown under the main collection. 

Let's say a customer clicks in one category (collection) and under that collection there are 4 more subcollections grouped and I would like the customer be able to choose which one from there with a thumbnail of the collections of something like that.

[MidnightBrite]

I would like the same thing. I have my nested drop down categories but I want icons on the page where if a customer clicks "clothing" they can see icons on a new page showing "men's" "women's" etc and be able to have pages that follow and further sort such as clicking "clothing" and then "women's" and then "dresses" all using icons or a image as the button, rather than having to use the drop down menu or having all my categories icons on my main page.

[bananabugdesign]

I'm needing the same thing-- I have the menu down-- that's not an issue at all.  

What I need is for example, on my homepage, where I have my "favorites" collection, if I click Photo Gifts, I want customers to go to a page with all of my photo gifts-- But sorted into their sub categories-- so instead of seeing a "dump" of all of the photo gifts, they'd see 4-5 different sub categories-- which doesn't happen by simply having them organized in the menu.  

So, by clicking Photo Gifts-- I'd have access to: 1.  Photo Mugs and Cups 2. Photo Apparel 3. Photo Slates 4. Photo Accessories... Without being able to add sub categories on each individual Collection page, we're not able to have it organized like this.  Which stinks-- on my previous host, I was able to put my sub collections on each "main" category page-- and then it kept everything organized... While Shopify blows the previous host out of the water in most other areas-- this is one MAJOR area where they're losing. 

[selllikeaboss]

Did you guys find out about this issue? I really need to solve these issues as well. Customers cant see anything when they click the main categories on the home page and then they end up thinking there is no product under that category. Sub Categories need to show up as well.

[Kurt_McGarry]

The only thing I have found that works is an app called "Categories Uncomplicated" which allows you to have actual thumbnail sub-categories. (I have no affiliation with them, just helping people out).

You would think something so basic of a sub-category would be a standard feature....

[selllikeaboss]

Thank you very much.i will check that out.Thats actually a very serious problem because people click upper categories and they end up seeing nothing and thinking that there is no products at all.Someone from shopify really should have think about that.thanks again

[claudio4]

Has anyone ever received a clear and technically correct answer from Shopify? I need the same for my store and am shocked that Shopify does nto answer such a simple request.

[ecompro]

Yes, the app makes it easy

[taitery]

I just installed this app, and I cannot for the life of me figure out how to make it work. I have one main "Categories" tab that is the drop down for all other categories. I even tried to create a new tab with a different title to add categories that would show up as icons below, but no go. When I add the block for add subcategories, it creates a "placeholder" that says if that category had any subcategories, they would show up there. But I DOOOO have subcategories. Tons of them. I am about to give up and get my money back. If you have a suggestion, please help.

[michaelthurm]

Hey,

not sure if this is the same topic.

Is there any way to create overviews of a selection of collections.
Its very simple to get all the collections on overview or the products ob multiple collections but i neet the overview about a filtered group of collections 
So i have 25 collections and to make a better navigation i need a first level (Categories) with teasers of 5 collections (Subcategories)

[adi20]

Thanks for the help.

[BlingBella]

YouTube videos are private. How do I access them?

[Sidey]

Hello Maggie

If we are to create categories as collections and all the collections are on same level, when it comes to developing a private custom mobile app, how do you think we can manage categories and sub-categories if there are no levels on categories aka collections. 

In mobile app it won't be easy manually have collections arranged as it would probably be using Shopify API's. 

I hope you understand what I am trying to explain.

Kind Regards,

Sidey

[dan_cashmer]

Hello,

I'm trying to setup subcategories and found this thread.

My question is this...

Are there themes that handle subcategories better?  Or that make them 'easier' to implement?

Thank you

Dan

[FloriaanG]

Dear, 

When i have the collections on my homepage, i want my shoppers to be navigated to that collections page when clicking on the image. 
However, when i click on the image, nothing happens, can you help me here? 

Thank you

Floriaan

[Anthony_Angelon]

Maggie, 

Thank you so much for steering me in the right direction. I was confused that I couldn't get that on the site. Thanks for your fantastic knowledge. I will start setting this up now.

Thank you,

Anthony Angeloni

[Maggie_M]

You're very welcome Anthony!

Let me know if you run into any other issues. 🙂

[bhashu]

https://www.youtube.com/watch?v=ph2-a8Dbio4

Just create collections and add them to main menu. Using drag and drop you can easily create sub categories.

[harmen2]

goal: for your webshop getting menu categories like men clothing women clothign and subcategories men pants men jeans men coats

whereyou can list those products under

If you want a backup of your shopify webshop for if something goes wrong

go to online store -> themes -> select the above theme "actions" -> duplicate

and beneath you get a "copy of *current webshop/theme*" that you can "publish" being a backup of your webshop

for my shopify webshop I used theme "venture"

if you want that theme go to "online store" -> themes -> explore free themes -> venture -> add to theme library

go to venture -> actions -> publish

you can always switch back to former theme

STEP 1: First you have to create the collections of the categories/subcategories you want

For this tutorial I choose the categories 1 men clothing 1.1 men pants and 2 women clothing

so those collections I create

go to "products" -> collections -> create collection

for title fill in the name of category you want like "collection men clothing" -> manual -> save

again -> create collection "collection men pants" -> manual -> save

again -> create collection "collection women clothing" -> manual -> save

STEP 2:

now you have to create the visible menu's of the categories you want

that appear on your webshop, and link them to the collections youve created in step 1:

I choose category menu's:

men clothing

men pants

women clothing

Go to online store -> navigation -> main menu -> add menu item "name: men clothing" "link: men clothing -> collections -> collection men clothing "

again add menu item "name: men pants" "link: men clothing -> collections -> collection men pants"

again add menu item "name: women clothing" "link: men clothing -> collections -> collectio women clothing"

or whatever the name is of the category you want and collection youve created

because "men pants" is a subcategory of category "men clothing"

I drag the "men pants" to the right and then beneath the "men clothing" so it becomes its subcategory

then click save

STEP 3: Now go to your webshop.com

and you can see the menu's you have created

for me "men clothing" "men pants"

and "women clothing"

(NOTE: if you dont like how its structured you can change the theme in online store -> themes

changing the layout of the site

(ive chosen the "venture theme")

STEP 4: but you notice when clicking on the menu's on your webshop that nothing appears,

thats why the next step is to add products to the collections categories,

Go to -> apps -> visit the shopify app store -> search 'oberlo" click on oberlo -> add app

in oberlo go to -> find products -> *search product name of product category you want like "men pants"

-> hover over the products you want -> click add to import list

when you have the products you want go to "import list"

here you cna change the name of the products, I have selected men pants so I make sure each title contains "men pants"

-> then checkmark all and select "import all to store"

then go to shopify -> products -> search the product name like for me "pants"

checkmark all -> more actions -> add to collection -> adding it to collection "collection men pants" -> save

now the men pants you imported from oberlo,

you have added to the collection "collection men pants"

and because in step 2 you have added the collection "collection men pants"

to the menu "men pants"

now go to your webshop.com

select the menu "men pants"

and now it shows up the products youve just imported in step 4

STEP 5:

now basically decide for yourself what categories and subcategories you want

and what products

and follow these steps again

to create your webshop with categories subcategories and there products

[dan_cashmer]

OK, I'm BEYOND confused....  What is 'oberlo' and why do I need an app to add products to my collection?

[FernandoPe]

It's very frustrating indeed. Such a simple feature. Well, since Shopify doesn't have this option, I'm using an app called Categories Uncomplicated. It basically does what I need. However, if anybody has a different approach (with an app), please let me know. Thanks

[Shopena]

I'm trying to figure out this issue as well & it seems like that app may be the only way.

It's really frustrating that now i have to pay $10 a month extra when janky, old, bankrupt Volusion had this feature 6 years ago.

Shopify really does not give enough freedom to do anything on a category (collections) page. I want a promo box, The ability to put the description below the products, display subcategories. SUPER standard stuff but none of it seems possible.

[greg_shields]

@Shopena I feel your pain. We are getting ready to implement a theme called Flex Theme from the Out of the Sandbox developers. I did alot of research to find a theme that had alot of customization features. This seems to be the winning ticket. Food for thought. 

Also I plan on using the app that others have mentioned too. I'll keep you posted on its integration.

[James_Witika]

I can't believe that after all this time Shopify still have not addressed this issue.
I recently created the following solution for my customer - I hope it helps

NOTE: This may require some technical knowledge, so please consider contacting a web developer for assistance if it's outside of your technical capabilities. I just wanted to share this to give others a bit of an idea how I solved this problem WITHOUT using an app with a recurring fee.

Collections (Products > Collections)
I created a collection for each "category" and "subcategory" accordingly
- Category 1

- Subcategory 1.1

- Subcategory 1.2

- Subcategory 1.3

- Category 2

- Subcategory 2.1

etc.

Navigation (Online Store > Navigation)
I then created a navigation menu called "Category" which consisted of all of the "top-level category" collections
Menu: Category
- Category 1 (collection menu item)
- Category 2 (collection menu item)

I also created a navigation menu for each "top-level category" ensuring the name of the "navigation" was identical to the "top-level category" collection name.
Menu: Category 1
- Subcategory 1.1 (collection menu item)
- Subcategory 1.2 (collection menu item)

- Subcategory 1.3 (collection menu item)

Menu: Category 2
- Subcategory 2.1 (collection menu item)

Custom Page Template (Online Store > Edit Code) *** proceed with caution***
I created a basic custom page template called page.shop which consisted of the following:

{
  "sections": {
    "main": {
      "type": "category-list-collections",
      "settings": {
        "title": "Categories",
        "menu": "categories",
        "sort": "alphabetical",
        "image_ratio": "square"
      }
    }
  },
  "order": [
     "main"
  ]
}

I then created a custom section called "category-list-collections.liquid" which was pretty much an exact copy of "main-list-collections.liquid" except I changed the following:

ORIGINAL:

    {%- for collection in collections -%}
      <li class="collection-list__item grid__item">
        {% render 'card-collection', card_collection: collection, media_aspect_ratio: section.settings.image_ratio, columns: 3 %}
      </li>
    {%- endfor -%}

CHANGED:

      {%- for link in linklists.categories.links -%}
          <li class="collection-list__item grid__item">
            {% render 'card-collection', card_collection: link.object, media_aspect_ratio: section.settings.image_ratio, columns: 3 %}
          </li>
      {%- endfor -%}

categories in the first line of code linklists.categories.links is the name of my navigation handle for the menu navigation "categories". The link.object in the render command references the collection object assigned to each menu item in the navigation menu "categories"

This template will handle the shop page which shows the "top-level categories".

Create a new page (Online Store > Pages), give it a name and assign this template. Test to make sure it's only showing you a list of the "top-level category" collections from your "Categories" navigation menu.

Custom Collection Template (Online Store > Edit Code) *** proceed with caution***

I then created a basic custom collection template called collection.category.json with the following code in it:

{
  "sections": {
    "main": {
      "type": "subcategory-list-collections",
      "settings": {
        "sort": "alphabetical",
        "image_ratio": "square"
      }
    }
  },
  "order": [
    "main"
  ]
}

 I then created a custom section called "subcategory-list-collections.liquid" which was an exact copy my newly created section "category-list-collections.liquid" except I changed the following:

ORIGINAL:

{%- for link in linklists.categories.links -%}

CHANGED:

{%- for link in linklists[collection.handle].links -%}

 
This uses the handle of the current "collection" and grabs the navigation menu with the exact same name, and display all the collections inside that navigation menu. This will output the "subcategory" collections for the chosen "top-level category" collection.

NOTE: This is why it's super important that your collection name IS IDENTICAL to your navigation name for each "top-level category".

Update the Collection Template (Products > Collection)

For all "top-level category" collections (Category 1, Category 2) you'll need to edit them and change the "Theme Template" to "category".
NOTE: This template name comes from our file naming convention above "collection.category.json"

Now, when you go to your shop page, you should see Category 1 and Category 2 (as per the "Categories" navigation). When you click on "Category 1" it should load the custom collection template, which should then show Subcategory 1.1, Subcategory 1.2, Subcategory 1.3. When you click on Subcategory 1.1, it should load the products inside Subcategory 1.1.

PS. This solution was designed and tested with two depths of category, but if you had a third level of category (i.e. SubSubcategory 1.1.1, SubSubcategory1.1.2, etc) then you basically follow the same steps above:
- Create a Navigation Menu for each "parent" subcategory (i.e. Subcategory 1.1)
- Set the Theme Template for each "parent" subcategory to "category" (i.e. Subcategory 1.1)

I hope that helps anyone with this problem. Took me a few hours to get my head around some of the liquid logic, but eventually got there. I have no doubt I could improve this solution to only require a single custom section file using some conditional logic around the loops, but for now it's doing the job required.

If you find yourself getting stuck and would like my assistance (for a fee) you are most welcome to get in touch.

[bimkim]

@James_Witika 

Thank you for taking the time to share this. It produces exactly the output that I want for my shop. Your instructions were easy to follow despite my complete lack of coding knowledge. Thanks again for taking the time. Much appreciated!!