Help Center

Community / Forum Ask Zappter Support We build your app Marketplace

Documentation

General

Videos

Mastering the content editor Pixel perfect design Setup your E-Commerce Store Configure your booking engine Event-System / Drop-In

Business Modules

New

How to Design Product Pages?

Documentation E-Commerce / Shop How to Design Product Pages?

Craft a catchy 'product page'

A striking, well-organized product page with detailed product information is crucial in eCommerce to influence a potential buyer to proceed with an order. So the page has to be informative as much as possible with texts and pictures presented in a well-organized manner to ensure your conversions increase. And, in addition to providing the product details, a potential buyer may look for, it also has to appeal to a user aesthetically and provide the best on-page experience a user would expect when buying online.

The below steps describe how you can create such an attractive and converting product page on your app using different elements provided by Zappter, like this one:

This sample product page design consists of these UI elements provided by Zappter:

Single subpage (also called, category) that holds the details of a product with different UI elements.
On the top, there is a title text inside the subpage, 'Tragtasche HOME WORKOUT' in this case.
Next, an image slider to show the product images from different angles. 'Tragtasche Lorem ipsum' and the text below, are part of the slider.
Immediately below the slider goes a subtitle, 'Available Colors' in this sample.
Then a picture gallery to show your product variations.
Then comes another subtitle and regular text for 'Available Sizes' and 'One Size.'
Finally, your article that has the default fields for product title, description, and price details. It adds online selling features.

1. Create a subpage for this specific product.

Add a subpage (this can be a subcategory/subpage inside another subpage also) specific to this product. Visit Categories documentation to learn how to add a category and customize it. When you have completed creating your category, get inside the category and add the product details with below UI elements.

2. Go into the subpage, and add a title text.

Add a title text to sit on top of the detailed product page, you can add anything on your title text, but the below example uses product name. 'Title' plugin documentation explains how to work with titles.

3. Add an image slider.

Add an image slider with different images of your product that a potential customer can slide through and see the product images in different angles. Slider is a built-in plugin that's available to you by default. This page explains how to add your images with slider.

4. Add a subtitle text just below the slider as heading for your product options.

Add a subtitle text as heading to your product options images such as different colors or any other variations that you want to show. 'Content and text' plugin documentation explains how to work with titles, subtitles, and regular text.

5. Add an image gallery to show your product variations.

Immediately below, add your product options such as available colors and variation pictures. Use the Image Gallery plugin to do it and here is the plugin's documentation to learn how to work with image galleries.

6. Add a text which comes with a subtitle and the regular text below the subtitle.

Add a text which comes with a subtitle and the regular text below the subtitle. As you can see, it is used to display 'Display Sizes' in this sample. Here is the documentation show how to add a text.

7. Add an article.

Finally, add an article for your product. In Zappter, you add an article for each of your selling items. So adding the article here, gives you all the features necessary to sell online. Learn more about articles and how to create them to sell your products online effectively.

Well, it's an example design for a detailed product page using Zappter's various UI elements provided through different plugins. You can get even more creative with your product page designs using these features and add various other plugins available in the Zappter marketplace. For additional customization assistance, visit this page to learn UI customization.

Previous Step
Creating Articles Creating Articles Next Step
Making Orders Making Orders