Create Product Page Template - Ecommerce Webflow Tutorial

In this tutorial, we will see how to design your product pages for your e-commerce site in Webflow. After following these few steps, each time you add a new product to your online shop, it will appear on a new page that will be similar to the one of your other products.

To start, go directly to yourWebflow project ! In this tutorial, we have first added some products in Ecommerce - Products.

Small disclaimer: In order to make this tutorial as simple as possible to understand and carry out, we have not used the Client First by Finsweet methodology. This tutorial is especially aimed at beginners, but can help everyone!

1 - Go to the "Products Template" page

From the developer interface of your project, go to the "Page" tab (or click on P) and in "Ecommerce Pages", select "Products Template". This takes you to the page that will define all the design of the other product pages.

Access to the "Products Template" page in Webflow Ecommerce

‍

2 - Add the basics of your site

In this article, we will not focus on this step, but (if you arrive on a blank page), start by adding your navbar (navigation bar) and Breadcrumb (very important for the SEO of an e-commerce site). You can also already (if you wish) add your footer.

Inserting the navbar and breadcrumb trail in the "Products Template" page in Webflow Ecommerce

‍

3 - Add a section and display "Grid".

Below your breadcrumb trail, you can add the "Section" element. Click on "Add Elements" (or press A) and drag it under the breadcrumb trail. Then go directly to Style (S) > Layout > Display > Grid. You will be able to delete a row (Rows) to have only 1 row and 2 columns. Create a "class" for the section which you will name "Contenair Product" for example.

Adding a Grid display section in the "Products Template" page in Webflow Ecommerce

‍

4 - Insert your product images

To do this, you can drag and drop a "Div Block" into the first column. Create a "class" for this block which you will call "Product Image" for example.

Inserting a div block in the first column of the grid in the "Products Template" page in Webflow Ecommerce

Then drag and drop an "image" item into the "div block". Instead of selecting an image from a gallery, click on "Get image from" and in "Select Field", choose "Main Image" (The purple boxes correspond to the addition of dynamic elements coming either from the collections of your CMS or from the "Products" in the Webflow Ecommerce part).

Inserting the product image dynamically in the "Products Template" page in Webflow Ecommerce

You have the image of your products, however, the size of the image is not suitable. Don't worry, we will fix this problem. First of all, we will centre the image in the div block:

Select the "Div Block" (In our example, "Product Image")
Go to style
In Grid Child, select in "Align" and "Center", the "Center" boxes

Center product image dynamically in the "Products Template" page in Webflow Ecommerce

‍
Next, we will set a size for the image. To do this:

Select the image
Create a "class" (we will choose "Product image")
Leave Max W at 100%.
Give a REM value to Max H (In our example we want the image to be a Max H of 400 pixels, to switch to REM we divide by 16, so we enter in Max H: 400/16rem)

Resize the Max H in REM of the product image in the "Products Template" page in Webflow Ecommerce

‍

You can see the overview of your other products by clicking on the bottom arrow "Product" in the top horizontal bar and selecting your product (you can also scroll with the key combination: Shift + Alt (or option) + Arrow (right or left).

Update the product image in the other product pages dynamically in the "Products Template" page in Webflow Ecommerce

‍

5 - Insert the name of the product

First of all, insert a "Div Block" in the left-hand column (we will call it "Content Product").

To add the name, nothing complicated:

Insert a Div Block in the right column
Create a class and give it a name (in this example, we will choose "Product Info")
Insert a Heading in the block
Leave the Heading in H1 (this is good SEO practice for E-commerce)
By clicking on the Heading, check "Get Text From" and select "Name".

Of course, this is an example, the name of your product must be optimized for SEO (Modification in ECommerce - Products on Webflow). You can also modify the typography, the size of the H1 in the Style Guide or by using the "Client First" method.

Insertion of the product name dynamically with an H1 heading in the "Products Template" page in Webflow Ecommerce

‍

6 - Insert the price of the product

Here again, nothing is insurmountable, you just have to :

Drag and drop a text block below the product name (H1), still in the "Product Info" div block
Select the text, check "Get text from" and choose "Price".
Change the appearance/design to suit your needs

Inserting the product price dynamically with a text block in the "Products Template" page in Webflow Ecommerce

7 - Insert the product description

It is recommended for SEO to put a short description of the product in H2, but if you want to put it in paragraph form, the method remains the same:

Insert a block Heading - H2 (or "Paragraph")
Select "Get text from", then choose "Description" in "Basic Info".
Customise as you wish

You can then add product information in the same way, but by inserting paragraphs and selecting the appropriate dynamic text (you will need to add custom fields in the product settings first).

Insertion of the product description in a dynamic way with a heading H2 in the "Products Template" page in Webflow Ecommerce

‍

8 - Add an "Add to Cart" E-commerce block

This element will allow your customers to put a product in their cart. To add it, simply drag and drop the "Add to Cart" element under your product description (in the right-hand column). You can change the elements of the block 1 by 1 to customize them.

‍

9 - Add the basket to the NavBar

To add the cart to the NavBar, simply drag and drop the "Cart" item into your NavBar.

Add the Cart element in the navbar in the "Products Template" page in Webflow Ecommerce

‍

10 - The result

Here is our result of the design of the "Template Product" page, of course these steps are basic. You can go much further thanks to Webflow and customise these product pages entirely to your image.