Optimising product listing pages with rich content and UI

What it means to optimise a PLP

When we talk about optimising a PLP, it’s important to clarify exactly what we mean, as the term can vary depending on your profession or experience.

For some, optimisation might be about improving how well the page ranks on Google.

For others, it’s all about improving the user experience or increasing sales-related metrics like the page’s conversion rate.

• Click-Through Rate (CTR): Improving the likelihood that users will click on products or links within the PLP, often by using compelling visuals, clear CTAs, or strategic placements of promotional content.
• User Experience (UX): Making the page more intuitive, visually appealing, and easier to navigate for customers, allowing them to find what they’re looking for without frustration.
• Add to Basket Rate (ATB): Focusing on how well the page encourages users to add items to their basket. This often involves presenting the right products in the right way, at the right time.
• Conversion Rate (CR): Turning browsers into buyers by guiding them through the purchasing process and reducing any barriers to completing a purchase.
• Search Engine Optimisation (SEO): Making sure the page is structured and optimised in a way that search engines can easily understand and rank, bringing in more organic traffic.

It’s not uncommon for a PLP to excel in one area while underperforming in another.

For instance, it might rank highly on search engines but struggle to encourage the traffic to click through, add to basket or convert.

In this article, we’ll explore how to address these various aspects of optimisation, with a particular focus on rich content and UI techniques.

The goal is to create product listing pages that engage both customers and search engines alike, driving better results across the board.

Using rich content to optimise a product listing page

Rich content is a powerful tool for elevating your product listing pages.

By definition, ‘rich content’ simply means going beyond the basic product information you would usually find on a PLP (mainly the product title and price), exploring new methods of using text and media to encourage action.

Break up the listings with rich content

Product listings are often displayed in a traditional grid format, with rows of product images and prices. While this layout is effective for showcasing a wide range of items, it can sometimes feel monotonous or overwhelming for users.

To create a more engaging and dynamic experience, some merchants strategically break up the grid by replacing certain product squares with rich content instead of products.

This content could take various forms, such as expert advice, "Did You Know?" sections or storytelling elements for your own brand. You might also highlight unique selling propositions (USPs) or include persuasive calls-to-action (CTAs).

When used sparingly and with a clear focus on key benefits, this technique can grab attention, guide users towards important information, and ultimately encourage them to click through or add products to their basket.

Perfect for: UX, CTR, ATB

How we can help:

• Integrate CTA blocks into your product listing merchandising strategy.
• Control the precise placement of these content blocks to maximise impact and relevance.

Display interactive product media

Instead of relying solely on static images and text, you can use dynamic elements like videos, image carousels, and interactive features to capture attention and highlight key product details.

For example, you can use image carousels to showcase different features or details of a product or implement text overlays to call out key comparable features.

A “Key Info” button can be particularly useful for complex products, providing users with essential information at a glance. Videos, especially for priority products, can break up the monotony of product grids and offer a more immersive experience.

When done effectively, these interactive elements can enhance the user experience by quickly conveying important benefits and features, potentially reducing the need for users to navigate away to product detail pages.

Perfect for: UX, CTR

How we can help:

• Utilise our full Product Information Management (PIM) system to upload and manage rich media and content fields for your products.
• Leverage our eCommerce website development capabilities to integrate this media into innovative and interactive front-end designs.

Set up callouts for your products

Callouts are visual text snippets strategically placed on product listings to highlight key unique selling propositions (USPs), special offers, or important information.

These snippets are designed to grab attention and help users quickly identify deals and relevant details as they browse through listings.

Callouts can be set up in two ways:

• Automated Callouts: These are dynamically generated based on product attributes such as stock levels, pricing, or current promotions. For instance, a product might display an “In Stock” tag or a “20% Off” banner automatically.
• Manual Callouts: These are created manually to feature specific highlights or offers that might not be covered by automation. For example, you could manually tag a product with “Best Seller” or “New Arrival” labels based on strategic marketing decisions.

By using callouts effectively, you can make key information more visible, thus guiding users towards making quicker purchasing decisions and increasing their likelihood of adding products to their baskets.

Perfect for: ATB, CTR, CR

How we can help:

• Set up automated callouts based on real-time product, stock, pricing, and offer data.
• Create manual callouts using our inventory tagging system to feature specific highlights or promotional messages.

Internally link to related informational content

Creating a connection between your product listings and related informational content can greatly enhance the customer journey, especially for complex or high-ticket items. 

By interlinking to content that educates, informs, or engages, you provide additional value that helps potential buyers make informed decisions.

For instance, if you have in-depth articles, guides, or case studies related to the products in your PLP, consider linking to these resources as callouts on your listing pages, in the footer, or even directly from individual product entries.

Don’t hesitate to direct customers away from the listing page if it means leading them to high-quality, relevant content. Confidence in the strength of your content can help navigate users effectively toward making a purchase.

Perfect for: CR, SEO

How we can help:

• Use the Related Products feature to create connections between articles and the products they discuss.
• This can power front-end messaging on both product listing pages (PLP) and product detail pages (PDP) to enhance content relevance and engagement.

Use product descriptions on the listing page

For certain products, especially high-ticket items, those with subtle variations, or products that require detailed descriptions, providing additional context directly on the product listing page (PLP) can be highly beneficial.

By pulling through detailed descriptions to the PLP, you offer customers a clearer understanding of the products right from the browsing stage, helping them make more informed decisions without having to navigate away to a product detail page (PDP).

This technique is particularly useful for smaller PLPs where adding extra information doesn’t overwhelm the overall experience. It also provides more indexable content, which can enhance SEO by increasing the amount of relevant text available to search engines.

Perfect for: ATB, CTR, SEO

How we can help:

• Store comprehensive information about each product, including custom descriptions for display on the PLP.
• Pull through PDP content or create a series of bullet points to feature key details on the PLP.

Add detailed listing descriptions

Most PLPs feature brief descriptions above the fold to introduce the product collection. While this approach works, there's an opportunity to go further by adding more detailed content towards the footer.

This could include FAQ accordions that address common customer questions or storytelling elements that provide more context for the products.

Not only does this additional content provide users with valuable information, but it also boosts SEO by adding more indexable content to the page.

It's a win-win: customers find the answers they need, and your page gains relevance in search results.

Perfect for: SEO, UX

How we can help:

• You can fully manage your listing pages with CMS blocks, giving you the flexibility to add and arrange content as needed.
• We can provide you with advanced fields tailored to your requirements, like a ‘long description’ section that appears below the fold.

Using a strong user interface (UI) to optimise a product listing page

A strong UI is key to creating a product listing page that is both visually appealing and highly functional.

By designing an intuitive and engaging layout, you make it easier for customers to navigate and interact with the page effectively. 

Offer unique and useful sorting methods

By allowing users to sort products based on specific attributes—such as technical features, popularity, or new arrivals—you help them quickly find what they’re looking for.

This is particularly valuable for technical products or large inventories where default sorting might not highlight the most relevant options.

Additionally, consider how you want products to load by default when the PLP is first accessed. Setting a default arrangement that prioritises high-impact items or current promotions can guide users to key products more effectively.

Thoughtful arrangement can helps users encounter the most relevant and useful products faster, enhancing their browsing experience and increasing the likelihood of them finding and engaging with the right items.

Perfect for: UX, CTR

How we can help:

• Set your loading preference to determine how products are sorted when the PLP loads, such as showing sale items first.
• Manually arrange products in a PLP using our drag-and-drop system for custom layouts.
• Implement unique sorting methods based on product attributes.

Allow customers to change the layout of the PLP

Allowing users to switch between a single-column layout and a traditional grid format enables them to view products in a way that suits their needs.

This flexibility is particularly beneficial when incorporating rich content strategies, as a single-column layout provides more space for detailed product descriptions and engaging visuals.

This customisation not only improves user experience by accommodating different browsing styles but also increases click-through rates by making products more accessible and appealing.

Perfect for: CTR, ATB

How we can help:

• Implement customisable layout options in your website development to allow users to switch between different viewing formats.
• Utilise our feature to integrate flexible layout choices into your PLP, adapting to various content.

Buy directly from the listing page

For certain products, especially smaller ticket items or those typically purchased in isolation, allowing users to initiate checkout directly from the PLP can be a game-changer.

By offering a ‘quick buy’ button or a similar feature, customers can make swift purchase decisions without needing to navigate to the product detail page (PDP) or even the basket.

This approach is ideal for products where decisions can be made with minimal information, creating a more streamlined and efficient shopping experience.

By fast-tracking the purchasing process, you can reduce friction and increase conversion rates, particularly for users who value speed and convenience in their shopping journey.

Perfect for: CR

How we can help:

• Implement ‘quick buy’ buttons or similar functionality on your PLP, allowing customers to skip directly to checkout for select products.

Provide an optimal filter layout

Filters are essential for refining the products contained within a PLP,  but they can become a source of frustration if they aren’t designed with the right user experience in mind.

To create a smooth filtering process, it’s important to consider the layout and relevance of the options you provide.

A few key tips:

• Arrange filters in a logical order of importance from top to bottom, ensuring that the most commonly used filters are easily accessible.
• Avoid displaying irrelevant filters that might clutter the interface—while filters often auto-generate from product attributes, not all may be useful for customers.
• Additionally, incorporating expandable and collapsible filters allows users to hide options they’ve already used or don’t need, keeping the interface clean and focused.

Optimising your filter layout ensures that users can quickly and easily narrow down their options, making for a more enjoyable and efficient shopping experience.

Perfect for: UX

How we can help:

• Work with you during the onboarding design process to map out and agree on the essential filters for different types of PLP.
• Utilise Microsoft Clarity to track filter usage and refine your filter layout over time based on real user data.

Display all available variants on the PLP page

Displaying available variants immediately demonstrates the full range of choices to the customer, making it more likely they’ll find an option that suits their needs.

This can encourage them to click through to the product page or even make a quicker purchase decision.

To take this approach further, some websites allow customers to interact with the variants directly on the PLP, with the product image adjusting in real-time as they select different options.

This added functionality provides a more dynamic browsing experience and helps users see the product in their preferred variant without leaving the PLP.

Perfect for: UX, CTR

How we can help:

• Identify this need during the design workshop and incorporate variant display functionality into your new website.
• Implement interactive variant options, allowing product images to adjust on the PLP as users explore different choices.

Keep product images consistent

Ensuring that all product images maintain the same sizing, lighting, tone, gradient, and backgrounds helps to present a cohesive visual experience that customers find appealing and trustworthy.

Inconsistent images can be distracting and off-putting, potentially leading to a negative perception of your brand and products.

Consistency in imagery not only enhances the overall user experience but also makes it easier for customers to compare products, as they aren’t thrown off by varying photo styles or qualities.

This attention to detail can subtly influence customer confidence and decision-making, encouraging them to explore more products or make a purchase.

Perfect for: UX

How we can help:

• Provide guidance on best practices for maintaining consistency in product imagery.
• Offer image compression techniques that preserve quality while optimising file sizes and load speeds.
• Utilise our PIM (Product Information Management) system to store and manage consistent product images across your site.

How to find your optimisation opportunities

Here are some practical steps to uncover the low-hanging fruit that could make a big difference to your PLPs:

Conduct SEO and UX audits

Start with a comprehensive review of your existing PLPs.

An SEO audit will reveal any content gaps that may be affecting your rankings, while a UX audit will identify areas where the user experience can be improved. Consider reaching out to specialists who can offer tailored advice based on the unique needs of your website and products.

Ask customers for feedback

Sometimes, the best insights come directly from your users.

Gather feedback through surveys, reviews, or direct communication to understand what aspects of your PLPs are working and where there’s room for improvement. Customer feedback can often reveal pain points or opportunities that data alone might miss.

Run an A/B test

One of the most effective ways to determine what works best on your PLPs is through A/B testing.

Experiment with different layouts, content placements, and CTAs to see which variations yield the highest engagement and conversion rates. A/B testing allows you to make data-driven decisions and find the optimal combination of content and layout.

Track the important KPIs

To ensure your optimisation efforts are making a difference, keep a close eye on your KPIs.

Focus on metrics such a CR, bounce rate, average time on page, and user engagement. They will help you gauge how well your PLPs are performing and where adjustments might be needed.

Iterate based on your data

Optimisation is an ongoing process, so continuously analyse the data from your testing and metrics to refine your strategies.

Don’t be afraid to adjust your approach as you learn more about what resonates with your customers. By embracing a culture of continuous improvement, you can ensure your PLPs are always performing at their best.

The risk of over-optimising product listings

It’s easy to get caught up in the pursuit of optimisation, especially when faced with a range of new techniques and trends.

However, it’s important to remember that bigger isn’t always better.

A successful PLP doesn’t necessarily mean implementing every optimisation strategy available. Instead, focus on understanding your customers’ unique needs and the type of experience they seek on your website. Overloading a PLP with too many features or content can have the reverse effect.

The key to effective optimisation is balance. When designing a new eComemrce website, we consider what will best complement your products and enhance the shopping journey without overwhelming your users.

Every decision is guided by the question: “Does this improve the experience for your customers?” By being selective and thoughtful in our approach, we can create a listing page experience that truly resonates with your audience, rather than one that simply ticks all the boxes.

Learn more: eCommerce website design