Product Listings Settings

You can find this section under Application Settings > Product Listings Settings in the IRP Admin left navigation menu.

Product Listings allow merchants to configure the display of product listings pages across Desktop, Mobile and Trade sites to suit their individual business requirements. Product listings can increase conversion by allowing online shoppers to easily discover and select products for purchase.

Product Listings are highly configurable and settings allow listings displays for B2C Desktop, B2C Mobile and Trade Desktop shopping to be individually configurable. All listing across IRP are based on model data and user experiences are common across devices.

Merchants can choose on desktop displays to have filters left or top, determine the number of columns and easily configure the individual products display within a list. Merchants can also choose to add inline advertising banners within a list.

Merchants will also avail of the page speed performance enhancements.

Listing page layout can be configured to display filters set to the left side or top of the listings. Additionally filters can be manually hidden and shown if the ‘Enable Filter Display Toggle’ is enabled in the configuration.

Merchants can set the filter order and determine if all, none or some of the filters are expanded by default

Some filters, like colour, may have a considerable number of attributes and the merchants may wish to enable a search at the filter level when an attribute threshold number is exceeded using the ‘Filter SearchText Box Display Threshold’ configuration.

The number of default columns can be set in the configuration but an additional useful manual onscreen component can be enabled to allow the shopper to choose how to display products in the list (from 3, 4 or many columns), using the ‘Enable Column Configuration’ setting.

There are a number of pagination options that allow flexibility in how the merchants wishes to allow shoppers to navigate through list pages. Choose from pagination or load more options that can be individually set at the desktop, mobile or trade level.

In desktop displays the filters can appear on the left or top of the screen. Irrespective of the location they work in the same way. Selected filter attributes are added as ‘chips’ to the display, more filters can be added and the shopper can clearly see the attributes that are applied to the list. In the Top filter display the configuration allow for a limit to be added to the default number of available filters. Additional filters can be viewed by selecting the ‘More Filters button

Shoppers can see the count within each filter option and can easily remove chips to update the list. Shoppers can also reset the filter by selecting the ‘Clear All’ button.

A product list is made up of a result set of model list items. The contents of list items is highly configurable with the IRP.

Within the listing page configuration the merchant can set the image type, image quality, location of wish list, offer status and quick buy messaging and enable reviews and ‘View Products’ button.

Additional product features are enabled separately with the IRP such as Offer Status rules, Product Customisation, Loyalty and Subscriptions.

• Image
• Image Carousel
• Offer Status
• Quick Buy
• Personalisation
• Add to Wishlist
• Brand Name
• Product Description
• Price inc. Vat
• Price ex. VAT
• RRP/Savings
• Colour Selection
• Loyalty Points
• Review Rating
• Link to Category
• 'Available in' messaging
• View Product Details

In-Listing Banners allow merchants to advertise and market directly within a product list. Banners can enhance a brand or category by allowing merchants to think of creative ways to enhance the user experience and increase the chance of conversion across B2C Shopping in desktop and mobile. Merchants can assign one or more banners to the same in listing location.

In Listing banner configuration is as simple as a setting up banners within other pages in the IRP. New banner locations are available for desktop and mobile shopping and can support images and html in the same way as other banner locations.

In Listing Banner Locations

• Listing Brand
• Listing Brand and Category
• Listing Category

There is no set width or height rule for in-listing banners on desktop or mobile. This is due to different merchant configurations for products on the listing page that impact width and height. There can be different numbers of columns and product attributes that impact the width and height, (like image sizes, quick buy, wishlist, sales prices, loyalty, personalisation options).

There are some rules that can be followed that will make banner creation more likely to work correctly. Merchants can also use the examples included here as a base to create their own versions.

• HTML - As there is no default width and height recommendations make sure that text is centre aligned left/right and top/bottom in the banner. Make sure that the text is still highly readable when a background image is added.
• Image only - Either use html and add a background image to the html (as this will overcome width and height issues), or create your image and amend the width and height during creation and testing.
• Always make sure that your images are correctly compressed to maximise your sites performance.

Download Listing Page Banner examples for Desktop and Mobile here...

Quick Buy allows shoppers to select stock items directly from the listings without having to navigate to the models page. The quick buy feature is available in desktop and mobile.

The window can be configured to open either in the centre of the screen or sliding in from the right hand side.

The Quick Buy window supports images, pricing, and the attributes that are required to select the correct stock item (e.g. size, colour).

Trade listings have been updated to support the same features and functionality available in consumer shopping. All the features for filter location and product configuration are available.

Additionally trade shoppers can select stock items directly from the listing without having to access the models page to do so. This is a significant user experience enhancement as the functionality allow for the filtering and selection of complex stock items that may have a number of attributes assigned across stock items (like colour, size and fit). Support is also available for the display of quantity discounts and selection totals before adding the options to the basket.

It is important to select the right listing page layout and image settings for your online store. Some merchants will best suit left filters, some top filters. Some merchants WANT top filters just because it looks different, but experience tells us that in their industry the left filter would be better for conversion.

Consider the right layout for Desktop, Mobile and Trade shopping. Talk with your Account Manager or CSM about the right configuration for you.

Image Quality selection for Desktop and Trade

There are 3 image quality options to choose from. Each merchants images differ in payload size (kb), due to many factors including image complexity and compression.

• Standard - Images from '150' folder (e.g. avg 15kb) - This is the defauly image size used in IRP and will suit the needs of most merchants
• Better - Images from 'Full' folder (e.g. avg 50kb) - A higher quality image with a larger file size
• Best - Images from 'Original' folder (e.g. avg 230kb) - A best quality image, but with a significantly larger file size and should only be used when careful considered as part of larger page payloads

The mobile site only uses images from the '150' image folder. These are optimised for use on mobile already.

When choosing image quality (Standard, Better, Best) consider that there is a balance to be played when selecting image quality and the default number of list items to show. If you select ‘Better’ and run a default for 48 items per page (or above), then check the page payload kb size. You may decide to reduce the image quality configuration, increase the number of columns (running standard image quality), or reduce the default number of list items to display to make sure that the listing payload is as low as possible.

It is important that product listing images are in the correct format and compressed correctly for the web (by using .jpg or .webp formats). Do not use .png formats for product images as the file size is too large.

Carousel Images

When the carousel feature is enabled, the listing returns only the default image into the page. Clicking the 'next/previous' arrows retrieves more images into the page. This ensures that the initial page load is as small as possible and only returns additional images that the shopper want to see.

The order of products within a list is extremely important for merchants. Being able to control the list order of in stock, out of stock and products that may be available in a number of days allow merchants to maximise product selection and the chances of conversion.

Best Selling, Newest and Default/Recommended sorting will all introduce ‘stock weighting’ to make those listings have the most available products at the top. Other sorts obey the type of sort applied with no weighting applied (e.g. Discount Highest to Lowest).

Stock Weighting value relates to how we weight stock availability:

1. = In Stock / Stock Held Externally
2. = Available In Less than X Days
3. = Everything else

Merchants can enable stock weighting using the ‘Enable Sort By Stock Weighting’ configuration. They can include ‘available in’ products as part of in stock filters using the ‘Include Available In Status As In Stock’ configuration.

Sort options available to Desktop, Mobile and Trade:

• Default/Recommended
• Best Selling
• Price - Low to High
• Price - High to Low
• Discount - Low to High
• Discount - High to Lowv
• Product - A to Z
• Product - Z to A
• Category - A to Z
• Category - Z to A
• Customer Reviews
• Newest

Display Style Settings allows the merchant to select which version of the listings to display across Shopper - either the default (Display Style 1) or the new listings (Display Style 2). To ease the transition between Style 1 and 2 there is an addition preview setting (Display Style 1 with Admin Preview) that allows merchants to test the new listings pages without having to replace the default listing style.

• Product Listing Display Style
  • Display Style 1 - Default view that will be deprecated when all Merchants on the IRP switch to Display Style 2
  • Display Style 2 with Admin Preview - Test the new listings and configuration before going live on site
  • Display Style 2 - Sets the new listing live across all channels and views

Filter Settings enable the main filter displayed on the listing page and the high level rules for their order. Other factors may impact the order including orders set at the Attribute level and Attribute Priority settings.

• Enable Attribute Filter - Enables attributes filters that may be assigned to products that are returned in the list. Attribute order is set in Admin > Products > Attributes
• Enable Brand Filter
• Enable Category Filter
• Enable Price Range Filter
• Enable Priority Attribute Filter - Enables priority ordering of attributes if the ‘is Priority Attribute’ is set in the Admin > Products > Attributes
• Enable Review Rating Filter
• Enable Stock Availability Filter
• Filter SearchText Box Display Threshold - Enables the Search Text Box in a filter where the number of filter attributes exceeds the threshold. E.g. Search text box is displayed when there are more than 20 colours in the Colour filter
• Filter Display Order - Determines the order of the filters displayed in product lists

Allows the merchant to determine the consumer desktop listings page configuration.

• Enable Column Configuration - Enable on screen component that allows shopper to change the number of product columns on screen
• Default Column Configuration - Determines the number of default columns to display when the page is loaded. Select from 3 or 4.
• Filter Display Style - Determine if the filter display on the left or the top of the screen. The merchant can determine if all, none or a specific number of filters are open when filters are displayed. No value = All filters are open, 0 = All filters are closed, ‘Number’ = A specific number of filters are open
  • Left
    • Number of Left Filters Initially Open
  • Top
    • Number of Top Filters to Show
• Enable Sticky Listing Header - Enable or disable stickiness of Product Listing headers, allowing the content to remain at the top of the screen when the Product Listing page has been scrolled. The header is the content which contains the Show/Hide Filters button (if configured), applied filter chips, column display selector (if configured), page size selector (if configured) and Sort By drop down.
• Enable Filter Display Toggle - The toggle allows the shopper to manually determine if they want to hide or show the filters.
  • Initially Hide Filter - Determines if the filters are hidden by default.
• Default Listing Page Size - Determines the default number of list items to display. Select from 24, 48, 60, 96, 120 default items
• Pagination Type - Determines which pagination type is displayed
  • Page Sequence - Uses number sequence that allows the shopper to select either a number or navigate to the last or next page in the sequence
  • Page Selection - Shows the total number of pages in the sequence an allows the shopper to select a specific page number from a dropdown
  • Load More - Displays a load more and product count, allowing the shopper to add more products to the existing list
• Pagination Position - Determines the location of the pagination control, either Top, Bottom, Top and Bottom
• Model Image Quality - Determines the quality used for the product image. The display size of the image is not changed only the quality of the image. The image size can be updated through css. The options are Best, Better, Standard
• Image Section Display Style - Determines how images can be viewed directly within the list. Alternate images can be viewed with a simple rollover or through a carousel that allows for a larger number of images to be displayed directly in the list
  • Image Rollover
  • Image Carousel
• Offer Image Position - If an offer status is applied to a product then it’s location can be selected, including ‘inline’ that displays the offer image close to the product price, or from alternate locations overlaid on the product image.
  • Inline
  • Top Left Image Overlay
  • Top Right Image Overlay
  • Bottom Left Image Overlay
  • Bottom Right Image Overlay
• Enable Quick Buy - Determines if the Quick Buy feature is available
• Quick Buy Button Position - Determines the location of the Quick Buy button, including ‘inline’ that displays the button below the product image, or overlaid on the image either as always visible or on image rollover.
  • Inline
  • Image Overlay
  • Image Rollover
• Quick Buy Window Display Style - Determines the location of the Quick Buy modal window either on the centre of the screen or as a right side slideout panel.
  • Centre Modal
  • Right Side Slideout
• Wishlist Button Position - If wishlist is enabled then it’s location can be selected, including ‘inline’ that displays the wishlist image below to the product image, or from alternate locations overlaid or on rollover on the product image.
  • Inline
  • Top Left Image Overlay
  • Top Right Image Overlay
  • Bottom Left Image Overlay
  • Bottom Right Image Overlay
  • Top Left Image Rollover
  • Top Right Image Rollover
  • Bottom Left Image Rollover
  • Bottom Right Image Rollover
• Enable Review Rating - Enable the filter and select the minimum rating to display/ Setting to 1 means that all rating from 1 to 5 are displayed Minimum Review Rating to Display
• Enable Brand/Category Links
• Enable View Product Button

Allows the merchant to determine the consumer mobile listings page configuration.

• Default Column Configuration - Determines the number of default columns to display when the page is loaded. Select from 1 or 2
• Default Listing Page Size - Determines the default number of list items to display. Select from 24, 48, 60, 96, 120 default items
• Pagination Type - Determines which pagination type is displayed
  • Page Sequence - Uses number sequence that allows the shopper to select either a number or navigate to the last or next page in the sequence
  • Page Selection - Shows the total number of pages in the sequence an allows the shopper to select a specific page number from a dropdown
  • Load More - Displays a load more and product count, allowing the shopper to add more products to the existing list
• Image Section Display Style
  • Image Rollover
  • Image Carousel
• Offer Image Position - If an offer status is applied to a product then it’s location can be selected, including ‘inline’ that displays the offer image close to the product price, or from alternate locations overlaid on the product image.
  • Inline
  • Top Left Image Overlay
  • Top Right Image Overlay
  • Bottom Left Image Overlay
  • Bottom Right Image Overlay
• Enable Quick Buy - Determines if the Quick Buy feature is available
• Quick Buy Button Position - Determines the location of the Quick Buy button, including ‘inline’ that displays the button below the product image, or overlaid on the image.
  • Inline
  • Image Overlay
• Wishlist Button Position - If wishlist is enabled then it’s location can be selected, including ‘inline’ that displays the wishlist image below to the product image, or from alternate locations overlaid on the product image.
  • Inline
  • Top Left Image Overlay
  • Top Right Image Overlay
  • Bottom Left Image Overlay
  • Bottom Right Image Overlay
• Enable Review Rating - Enable the filter and select the minimum rating to display/ Setting to 1 means that all rating from 1 to 5 are displayed Minimum Review Rating to Display
• Enable Brand/Category Links
• Enable View Product Button

Allows the merchant to determine the consumer desktop listings page configuration. The Trade site must be enabled to access the Trade Listings Configuration settings.

• Enable Column Configuration
• Default Column Configuration
• Filter Display Style
• Enable Sticky Listing Header
• Enable Filter Display Toggle
  • Initially Hide Filter
• Enable Page Size Configuration - Displays the UI component allowing the merchant to determine if the default number of products on the page can be manually updated
• Default Listing Page Size
• Pagination Type
• Pagination Position
• Model Image Quality
• Offer Image Position
• Quick Buy Button Position
  • Inline
  • Image Overlay
• Quick Buy Window Display Style
• Enable Review Rating - Enable the filter and select the minimum rating to display/ Setting to 1 means that all rating from 1 to 5 are displayed Minimum Review Rating to Display
• Enable Brand/Category Links
• Enable View Product Button

Shopper settings are applied to consumer flows of desktop and mobile sites

• Enable Sort By Stock Weighting - Enables the merchant to bring better selling, in stock products to the top of listings
• Include Available In Status As In Stock - Includes stock that has the ‘available in’ flag/time set at the stock item level to be included as an ‘in stock’ item. This allows for ‘available in’ stock to be display at the top of listings pages. Not all stock items in a model may be out of ‘stock/available in’ so the best rule is applied (either all in stock or all out of stock). Additionally ‘Available in’ messaging is displayed for each applicable product
• Prioritise Available In Status Below Days Threshold - Prioritises the order of products in the list if they fall below the threshold
• Default Sort By Brand Page
• Default Sort by Category Page
• Default Sort By Brand Category Page
• Default Sort By Offers Page
• Default Sort By Search Results Page

Trade settings are applied to desktop Trade flows

• Default Sort By Brand Page
• Default Sort by Category Page
• Default Sort By Brand Category Page
• Default Sort By Offers Page
• Default Sort By Search Results Page