How to Create a Shopify product page that is the best in class


Designing an online store, a lot of focus goes into designing the homepage because it’s the first thing visitors see when they land there. But, the purpose of any e-commerce website is to generate sales, so it is essential that the product page is impressive if you hope to achieve that goal. Having a well-customized product page can boost brand awareness, improve user experience, and boost sales. 

So, take a coffee break and learn how to create a great user experience, how the little things can impact a brand’s business and websites, and how to make a positive impact on e-commerce brands.

  1. The layout of product pages

The first step is to look at the layout of the product page, one of the most important aspects of an ‘outstanding’ product page. The product page can be the difference between converting browsing into a sale, depending on your product, branding, and level of detail.

There are typically four layouts for product pages that you might be familiar with and that are used regularly.

Tabs in a horizontal format

With this layout, you can reduce the length of the page by using the tabs to display more information on the product. Customers can easily find the information they need by clicking on the relevant tabs rather than scrolling. On the other hand, using more than three tabs may cause the user to miss important information on their mobile device, as they will have to scroll to find it. 

The sticky table of contents (TOC)

A ‘sticky’ table of contents makes it easy for users to jump between sections thanks to this desktop-friendly design. But how the TOC is positioned can determine a layout’s success. It is easy for sticky TOCs to be overlooked when they are placed low down on product pages. To prevent this, make sure the TOC is placed high up, ideally at the top of the browser fold, and integrated with the ‘reviews shortcut’. So, the users can see the in-page navigation from the moment they arrive on the page, and the TOC is visible from the very beginning.

A section that collapses

It is currently the most popular layout and our favourite as well. In the first place, to determine what customers want, the brand uses their knowledge of customers and market research. All the information can be considered to create collapsed sections that cater to the different user journeys when asking customers why they shop there, what makes them buy, and why they come back. 

Second, this layout makes it easy to include ‘tricky bits’ on desktop and mobile, so miscellaneous but useful information (such as product specifications) can be easily located.

A single long page

This is the original (but may not be the best) product page. A non-frilly brand with simple products will find it useful. The length of a page can vary depending on the brand. However, if your page is long, you may want to put more focus on the Add to Cart button to avoid it getting lost. Make the button sticker on mobile by repeating it at multiple locations, or implement a design that gets your users’ attention. 

  1. Images of products

Next, we’re going to look at product images. Brands and products play a significant role in determining what types of product images users need. Yet, there are some universal aspects. Consistency in photography is crucial since changing it can alter the whole feel of a site. The consistency between product ranges also makes it easier for shoppers to compare products. Product images should accurately depict what the product is like. Details are always helpful because the customer can see how the material feels.

  1. Under ‘Buy’ Section

Here, shoppers will find elements that will allow them to buy products they’ve been eyeing. The majority of features include Add to cart, prices, discounts, quantity field, out-of-stock items, and saving options. As these elements are often interdependent, they must be displayed together. In the best-in-class sites, you can find which items are pre-ordered and which items require a longer shipping time along with a ‘Notify me’ feature, which lets you notify customers when the item is back in stock. 

  1. Gifts, returns, and shipping

Customers often commit to purchasing based on terms like shipping, returns, and gifting policies, so having these policies near the ‘Add to Cart’ button will make them easy to find, thus reducing any customer frustration.

  1. Variations of products

According to the product size selected, users should see different images. It’s essential to be able to pick the colours of products in a swatch gallery, too. It’s important to keep accurate stock information to avoid customer disappointments. With Shopify, clients can keep an updated stock list so that the website can show which items are in short supply.

  1. Descriptions of products

When it comes to selling your products, product descriptions are extremely important. By properly using them, you can sell the product to your customers more effectively than by simply using images. The product needs to be summarized in a bullet point list of the key features. It means shoppers will see the most important information straight away rather than having to scroll or scan pages for it.

  1. Reviews by users

Getting those important conversions depends heavily on reviews and other types of social proof. A negative review can be better than no review since it shows you’re a legitimate business with real products and not just a scammer. Additionally, it assures Google that your business is genuine (which helps to boost your local search result rankings) and shows that the product has been tested. More importantly, for products that receive a lot of positive reviews and no negative ones, shoppers might suspect that the reviews aren’t genuine. So, do not be too concerned with a few negative reviews – what matters is that there are reviews at all.

A quality product page helps customers quickly find what they’re looking for, and allows them to navigate through information easily. User-friendly navigations such as carousel galleries and carefully considered page layouts make this possible. It is also vital to let customers refine content based on what is most relevant for them, whether that be product images in their preferred sizes and colours or being able to filter reviews. 

Let us know if you’d like some help with your product page. Our team would be happy to help you.