Product Pages Design and Content

It’s a fact that well-designed product pages create an exceptional user experience and also can help you drive engagement and conversions. With the possibilities Sana provides, you can easily achieve this.

There are a lot of various elements which you usually can see on the product pages, like product title, number, description, specifications, price and discount, units of measure, stock, different links and buttons, etc. All these product page elements are available in Sana as content elements, which give you flexibility when it comes to designing your product pages.

System Page and Individual Products

There is a Product details system page that is used as a template for all product details pages, but you can also change any specific product details page if you want it to look different. If you change anything on the Product details system page, these changes will be applied to all existing product pages. But if you want a particular product details page to look different, you can style any product details page individually.

To style the Product details system page, in Sana Admin click: Web pages > System pages. On the System pages page, you can see all available system pages. You can also see a link to the Product details system page on the list of all product pages.

Find the Product details system page and click Edit.

The Desktop and Mobile tabs hold the content elements of the product details pages that are shown on the desktop and mobile devices. Thus, the product details pages can be styled differently for the desktop and mobile devices.

The same Desktop and Mobile tabs you can see on the individual product details pages. If you want to use other content elements for a particular product details page or make it look different from other product details pages, in Sana Admin click: Products > Product pages. Find the necessary product and edit it.

You can add and remove various content elements on the system page and on the individual product details page as well as use the content management system of Sana with the page layouts, row and column settings to create high quality and impressive design for the product details pages.

The product details page has about 30 standard content elements that can be placed anywhere on the page. Most of the standard content elements are present on the product details page by default. You can add and remove any standard content elements on the product details page and those that are available as add-ons.

Make sure that the information which a content element should show is configured for a product. For example, if the Product specifications content element is used for product pages, but product specifications are not configured for some products in your ERP system, then this content element will not be shown for these products in the Sana webstore.

Using the Revert to default button, you can revert any changes you have made to the page and start from scratch.

Product Details Page Content Elements

To easily find the product page specific content elements, you can use filters in the content element explorer. When you add a content element to the page, in the content element explorer, click the Add filter button and select the necessary filter options to find what you need. Also, you can sort content elements, search for the necessary content element and add them to favorites.

NOTE

The product details page specific content elements cannot be added to other pages.

See the list of all content elements which are used only for the product details pages:

Besides the above-mentioned content elements, you can also use any other content elements available in Sana to enrich your product pages. For example, you can add text, images, banners, sliders, videos, tiles, etc.

Content Element Advanced Settings

All content elements on the Product details page have advanced settings.

On the Advanced tab of the content element, you can configure height, width and spacing settings.

For more information about advanced settings, see Content Elements.