How To Create A Product Page?

How To Create A Product Page?

The product page is the page on a store’s website, which contains the description of the good, the images of it, or shipment options. By using this page, the customer can complete the purchase. 

The best product pages provide all the crucial facts immediately. The design of it is minimalistic, while the information is brief. The best option is to organize the content of the page in a way that customers will not have to scroll through everything to learn more. 

To complete the product page, follow simple rules and look at your store like a client. In this article, we will give you step-by-step instructions on how to make the page with your goods become one of the product page best practices. 

What Is Included In The Product Page?

To make everything about creating product pages straightforward, we will show you the work with Store, using our website builder, Weblium, as an example. Some features can be absent on other platforms, but the main rules of the work with the content of product pages will be helpful to you.

prosuct cart

The main components of the best e-commerce product pages are the following:

  1. The gallery of a product. It is the central part of the product page since most clients decide to buy something after seeing the visuals of the product. 
  2. The name of the product. It has to point to the type, the critical perk, the name (model), and the brand. 
  3. Price. This is the second most valuable part after the gallery.
  4. The description. The description proves that the product is helpful and shows why the product is what the client needs. 
  5. Detailed characteristics. They provide users with information about the technical nuances of the goods. 
  6. Ribbon tags. Little but remarkable elements point at special offers. 
  7. Downloadable content. Different detailed nuances about the product. 3D model, instructions, or advanced technical characteristics.
  8. SKU number. The individual mark for your good. 
  9. Availability status. It represents the location of the product and the availability of it. 
  10. The “Buy” button. Customers can add the product to a cart or immediately buy it with this button. 
  11. Variations of goods. Different options for your goods, including color, size, and other things. 
  12. Breadcrumbs. The path to the product is represented via different categories and subcategories. 
  13. Related goods. This section shows the goods that will complement the one on a product page, which will increase the average check.

The gallery with images and videos

It is important to use qualitative photos of your ecommerce products. Attach pictures with different stages of product detailing. Add images that were shot using different angles. You can also take photos from the vendor’s catalog or shoot them yourself.

It will be a great advantage if different filters do not overpower your photos. Also, you should not use something other than 3D models of products to represent them. Clients do want to see the genuine look of the goods you sell.

product page design

Also, to implement photos better, you should add some real-life footage. Show how people can use photos in their routine. 

Moreover, you should take care of the optimization of images. It is essential to shrink photos without harming the quality. In the store of Weblium, you can simply rely on the builder. 

However, in the gallery, you are not limited to only the photos of products. Here, you can also add information about the inside of the good you sell, paying more attention to its filling and construction techniques. Infographics are also helpful and should be placed on one of the latest slides. Clients will decide the importance of reading it themselves if you design the product page properly. 

product pages

If you have promo videos of your goods, or you recorded their unboxing, or, even more, did a brief review, you can add it to the gallery. 

To add a video on the website with Weblium, you only need to paste the link to the original YouTube video. 

The name of the product

In the name of the product, you have to specify the type of it. Optionally, you can add some detailed characteristics; after that, you need to give the product’s full name with the brand mentioned. 

If your client completed impulsive purchases, such as relatively cheap cosmetics, the product description could be expanded, while the main characteristics and components will be listed in the end. While the description will be pretty big, it will give a full image of the goods you sell. 

The price

This part of the product page has to be visible and placed at the top of the page, right below the product name and next to the gallery. Usually, customers pay attention first to the price, then to the word, and then to the gallery. Even though the gallery catches the most attention, the final decision depends mainly on the price. 

If your store has discounts, the chance that people will buy goods with beneficial prices is much higher. For deals in Weblium, you can use the unique tool in the settings of products. The main cost will be crossed out, while the new one will be visible. 

The description of the product

The description on the product page will answer the most common questions and encourage people to buy products by telling about their main advantages. There are no strict and specific requirements for descriptions. Typically, lower-priced products feel great with 500–800 symbols. It will help you learn everything about the product in only 30 seconds. 

The more expensive the product is, the higher volume has the description. In the text, which supports the expensive product, you should answer the most popular questions of your customers. The description should contain about 1500–2500 symbols for more costly products. Niche products might have more extensive descriptions because clients need as much information as possible. A great example of such a product is elite perfume. 

product page template

The main parts of the description of a good:

The purpose of the product. Tell about the main goals of using the product and the conditions for it to perform the best.

Advantages of the product. The product’s main features convince clients of the importance of buying it. In this part you need to focus on the product details. 

Information about the manufacturer. Tell about the reputation of the manufacturer, which will make people trust more.

Features of using the product. Tell about the unique experience that the customer will appreciate.

The main thing about the description is to be sincere. People always feel the trick. Moreover, they will never revisit your page if they see false data about the product while learning more about it in the other store. 

While working with the description, it has become pretty big. In this case, you can give separate landing pages for your products if you have 10-20 elite or niche products. 

If you use Weblium to create your store, you can easily make up a page using existing blocks. In the future, you can quickly create copies of your product pages and fill them with the needed content. 

Detailed characteristics of your goods

The unique tab with detailed characteristics will help separate the exact technical details of your product from its marketing description. In the details of goods, you can quickly mention the chosen product’s weight, volume, composition, and other features.

best product pages

Choose your targeted audience – whether it is a qualified user, a regular one, or an enthusiast. 

Selecting the audience can fill the characteristics tab with special terms, explanations, and other vocabulary. But keep in mind that if your client sees an unfamiliar word and he has to learn more about it from some external sources, the chances that you will lose him increase. 

If you have several suppliers, structure the technical data about the product, so it will be similarly simple in all tabs. Moreover, it will help clients compare them. 

Ribbons or labels

If you want people to pay more attention to one specific good, you can add some unique tags (ribbons). They will be displayed on the product page and other pages in the chosen category or the front page. 

With the help of ribbons, you will tell customers that the product has a discount, has a free shipment, or is limited. 

In the settings of the store in Weblium, you can add up to 5 ribbons to one product. After choosing the product, you can add text to the ribbon and select its color, shape, and position.

product page examples

Ribbons will be displayed on both small cards on the category page and the product page. You can also change display options for ribbons in the Weblium builder.

Downloadable content

Some goods are incredibly complicated, so the client needs to get much more information about them, such as instructions and other special requirements. You can attach the PDF file with a detailed description of all the product parts to give your client everything he needs and reduce the load on your support managers. 

best product page website

Weblium supports a vast load of file types, so you can add text instructions and provide clients with drafts, 3D models, or representative parts, such as audio and video files. 

The article (SKU)

The unique mark of the product should be visible. It will help both you and your customer while having a conversation. The customer will simply ask for more details about the chosen product using only the article. 

Weblium automatically assigns the unique identifier to product display pages. 

Availability Status

The more doubts, thoughts, and clarifications the customer has, the lower the chance he will cut the deal. To improve the experience of using the product page, you should add the status of your product. You can add the following:

  • In stock;
  • Out of stock;
  • Preorder;
  • On the way to the store.

In the settings of products in Weblium, you can choose any of the statuses.

products page

Also, users can ask for a notification when the product is available again. They will just put their contact information. When the goods are available to deploy, the message will be sent to the potential buyer via messenger, e-mail, or call. 

Furthermore, you can inspect the number of goods using Weblium. It will help you display how many products are available. The amount will depend on both cut and canceled deals. 

The “Buy” button

Two things encourage customers the most: the photos of goods and a bright “Buy” button. So the button has to be remarkable. You don’t need to make it bright or change its color. Just make sure that your clients will notice it. 

But you still need to mention the action that your client will perform. This is an integral part of product page website design.

product page design

If the client goes to the payment page after clicking it, you should just write “Buy”. If the client has a cart system implemented in it, you can just write “Add to cart”.

Weblium allows customers to see the fixed cart widget icon where they choose. The icon will dynamically change the number of goods in the cart. 

Related Goods

To significantly increase the average check value, you can add a showcase of related products with direct links to their pages. You can use two ways:

  • Related goods. Place the goods that will complement the main product significantly. For example, if you sell coffee machines, you can offer different cleaning tools, extra details, or different consumable things. 
  • You might also like.” If there are goods with similar characteristics to the main product, you can give a choice to your customer. You can add such products manually or can select the automatic display of the goods from the closest subcategory. 
best product pages

The size table

Do you want to sell clothes to people from different countries? Keep in mind that they can have a varying size system. Giving a universal size table is essential to make choosing clothes much more convenient. 

To make the table, you need to choose an already-made block in the Weblium builder, which works as a table. Edit the content, add or remove strokes and columns, and estimate their width. For example, tables have a section of already-made blocks called “Schedule.” 

Also, you can make the table a default and integral part of product page designs. Clicking on it will display the entire table to customers. 

Varying products

You can create varying goods to simplify the work with items in your store. Such types of goods work as a tab with products with similar options. For example, the tab with clothes of different colors. Clicking the other colors will reload the page and its URL. 

Varying goods will save time because there is no need to duplicate cards and edit them separately. Creating variations and submitting relevant photos for every option will be enough.

product page design template

Still, you will have the option to create more than one option for each product. For example, if you sell shirts of different colors and sizes.

It works simply. You estimate five color options and five size options of shirts. For each product will be generated a separate page with a unique URL. 25 pages total. 


Breadcrumbs are a crucial tool for navigation in your store. They show the place of the product in the overall structure of categories and subcategories. 

Usually, breadcrumbs are added to the start of the page. Each category and subcategory name will work as a link, leading to the specific section of the store. 

Weblium allows you to generate breadcrumbs automatically. They will be displayed on the product page. 

You can create categories and subcategories in the “Categories” tab in your store’s settings. In the settings of the good, you can choose only the most important ones. You can also select different categories to apply to goods, but only the main one will be displayed. 

The constant elements of the product page

Unlike other optional elements, which dynamically update after adding information in the settings of your store, constant elements are the default for all the product cards. It can be the refund policy or information about the shipment. 

For example, if you produce furniture using models created earlier, you can display information about each product delivery step. It will make product description cards more detailed to all visitors. 

Here at Weblium, product pages work as templates. After adding a new block or the button, you can enter any default element and use the premade blocks. If you need to add the description of the working order, you can find suitable blocks in the “Process” category. 

The SEO optimization of the product page: tags, URL, keywords

SEO optimization of the store will help you get more customers via search engines without any expenses. Potential buyers will find your pages using only their search. To be at the top of the search results, you should fill in all SEO attributes of your products, such as the Title and Description. 

best product page designs

To fill all the meta tags on Weblium, you need to edit the page with your product. In the tab with SEO settings, you need to enter the following:

Title (70 symbols). This product’s name will be displayed in the search results after users type their search query. You need to predict how users will search for products. On the one hand, a customer can use the name of the brand, while on the other hand, he will focus on its characteristics, such as “comfortable”, “good-looking”, “stylish”, and “durable”.

Description (320 symbols). This description will be displayed below the Title. In it, you need to describe the product briefly. The easiest way to add it is to shorten the marketing description of your product. In the Description text, you need to rely on one main advantage. 

Weblium will attach alternative descriptions for gallery images. The platform will use the information you used for your product card. The URL will be generated automatically. 

Store With Weblium

With our site builder, you will easily create and launch your store. And after filling it with the content, you will have the opportunity to manage all the transactions, which will be performed using 15 payment methods. Here you will also find product page examples. And marketing integrations combined with a free pop-up windows builder, you will attract more and more customers.