Using Clarity’s Products as Content

Even for non-transactional websites, building a catalog using commerce-specific capabilities is a strategic investment. Rather than relying on standard web content structures to build product pages, Liferay’s catalogs, products, channels, and other native commerce features provide an enterprise-grade digital commerce foundation. Defining items as formal commerce products today empowers Clarity to future-proof their backend and seamlessly shift to a fully transactional storefront down the road.

In this lesson, you’ll learn about some of Liferay’s native commerce features and how to use them.

Catalogs

A catalog is a container that groups related products. Liferay catalogs provide a highly flexible way to organize your product offerings in the most sensible way for your business. There is no limit to the number of catalogs you can create, although maintenance effort should be a factor in how many you choose to have. Catalogs also enable you to define permissions for the products they contain, so that different product teams can manage different product groupings.

In addition, catalogs capture important commerce attributes like language, currency, and a placeholder image for products without an associated image. As useful as catalogs are, they're just empty containers without the products to populate them.

Products

A product in Liferay is a rich entity composed of many attributes, including its specifications, options, and Stock Keeping Units (SKUs). Like any manufacturer, Clarity has variants of products designed to achieve different goals and target different customer profiles. Liferay provides four out-of-the-box product types to support different use cases and map various products, along with the ability to define custom types if necessary:

• Simple Product: Any physical product for which inventory is tracked.
• Virtual Product: Any non-tangible item, such as downloadable software files, publications, service contracts, and warranties.
• Grouped Product: A predefined collection of other products that are packaged together and sold at a single price. Grouped products are tracked in your inventory and can contain simple products, virtual products, or other grouped products.
• Diagram: A non-purchasable item that stores an image and mapped product pins. Its purpose is to display on storefronts to help buyers understand how products relate to each other.

Products offer more than just a predefined type of content. They also offer many additional features that together create a first-class commerce experience with minimal effort, including media, product variants, units of measure, and more.

Channels

Once their products and catalogs are configured, Clarity needs to think about how they will display their products to customer and website visitors. Channels are the configuration engine behind your storefront, where products are displayed and sold to customers. They come with several useful features:

• Multiple channels can each represent a different customer experience (B2B, B2C, B2X).
• Channels can be linked to Liferay sites or used in a headless context.
• You can use Liferay’s headless APIs to creative native mobile applications with channels or integrate channels with external marketplaces.
• Channels define default display languages and currencies, as well as default product display pages and category pages.
• For transactional sites, channels offer payment, shipping, and tax information.

While building a new storefront isn’t Clarity’s current focus, setting up these basic commerce features will set them up for success in the future.

Exercise: Creating Clarity’s Products Catalog

A catalog is the foundational container for any merchandise. To begin migrating their product data into Liferay, Clarity needs a dedicated catalog to house their eyewear lines.

Here, you’ll create the primary catalog for Clarity’s products as Ian Miller.

1. Sign in using these credentials:

   • Username: ian.miller@clarityvisionsolutions.com
   • Password: learn

2. Open the Global Menu (), go to the Commerce tab, and click Catalogs.

3. Click New.

4. Enter the following:

   Field	Value
   Name	Clarity Eyewear
   Default Catalog Language	English (United States)
   Currency	US Dollar

   

5. Click Submit to finish creating the catalog.
   

Great! Now that you’ve created the catalog, you can start adding products to it. But first, you’ll define specifications that you can add to Clarity’s created products.

Exercise: Defining Product Specifications

Product specifications store information about products, like size, material, and color. Specifications drive faceted search and provide buyers with crucial details towards making informed purchasing decisions. To improve organization, you can also save these into specification groups. Establishing these attributes before creating products ensures data consistency across your catalogs.

Here, you’ll define a specification group and add glasses frame specifications as Ian Miller.

1. Open the Global Menu (), go to the Commerce tab, and click Specifications.

2. Click the Specification Groups tab.

3. Click New to add a new specification group.

4. Enter the following:

   Field	Value
   Title	Frame Description
   Priority	10.0
   Key	frame-description

5. Click Save to finish creating your product specification group.
   You can now add product specifications to it.

6. Return to the Specification Groups overview and go to the Specification Labels tab.

7. Click New to add a new specification.

8. Enter the following:

   Field	Value
   Label	Frame Material
   Description	The material of the frame.
   Use in Faceted Navigation	Enabled
   Default Specification Group	Frame Description
   Key	frame-material

9. Click Save to finish creating your specification label.

10. Create two more specifications with these values:

    Field	Value
    Label	Frame Color
    Description	The color of the frame.
    Use in Faceted Navigation	Enabled
    Default Specification Group	Frame Description
    Key	frame-color

    Field	Value
    Label	Frame Size
    Description	The size of the frame (in default units).
    Use in Faceted Navigation	Disabled
    Default Specification Group	Frame Description
    Key	frame-size

11. Return to the Specification Labels page.
    

Well done! You’ve added specifications to classify Clarity’s products. Now, you can apply them to products as you create them.

Exercise: Creating Products

Products typically represent a purchasable item. Here, you’ll add physical products to Clarity’s catalog as Ian Miller.

1. Open the Global Menu (), go to the Commerce tab, and click Products.

2. Click New and select Simple.

   NOTE
   A simple product is any physical product for which inventory is tracked.

3. Enter the following:

   Field	Value
   Name	Classic Aviator Sunglasses
   Catalog	Clarity Eyewear

4. Click Submit to finish creating your product.
   Now, you can configure the product.

5. In the Full Description field editor, add a product description with the AI Creator button () or other sample text.
   

6. In the Categorization section, click Select for Clarity Products.

7. Select Sunglasses and click Done to apply the category to this item.
   Now that the product is categorized, you can add its specifications.

8. Scroll down to the Specifications section, click New, and select Add an Existing Specification.

9. Enter these fields and click Submit:

   Field	Value
   Specification	Frame Material
   Value	Metal

10. Repeat steps 8-9 for the other specifications and enter these values:

    Specification	Value
    Frame Color	Gold
    Frame Size	54-20

    

    Next, you’ll add an image for the product.

11. Click Save as Draft to save your changes.

12. Go to the Media tab.

13. For Images, click New and click Select File.

14. Select the classic-aviator-sunglasses image from the Product Images asset library.

15. Enter these details for the image:

    Field	Value
    Title	Classic Aviator Sunglasses
    Priority	10.0

16. Click Publish to save the product image.

    

17. Click Publish to finish creating the product.

18. Repeat steps 1-17 to create two more simple products: AquaComfort Plus Dailies and Single Vision Lenses.

    Product	Specifications	Categories	Tags	Image
    AquaComfort Plus Dailies	N/A	Contacts	daily	aquacomfort-plus-dailies
    Single Vision Lenses	N/A	Lenses	single vision	biofinity-toric-lenses

    NOTE
    To add a tag, type directly in the Tags field on the product’s Details screen and hit enter.

    

Great! Now that you’ve added products, you can set up a channel to display them in Clarity’s site.

Exercise: Creating a Commerce Channel

Channels determine the storefront where products are displayed and sold to customers.

Here, you’ll create a channel and link it to Clarity’s public enterprise website as Ian Miller.

1. Open the Global Menu (), go to the Commerce tab, and click Channels.

2. Click New.

3. Enter the following:

   Field	Value
   Name	Clarity Public
   Currency	US Dollar
   Type	Site

4. Click Add to finish creating your channel.

   NOTE
   To display products in a site, you must link it to a channel.

5. Go to the Type tab and click Select Site.

6. Choose Clarity Public Enterprise Website.

7. Click Save.

8. Go to the General tab, select B2B in the Commerce Site Type drop down menu.
   

9. Click Save.

Well done! You’ve created Clarity’s primary channel, and can now finish setting up their product pages.

Exercise: Setting Up the Product Pages

Well-designed product pages are essential for intuitively guiding users through catalogs and showcasing inventory. The course workspace already includes three wireframed pages for displaying Clarity’s products: Products, Product List, and Product Details.

Here, you’ll finish setting up each page as Clarity's Web Developer, Walter Douglas.

Updating the Products Page

Clarity’s Products page is a marketing hub intended to showcase the product categories defined in the Clarity Products vocabulary. By selecting a category, users are directed to the Product List page where they’ll only see products from the selected category. To make this page dynamic and easy to maintain, Clarity wants to use a commerce widget that automatically updates as new categories are added.

1. Sign in using these credentials:

   • Email: walter.douglas@clarityvisionsolutions.com
   • Password: learn

2. Go to the Products page and click Edit ().

3. Open the Components panel ().

4. Go to the Widgets tab.

5. Drag and drop the Commerce Categories Navigation widget into the Commerce Categories container.

6. Select the widget, click its Actions button () in the top right corner, and click Configuration.
   
   

7. For Vocabulary, select Clarity Products.

   NOTE
   Do not enable the Use Root Category option for this exercise.

8. Click Save and close the modal window.

   

9. Click Publish to view the updated page.
   Currently, you have a list of categories, but this is a long way from Clarity’s designs. The content of this widget is dynamically updated, so it’s easier to maintain as new categories are added and old categories are updated or retired. Next, you’ll improve its design.

10. Open the Site Menu (), expand Design, and select Templates.

11. Go to the Widget Templates tab.

12. Click New and select Commerce Categories Navigation Template.

13. Enter Clarity Category Cards as the template name.

14. From your course workspace, open the exercises/module-6/commerce-category-navigation-cards.ftl file.

15. Copy and paste this file’s contents into the widget template editor.

16. Click Save.

17. Return to the Products page and begin editing it again.

18. Select the Commerce Categories Navigation widget, click its Actions button (), and click Configuration.

19. For Display Template, select Clarity Category Cards.

20. Click Save and close the modal window.

21. Click Publish and view the page.
    

Great! You’ve implemented initial category rendering to bring this page closer to Clarity’s planned design. Next, you will finalize the Product List page.

Creating the Product Listing Page (PLP)

Currently, while the Commerce Categories Navigation widget provides links to each category, the links aren’t working. Liferay doesn’t yet know which page to display for each category. For Liferay to recognize a page as a category display page, you must add the Category Content widget to it or assign it to the channel.

Here, you’ll update the Product List page by configuring its application display template.

1. Go to and begin editing the Product List page.

2. From the Components panel (), drag and drop the Category Content widget just above the Search Results container.
   

3. Click Publish.

4. View the Products page and click one of the category cards to confirm the link is now working. However, since it doesn’t yet have a configured display template, its search results will be blank.

5. Open the Site Menu (), expand Design, and select Templates.

6. Go to the Widget Templates tab.

7. Click New and select Search Results Template.

   NOTE
   There are two “Search Results Template” options. One is for general search results, while the other is for Commerce products. Try selecting the second option first. If it’s the right one, you will see some commerce specific variables in the Elements side menu (i.e., Commerce Product Search Result Display Context and Commerce Product Catalog Entries). If you do not see these variables, try using the other template.

8. Enter Clarity Search Results Cards as the template name.

9. From your course workspace, open the exercises/module-6/commerce-search-results-cards.ftl file.

10. Copy and paste this file’s contents into the widget template editor.

11. Click Save.

12. Go back to the Product List page and begin editing it.

13. Within the Search Results container’s grid element, select the Search Results widget.
    

14. Click its Actions button (), and click Configuration.

15. Expand Display Template and set the Display Template to Clarity Search Results Cards.

    NOTE
    If you don’t see the template here, return to step 7 and try the other Search Results template.

16. Click Save and close the modal window.

17. Click Publish.

18. View the Products page again and click one of the category cards.
    

Great! This page now lists products from the selected category.

Creating the Product Display Page

Individual product display pages provide customers with information about a specific item. Currently, when you click an individual product in the Product List page, the routing fails because Liferay doesn’t know which page template should display product details. Rather than building a static page for each product, Clarity needs to scale this configuration with a display page template.

Here, you’ll configure this template as Walter.

1. In the Page Templates application, go to the Display Page Templates tab.

2. Click New then Display Page Template.

3. Select Primary Master Page.

4. Enter these values and click Save:

   Field	Value
   Name	Product Details
   Content Type	Product

   This creates a new display page template for products.

5. Drag and drop the Product Details Page fragment composition into the drop zone.

   

6. In the Product Details container’s Description Container, map these fragments with their corresponding product fields.

   Fragment	Fragment Sub-Element	Mapping Field
   Product Name	element-text	Basic Information > Name
   SKU	element-text	Basic Information > SKU
   Description	element-html	Basic Information > Description

7. Select the button’s link sub-element and configure these settings:

   Tab	Field	Value
   Link	Link	Page
   Link	Page	Contact Us

   

8. Double click the Button fragment and change its text to Contact Sales.

9. In the Specifications container, double click the Heading fragment and change its text to Specifications.

10. Map fragments in the Specifications container’s nested grid to their fields:

    Fragment	Fragment Sub-Element	Mapping
    Specification Name	element-text	Basic Information > Name
    Specification Value	element-text	Basic Information > Value

11. In the Attachments container, double click the Heading fragment and change its text to Attachments.

12. Map this fragment in the Attachments container’s nested grid to its field:

    Fragment	Fragment Sub-Element	Mapping
    Attachment Name	element-text	Basic Information > Title

13. Select the Attachment grid’s Download button and set this values in the configuration side panel:

    Tab	Field	Value
    General	Size	Small

14. Select the Download button’s link sub-element and configure these settings:

    Tab	Field	Value
    Link	Link	Mapped URL
    Link	Field	Basic Information > Download URL

15. Double click the Download button and change its text to Download.

16. Click Publish.

17. Click Actions () for the Product Details template and select Mark as Default.

18. View the Product List page and select a product.

Well done! The link now directs users to a page displaying basic product details, which can be enriched further.

Conclusion

Leveraging Liferay’s commerce capabilities for product content provides a highly organized and scalable foundation for enterprise websites. By designing catalogs, specifications, and dynamic display templates, you can ensure products are easily discoverable and positioned for transactional capabilities.

Next, you’ll explore how to set up publishing workflows in Liferay.

Additional Resources

See official documentation to learn more about using Liferay Commerce features:

• Introduction to Liferay Commerce
• Catalogs
• Creating and Managing Products
• Channels