Ecommerce Testing site (CMS menu system)

Hi folks.

A couple of days ago i did write a post regarding the problem with more complex products and the Ecommerce. I was desceibing that it is hard to build a menu system with many options like, Vendor, Brand, categories and more. I have now been playing around with the product and found a way that makes it better, not good but better (looking forward for improvments). I did build i CMS menu system to handle selections, and it’s built in Webflow. It’s a suggestion but i would like to show it for you.

We have one problem that still remains. That is the add to cart button. Since the add to cart button only can be used in the product page the user interface it’s not perfect. With some selections you are forced to use an extra page/extra step before you can add the product to the cart. I know that this will be fixed later by Webflow where you will be able to add to cart from a collection.

Here is the link to my Ecommerce Test site
https://wf-ecom-1.webflow.io/

PS. This site is only a test and playground for me. No styling done for small devices.
If you want this as a clone project pls. let me know, then i have to change all images.

3 Likes

Hi janne,
Would you be able to explain how you setup your CMS Collections to achieve this? I am trying to do this with my own site, but however, I try to think about setting it up I always hit some kinda of limitation e.g. no. of items in a collections, or no. of collections.

Similar to you I want to create a list of products with a set of Main categories and sub categories and create a menu/site that adheres to this.

I know it’s possible to set a Category relationship anything more complex than that just doesn’t seem possible? I realise this post is quite old, so I’m hoping you’ve found a better workaround in 2020. Many thanks in advance.

Tim

Hi take a look att Excellent Skin & Hair - Webshop and tell me If that menu system works for you

Take a look at the nav bar.

Hi Janne,
Thanks for the quick reply. Nice site, it’s not quite what I wanted, I am trying to achieve another set of categories so it would be [ Varumarke > Esse> Another category > Product ] if that makes sense ?

Thanks
Tim

Im not with you, can you explain

Hi Janne.
Let me see if I can explain another way.
I have a collection of products. each sit within a category and a subcategory.

For example:
Product: Fitness Top A
Is in Subcategory of: Fitness
Which is in a category of Clothing
Which is in the overall collection of ‘Products’

When I display my products I want to be able to show customers items depending on which category they select, For instance the option of Fitness, or Clothing.

Right now in webflow, I can only see a way to build a CMS collection relationship betweeen Products and a category of Clothing. I’m trying to find a way to add another relationship to Clothing - I guess another way to explain it would be a nested collection within a nested collection which this functionality isnt possible currently.

Did you look at my menu option “Produktkaegorier”. It’s a 2 level option, level 1 is brand and level 2 is Product type

Ah Janne,
Sorry I missed that - I didn’t see the down arrows. That’s definitely, what I am looking for. How did you setup the CMS collections to make it work?

Ok it’s a semi dynamic solution, needs some hard code stuff. In my case it’s not a problem since the Vendors more or less never change. If you have category or subcategory that more or less never change it will work for you.

First take a look at my reference fields in my product

Prod_1

Prod_2

Here you can se my CMS structure, and im sure you can figure out my other menu options.
Here is a picture of my collection list and settings. As you can se i have to set my vendor to a fixed value (thats why it’s semi dynamic) In my case the Vendors will more or less never change that is why it works. My guess is that you can do the same if you have categories the is not changing to much

CollectionList

Here is a sample of the 2 level menu showing categories for a vendor

menu

1 Like

Hi Janne,
Thanks so much for this. I’ve understood everything up until the product type I think it is.
Products have a Category field and a Vendor field.
When displaying you use Categories as the source and set Vendor Name equals Esse,
But How do you then show for example: “Alex Cosmetic - Peeling” and the items specific to that?
Is the menu derived from the collection list?
Sorry if I am a bit slow in understanding. Really appreciate the help.

You are correct, the drop down menu is driven by a collection list.
Each vendor (in this case) has its own drop down with a collection

Clear?

Skickat från min iPad
Janne Wassberg

Going to try and break it down: (Feel free to copy and amend)

CMS Collections:
Products - includes custom field multi- reference for Categories, single-reference to Vendors
Categories - (Category Names which have a muti-refence back to Products
Vendor - Vendor Name which has a multi-reference of Categories and Products

Is the above correct? @JanneWassberg

@webflow-TM Hi and sorry for late response. Here is the db structure im using for the menu system

1 Like