No-code enhancements to enrich your PWA Studio storefront

When we launched PWA Studio, our goal was to provide a development toolkit to aid in building progressive web applications optimized for the Adobe Commerce backend. Since then, we’ve come a long way in providing our merchants with the tools necessary to market, merchandise, and manage content for their modern storefronts.

With PWA Studio, marketers can use our popular drag-and-drop content editor, Page Builder, to create and update content on their PWA storefront. They can also use dynamic blocks to easily create personalized content and promotional offers to drive conversions. For additional upsell opportunities, PWA Studio is integrated with Product Recommendations, powered by Adobe Sensei, which provides AI-fueled recommendations based on shopper behavior, popular trends, product similarity and more. All of these capabilities are available out of the box to our users inside the Admin, lowering the total cost of ownership for PWA Studio.

With this release, we continue this momentum by offering full product attribute support.

Giving marketers and merchandisers code-free tools to enhance shopping experience

PWA Studio 12.4 supports a wide range of product attributes that can be created and managed without developer support. Product attributes are custom properties that can be assigned to products and leveraged on your storefront to both inform and guide shoppers during their purchase journey. Attributes can be things like color, size, material, fit, features, and more.

With PWA Studio 12.4, we support a comprehensive list of attribute input types. The input types define what options marketers and merchandisers can choose from when assigning attribute values to products. Some of the input types include:

Attribute input types in the admin and displayed on the product detail page

Set-up and assignment of these product attributes can all be configured right in the Admin without any help from a developer or partner, thus lowering the total cost of ownership by putting this functionality directly in the hands of marketers and merchandisers.

Once you’ve created your attribute input types, they can be leveraged for products across your storefront in key browsing areas such as:

Advanced browsing options for shoppers with product attributes

On the product listing page, you can include product attributes in Search to improve discoverability and provide relevant results. In the following example, a shopper has entered “eco-friendly” in the Search field and the results page returned products that have that attribute value assigned to them.

Example of attributes informing search results, filtering options, and sort choices.

You can also use product attributes in your filter and sort options to help shoppers narrow their results even further. In the same example, after the shopper found search results for “eco-friendly” products, they were able to filter even further to see products specifically for “running.”

Creating an informative and robust product detail page

The value of product attributes goes beyond search and filtering. They can also be used to create a rich product narrative on product detail pages. Supplemental information about your product can be added to inform the shopper about product details like activity, season, material, and fit. All of this information is powered by the attributes assigned to the product. In the example below, you can see the information assigned to this product in the details section.

Product attributes on a details page give the shopper additional information about the product.

To supplement text-based attributes, you can also include rich media content related to your product by using the “Page Builder” product attribute type. This attribute type allows you to use our drag-and-drop editor, Page Builder, to create a rich media module that can be displayed on the product details page along with the rest of your product's information. By integrating Page Builder into product attributes, we give our merchants the ability to add, edit, and test content related to their product easily and efficiently. In the example above, the merchandiser has included imagery and text to build a rich narrative about “Why we like the Waterproof Jacket Shell” to help educate the consumer on the benefits of this jacket.

Accessing the Page Builder attribute type from a product configuration page

In addition to the product attribute sections, the description, product name, price, and imagery can also all be updated at any time without developer support.

As this example illustrates, we give the marketer and merchandiser total authority over the product detail page and advanced options for product discovery through the implementation of product attributes. Reducing developer or partner reliance in this area helps to lower time to market by putting the control in our merchants’ hands so they can deliver an exceptional shopping experience.

Visit our documentation site for more information about the latest enhancements to PWA Studio for Adobe Commerce. And in case you missed it, we’ve also recently released Adobe Commerce 2.4.4. Learn more here.