Streaming live at 10am (PST)

Product Template - Is this layout possible?


#1

The hype surrounding the launch of webflow ecommerce has suggested that a bespoke shopping experience is achievable with complete design freedom.

That being the case how I would be very grateful for any help to achieve the layout shown in my design.


#2

It is very doable with the different CMS elements just laid out in a horizontal flex box or even in a Grid element. However, Im not sure if Collections works in Grid yet.


#3

Hi Brandon,

Thanks so much for your reply.

I added a Collection List into the Product Template and output a list of products no problem.

I successfully placed SKU, Name, Description and Price in a grid inside a collection list.

However, webflow will not allow me to add an ‘Add to Cart’ button against each product.

It returns an error. ‘Add to Cart’ cannot be placed in a collection item. (image attached)


#4

Collection works in grid now


#5

It must be placed in the product page.


#6

Thanks, I did not know that. Havent had a project use for it yet. dindt know.

As for the Add to cart feature @FactoryCats, hmmm, not sure. Add your share link?

Theres your answer from @JanneWassberg


#7

@JanneWassberg The image shown is the Product Template.

@WebDev_Brandon I cant publish it as weblfow wont allow it on the page.:frowning_face:


#8

I meant add your projects share link here so we can help review.


#9

@FactoryCats My guess is that it’s not working because its a collection list. I asume that the product page only can contain one product if you want to add it to the cart. Wjy dont you do the same in another page and the direct the user to the product page when the button is pressed.


#10

@FactoryCats here is a hint when you are on each page, open the add element tab. Then you will se what kind of elements that can be used in each type of page.


#11

I’m coming to the same conclusion only 1 product per page which is maybe OK if you sell tshirts, mugs or similar.

The application flow is a little different for this use case. You only need to see the Parent Category ie " Base Units" then view all the SKU’s under that Category.

Shopping ‘menu style’ is way more efficient than having to click through to a Detail Page each time essentially just to reach the Add To Cart button


#12

much appreciated I’ll post something once I’ve made a little more progress.


#13

There’s only the ‘Cart’ and ‘Add to Cart’ elements available in addition to the standard stuff for the Product Template page.


#14

Yes, i know i was a tip on how to figure aout waht you can do on each page type. As i said before i thing your problem is that the product page only alows one product at the time to be added to the cart


#15

I’ll post a share link when I make a little more progress thanks for you help so far.


#16

Hi Brandon

Share link your feedback much appreciated

https://preview.webflow.com/preview/plyko?utm_source=plyko&preview=91e9fecbe232d0b993f3d0f5f3ea702b


#17

Hi Janne,

Here’s a share link from progress so far take a look if you are interested is seeing my problem.

https://preview.webflow.com/preview/plyko?utm_source=plyko&preview=91e9fecbe232d0b993f3d0f5f3ea702b

I managed to create the Product Categories but the Product Page is not how I would like the shopping experience to be. I think the application flow for ecommerce is dictating the design!

The ability to add an ‘Add to Cart’ button into a collection list would solve this and hugely improve the flow of the shopping experience in my opinion.


#18

Hi @FactoryCats i took a looka at the site looks nice, good work. Yes i do agree with you. The way you want to sell the products it’s not possible because the way the Ecom works now.

I agree and hope that Webflow will change this. On the other hand i can understand why it’s done this way (im a programmer). The current solution makes it kind of not user friendly interface. To many clicks to order more then one product. I’m sure that other will say the same thing.

One other thing i realised when looking at your design (your sticky footer) is that it’s not possoble to get cart info with total amount of order (ordet totals) i think is called. It only possible to put it in one page not in a regular page. Hoping for a solution here to.


#19

Hi @JanneWassberg thanks for taking the time to have a look.

I have only ever seen one other off-the-shelf software product which allows complete control over display html. That worked by allowing placing placeholders for field to be placed in the display html. That code could then be defined as a template and assigned to Product under Categories. Its long gone now I used it to build a very successful kitchen store back in 2001 and it lasted until 2013.

Biggest feedback we got was how easy and quick it was to add cabinets into the basket. Working down a list of SKUS entering qty’s as you go and a single Add To Cart Button saved a huge amount of time when buying online.

It looks like this is not a project for webflow unfortunately :frowning_face:


#20

@FactoryCats i realy love Webflow, and im sure they are going to deliver a great product. If they are serius with the product they will listen to the developers/designers and find solutions. To be able to take market shares they must do that.

In my opinion (dont forget that i love Weblow) how the product works now, you can build very good looking and nice Ecom sites that are not to complex. The number of products i dont se as a problem, its when you start to have a bit more complex product catalog. I have been testing in the Hair,Skin, Makeup market and i can’t do what i want YET.

And of course what you said. products must be easy to add without a bunch of extra clicks and navigation