Streaming live at 10am (PST)

How to make this ecomm page design?

#1

Hello,

I’ve designed an ecomm product page in Photoshop, but I don’t know how to recreate it in Webflow.

I understand the basic idea of creating sections, and using div blocks and grids to organize content, but how do I make something as detailed as my Photoshop design?

This short video explains and shows what I’m talking about:

Any help is appreciated. Thanks everyone.

1 Like
#2

Hello @anthonyclark

The video is not playing for some reason. Can you try uploading again?

Piter :webflow_heart:

1 Like
#3

Here’s the link again. It’s in Dropbox.

If it’s still not playing, try right clicking and selecting ‘Copy Video Address’, then paste that URL in a new tab.

2 Likes
#4

Okey, The first thing is that Webflow has no subscription plans yet. It’s something that will come soon I hope :smile: Doing the structure will be very easy using divs and flexbox. You can go to Webflow University and find some videos about flexbox. CSS Grid can help too. I’m not sure about the reviews and how they can be implemented. I will suggest watching some videos to get around the structure first and how you can make the design :webflow_heart:

#5

@PiterDimitrov thanks for the reply.

I think I’m getting the hang of the structural pieces.

Here’s my in-progress page ==> ketonifi.webflow.io/product

I use sections, divs, and grids. Divs are really handy for grouping elements together, and I think I finally understand the correct way to use flexbox vs block vs inline block. I hope :sweat_smile:)

What about the part in the video where I show the interactive changes that happen when I select one radio button, then the other?

Btw, my intention is to design everything in Webflow, then use Udesly to port it over to Shopify.

2 Likes
#6

Not sure about the radio buttons, but I think this is like product variants or something like this. You can check > [Solution] Work around for Webflow Ecommerce product variants

Yea, Webflow is hard at the beginning :smile: The best thing is actually knowing some basic html and css. Go check some videos about the box model, html basics and css basics. Knowing the concepts is very useful.

You can also check > https://university.webflow.com/article/intro-to-html-css

and > https://university.webflow.com/article/the-box-model

1 Like