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 Commerce Cloud 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.

Product Page Templates and Individual Products

Sana Commerce Cloud allows to create product page templates and assign products to these templates. Besides, you can modify any specific product details page if you want it to look different. If you change anything on the product page template, these changes will be applied to all product pages assigned to this template. But if you want a particular product details page to look different, you can style any product details page individually.

Create Product Page Templates

Using templates for styling product pages can contribute to the successful management and growth of your webstore. The templates functionality in Sana Admin can help you to take your online business to the next level. Sana allows to use different templates for different product pages and assign one template to multiple product pages in bulk which saves considerable time and effort.

The possibility to use different templates for different product pages can come in handy when for example you have some products in your webstore which are available only on request. In this case, these product pages should be styled differently, like price, stock, add to cart button, etc., shouldn’t be available, instead a customer should see the contact information on the page. You can easily create such template and assign it to the necessary product pages.

Using different templates can be also convenient in case you have several groups of products in the webstore which are similar in some way. You can easily single out these products in the webstore if you create several templates and assign them to product pages which share common features.

To create and manage product page templates, in Sana Admin click: Products > Product pages > Templates.

On the Templates tab, you can see the list of your product page templates and the number of products assigned to each template. There is one default product page template which is marked by the star icon. All existing product pages are assigned to the default product page template and it cannot be removed. You can also create custom product page templates and assign product pages to them.

You can edit and remove each product page template and view related products. By clicking View related products on the template, you will be redirected to the Pages tab where product pages will be already filtered and only those product pages which belong to the product page template will be shown.

It is also possible to search for the product page templates by name.

To start assigning product page templates, on the Templates tab, click Assign product page template.

To create a custom product page template, click Add product page template. For more information, see Assign Template to Product Pages.

On the General tab, enter the product page template name and set the necessary page layout per customer type. For more information, see Page Layout.

The Desktop and Mobile tabs hold the content elements of the product details pages that are shown on 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 > Pages. Find the necessary product and edit it.

You can add and remove various content elements on the product page template 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. You can revert changes on the default and custom page templates.

If you use the Revert to default button on the default page template, all changes applied to the default page template will be reverted, only the default content will be shown.
If you use the Revert to default button on the custom page template, the changes will be reverted to the default page template. It means that if you modify the default page template and revert the changes on the custom page template, the custom page template will look exactly as default page template, inheriting all its changes.

You can revert the changes on the individual product details pages using the Revert to template button.

Assign Template to Product Pages

There are two ways to assign product page templates to the product pages: you can assign templates using different filter expressions, this method also allows you to assign templates to multiple product pages at once, or you can assign the template to each product page separately.

Assign Templates to Product Pages Using Different Filter Expressions

In Sana Admin click: Products > Product Pages > Templates. On the Templates tab, click Assign product page template.

On the Product page template assignment page, select the template which should be assigned to the product pages and set the filter expressions by specifying:

Field name
Condition
Value

Filter expressions are used to filter the products that should be assigned to the template.

All fields that are available in the Field name field are retrieved from the filter fields. That is why it is important to configure filter fields beforehand.

When the filter expressions are set, click Assign template. After this, the selected template will be assigned to all products pages which match the filter expressions.

NOTE

It is important to understand that assigning a template to product pages is a one-time action. If you create new products and they fall under the configured filter expressions, they will not be automatically assigned to that template, but to the default one. To assign new or other products to a product page template, you have to do it again.

The created filter expressions will be available on the Product page template assignment page after assignment. You can reuse the created filter expressions later for example in case you need to assign some new product pages to the template.

Assign Templates Individually to Each Product Page

In Sana Admin click: Products > Product Pages > Pages and open the necessary product page. Use the Template field either on the Desktop or Mobile tab to assign the template to the product page. The selected template will be applied to both Desktop and Mobile tabs.

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 page templates and on the individual product details pages 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.