Clarity eCommerce Product Details Page Designs

This video demos the ability to have more than one design in a product catalog

Hi, Ron from Clarity. Today we’re going to look at Clarity eCommerce, and a feature which allows you to have multiple different product page designs within a single product catalog.

Default Design

First, we’ll hop into the catalog by searching for our Acer laptop. Once found, we’ll drill in and take a look at the out-of-the-box page template. It has the product image as a square, with the product zoom turned on, as well as the thumbnails with hover below.

As we scroll down the page past the tabs, we can see that the product description allows HTML markup as seen by the numerous graphics and text. We then have some additional attributes followed by the Related products.

On our way back up, we’ll click on the tabs to see that they also allow HTML, as seen by this list of bulleted specs, and embedded YouTube video.

Second Design

For the next design, we’ll go down and click on the RAM, which you can see for this template, I turned off the Related products at the bottom, and inserted a right sidebar area. Here, we could add any promotions, calls-to-action or any lists like, Recently viewed, More from this store or seller, or in this case, More from this category, which happens to be electronics. The point is that the template can be changed to help improve the user experience or marketing capabilities of the page.

Third Design

The next design we’ll look at is for some clothing. Looking at this dress, you can see that we’ve moved the thumbnails from being really small and below the main image, to much larger and on the left. This allows us the change the perspective of the graphic from square to a taller rectangle, which allows us to see the dress and the person standing in full.

We’ve also removed all the product tabs, long description, any other extraneous data and added the related products at the bottom, so that everything is visible above the fold. Obviously, if this template was in production, I’d have to add in the product configurator to pick colors and size.

Fourth Design

For the next design, we’re going to search for our Amazon echo product. You can see that we’ve got 5 different colored variants of the echo, and when I drill into any one of them, you can see all the colors, pick a different color, check the stock and price of each and are provided with a one-to-many SKU ordering control, which allows me to order any amount of each color, updating the numbers, and finally adding to cart with a single click. This is more popular for B2B orders, where resellers and distributors order many quantities, colors and sizes of items in the same order.

Final Design

Our last design is more for the B2C crowd, where design is everything. We navigate to our Audio subcategory, and you can see that I’ve uploaded 5 different headphones. Selecting one, you can immediately see that this design is way different, with transparent and beautiful graphics, luxurious styling, and if we scroll down, you can see that we’ve added more information about the product for both research and to help sell the customer. We even have a section at the bottom to learn more about the designer of these headphones. We can go up and click on another recommended headphone to see that it also uses the same stylish template.

Closing

So there you have it from Clarity eCommerce. Five different product templates, all in the same product catalog. This allows you to have different designs and layouts for products versus services, memberships, and more.

Thanks for watching.