Best way to layout an E-commerce site

Hey There,

First a disclaimer:

I’m pretty new to web design and was hoping to get some “big picture” help before I really dive into building my site. Despite my inexperience, I come from a photoshop and video editing background, so I felt like Webflow would be the best tool for me.

I’m looking to build a basic web store where I will be selling physical products (jewelry). Ultimately, I’ll integrate and embed shopify buttons onto my product pages but I first need to plan the best way to lay out my items.

My general plan:

  • I’d like to have a main “Shop” page where all the items will be laid out in a grid (3 items per row).
  • We’ll be selling rings, necklaces, and earrings, so it would be great to have a link for each category that when clicked shows only that category, or at the very least, takes you to another product page for that category.
  • When you click on an item, it will bring you to an “Item” page with more details, pictures, etc, and the Buy button.

Where I’m stuck:

  • I don’t know if I should make use of dynamic lists or not. It seems like it could be the best way to go but I’m undecided. I started experimenting with it off a template and don’t like how I can’t adjust the positioning of one image thumbnail without it affecting all the others.
  • It’s very important for our jewelry items to appear in this grid with the proper scale relative to the other items. We have some rings for instance that are taller than others and want that to be reflected on the main shop page. Is there a best practice with respect to width/height dimensions for saving the images from photoshop?
  • Without using dynamic lists and simply putting the thumbnails into columns and link blocks, I can at least adjust the image size and spacing of each ring. (each ring is on a clean white background that blends into the white background of the website)
  • In theory, dynamic lists seem like it would be the easiest way to move forward since it would make it so much easier when he add new items.
  • Finally, I’m not 100% sure if I want to have each item page to be the same as all the others. I might want them to be completely different. Will using dynamic lists prevent me from doing that?

Once again, I’m new to this so please let me know if I’m way off the mark and if there’s a better approach to take with a site like this.

Thanks in advance!

Welcome to the forum!

Shopify Buy Buttons are a great choice.

Currently the dynamic lists and CMS function doesn’t support embed code so you wont be able to generate unique product pages with separate buy buttons.

They are working on this functionality but no word on when it might be available.

The CMS uses collection and each collection uses one template to create the page for each collection item.

So if you had a collection for rings all the rings would have one template. From a design stand point it makes sense to have each product page be the same so customers can get used to your site and how it is laid out.

Hope this helps :smile:

1 Like

Thanks Alex,

To clarify, it sounds like you’re saying you can’t use the collection to simply display the thumbnails but then have them link to any page that I want. Each thumbnail link is connected to it’s corresponding page.

When you say separate buy buttons do you mean that if there’s a link to buy ring #1 on the item page for ring #1, then the buy button on the item page for ring #2 would also buy ring #1?

In short, I’ll need to set up each item on the “shop” page within columns, link/image blocks, etc… Is this accurate?

The CMS and collections are great for setting up a catalog of products. Currently there isn’t away to have each item have a buy button so the item can be purchased.

It is possible to use a collection to create a dynamic list of thumbnails and other product information and at the same time add a link manually to a static page. I don’t see the value in doing that since you wont be using the template associated with the collection which is a big reason for using collections in the first place.

Currently a collection and a template page are created at the same time. The template page is used to generate a page based on the collection item data you provide. Currently there is no custom code data field for a collection item so there is no way to dynamically generate a new buy button based on the item being displayed. The same buy button would appear on every page generated by that template.

I think the way to go is to use static elements and pages so you can embed all the buy buttons you need. As Webflow expands it’s E-commerce functions you can continually improve your site.

2 Likes

Please get those e-commerce functions working soon! I can’t wait to have my own Webflow e-commerce site.

This topic was automatically closed after 60 days. New replies are no longer allowed.