Highlighted Features

Here are the latest highlights and features in eSales Fashion. To receive updates automatically, subscribe to our newsletter. For all updates to eSales Fashion, see the Full Changelog.


Custom icons

Custom font icons

It is now possible to use custom font icons in the web components. This allows retailers to further change the look and feel towards their branding. An external .woff-file containting the font glyphs can be used to change the iconography and replace all or any icons used.

How to use

Create a .woff-file containing the desired icons according to the custom font icon specification, see Theming API. Add the full path to the .woff-file to the script used for the esales.init function, see Script Initialisation.

// init-esales-fashion.js
iconUrl: 'https://cdn.esalesdrivensite.com/custom-icons.woff',


Mobile image performance enhancement

Page speed and reduced data consumption is an important factor, especially for visitors on mobile devices. To increase the performance and reduce the overall data usage for a visitor it is now possible to supply images in multiple image sizes. The eSales Fashion components will automatically use the best suited image resolution for the current context by utilising the native browser support for handling multiple image resolutions.

How to use

Supply images in all suitable formats in the Images section of the products in the data feed.

    <image type="model">
        <url width="200">//cdn.esalesdrivensite.com/images/123-B_model.jpg?preset=200x200</url>
        <url width="600">//cdn.esalesdrivensite.com/images/123-B_model.jpg?preset=600x600</url>

SEO meta data

SEO meta data - Canonical tags, dynamic page title and meta description

A navigation page can be reached through multiple URL paths. To ensure that search engines reward and score the navigation page properly even though multiple pages display the same content, automatic canonical URL generation is now supported.

Further more, support for generating and setting specific page titles as well as meta descriptions for category pages is now available.

How to use

Enabling of automated canonical URLs and dynamic page titles are managed in the Settings tab in the Experience app. Meta descriptions and specific page titles can be set for each category in the Navigation tab in the Experience app.

The footer slot in the Navigation assistant component supports a new attribute, fixed, that fixates the position of the slot at the bottom of the Navigation assistant. This can for example be used to have links to pages for store locations and contact information visible at all times.

How to use

Add the additional attribute fixed with the value true to the footer slot. For more information, see Slots for the Navigation assistant.

        <span slot="footer" fixed="true">Fixed at the bottom.</span>


Product life cycle

The trend and behaviour analysis part of the product ranking in eSales Fashion has become even more sophisticated. It now understands concepts that affects the product life cycle, such as a product being put on sale or becoming out of stock. This affects multiple areas of ranking, that is search results, category listings, phrase suggestions, product suggestions, alternative recommendations, complementary recommendations, and facet relevance.

Product life cycle based product ranking

Extensive product life cycle analysis and research has enabled eSales Fashion to a greater understanding of how purchasing trends tie together with a product's current state in its life cycle. For example, eSales Fashion understands that a high performing product on sale doesn't necessarily keep selling well when the sale is over. Another example is that it understands that out of stock products don't sell well because they can't be purchased rather than them being unpopular. It might even be that high popularity caused some products to quickly become out of stock in the first place.

The newness of products is another facet of a product's life cycle that has been enhanced further. New products needs increased exposure to acquire a correct evaluation of their popularity, but exploratory exposure comes at the cost of exploiting the insights of how they perform. Meaning unpopular new products shouldn't keep taking up screen real estate that can be better used by popular products once they've had the chance to prove themselves. eSales Fashion caters for this through greater initial exposure of new products with especially reactive and clever ranking of this segment to avoid overexposure.

Combining these product data insights with trend sensitivity in a clever way, allows eSales Fashion to adapt even faster.

How to use

It just works!


SEO preamble texts

SEO preamble texts

Preamble texts to display above the facets in each category can be added in the Experience app. Texts are displayed in both desktop and mobile view. Longer texts are truncated but can be expanded by a visitor by tapping or clicking an expand label, here with the text VIEW MORE. The preamble expand label can be localised in the Localisation tab in the Experience app. The preamble text feature itself does not require any actions by developers to be used.

How to use

Preamble text can be added and edited in the SEO section for each category in the Navigation tab in the Experience app.

Recommendations carousels

Recommendations carousels

The Recommendation component now supports product carousels for both desktop and mobile devices. This is done with the addition of the attribute carousel to the component. An additional attribute, breakpoint, can be added with a pixel value that determines when the carousel scroll arrows are to be either outside or inside of the carousel. The default value is 1050.

How to use

Add the attribute carousel to a Recommendation component. The following example illustrates an alternative recommendation carousel with a window breakpoint of 1200 pixels.

<esales-recommendation zone-id="sp2" size="8" carousel breakpoint="1200" type="ALTERNATIVE" label="Similar items"></esales-recommendation>

For more information, see Recommendation Integration.

Out of stock visualisation

Out of stock visualisation

The visualisation of products that are out of stock, but still are to be displayed according to the Out of stock options, has been improved. Product groups where all variants of a product in the group are out of stock will have the product image dimmed with a diagonal line across it. Product groups where all variants of all products are out of stock will have the image completely dimmed with no variants shown, and with a label indicating that the product is sold out. The label can be localised in the Localisation tab in the Experience app.

How to use

Visual enhancement is applied automatically for displayed out of stock products. Note that out of stock visibility is configurable and that the effects only can be seen if out of stock products are displayed.


Performance improvements

The component script will now dynamically load required polyfills only when necessary. This way, modern browsers that already has the functionality built-in will no longer need to load and run this code. The files esales-fashion-polyfills.js and esales-fashion-polyfills.es5.js are deprecated and can safely be removed.

The modern JavaScript bundle, esales-fashion.js, have been improved together with the script initialisation. The updates will allow modern browsers to use this bundle, resulting in better performing and less code.

With both improvements above active at the same time, the total script size delivered to a modern browser will be reduced by ~42%. In Lighthouse page audits a ~20-25% reduction is observed in First Contentful Paint, Speed Index, Time to Interactive, and more.

Performance improvements may vary

The performance test was made using Lighthouse with the Device setting Mobile and the Throttling setting Simulated Slow 4G, 4x CPU Slowdown. The test was executed without any other scripts on the test page other than the Search results component.

The implementation of scripts on a site may block the eSales Fashion script with synchronous scripts. Note that older browsers, such as Internet Explorer 11, will download approximately the same amount of code as before. For more information about performance improvements using differential loading, see Dive Deeper.

How to use

Remove the polyfill scripts esales-fashion-polyfills.js and/or esales-fashion-polyfills.es5.js and update the script initialization snippet.


Size filters

Size filters example

It is now possible to create product selections based on size. This is particularly useful when highlighting size oriented selections, such as Curves or Petite. For example, a category Petite can be created with the product filter to include only products sold in smaller sizes. Similar to other categories, the autocomplete and search will automatically pick up the category title or other connected search terms and utilize them appropriately.

How to use

When creating product selections such as promotions, demotions, or categories in the apps, Size is available as a filter option.

Out of stock options

Example of changes using the Out of stock options

It is now possible to control the visibility and placements of products and variants that are out of stock with the Out of stock section in the Settings tab in the Experience app.

Option Description
Display out of stock sizes in product card The size is visible in the product card when enabled, but with a strikethrough effect applied on the text. The size is not visible when disabled.

Can be useful to be disabled if a large portion of the product catalogue has a large number of sizes, and many sizes are out of stock.
Display out of stock products in product list When enabled, products are visible but with the text defined for Out of stock displayed. The text is defined in the Product cards section in the Localisation tab in the Experience app. Products that are out of stock are not visible in product lists when disabled.

It is generally recommended to keep products out of stock displayed in product listings as visitors may be confused when not finding products they've previously interacted with.
Display out of stock products in product card Products that are out of stock are visible in the product card when enabled.
Products that are out of stock are not visible in the product card when disabled.

Can be useful to be disabled if a large portion of the product catalogue has a large variety of colour, and many colours are out of stock.

How to use

Enable or disable options in the Out of stock section in the Settings tab in the Experience app. It is recommended to preview the resulting changes before publishing the settings.

Display name support for attribute values

Display name support of attribute values

Since all attribute values used for product selections must be based on stable values, there are occasions where a merchandiser may have to work with system generated numbers. Support for display names of attribute values have been added to facilitate working with product selections with unintelligible values. This means that the product selection remains stable, while it is possible to work with readable names in the apps.

How to use

Supply display names in the data feed for values where identifiers are not human friendly. The following illustrates the syntax of the category Jackets with an external id 361: <category name="Jackets">361</category>.


Filterable list component

Pre-filtered products with the Filterable list component

A new component, Filterable list, <esales-filterable-list>, is now available. It contains a prefiltered product list with connected facets. Unlike the Search results component and the Navigation page component, this component does not require neither a search phrase nor a particular page route to be used. It is a product listing that can be used on any page that is independent from the navigation structure and the search functions.

An example of where this could be of interest is on a unique collection page, decorated with a custom title and lots of imagery. A product listing targeting that specific collection would be suitable to use here.

How to use

Add the Filterable list component, <esales-filterable-list> on the page where it should be displayed, assigned with the desired filter. Attributes targeted as filters must be present in the data feed. The following example filters on the custom attribute collection with the value FESTIVE_DRESSES.

<esales-filterable-list data-custom.collection="FESTIVE_DRESSES"></esales-filterable-list>


Size cleaning

Size cleaning example

Size cleaning example

Size cleaning is a feature that automatically extracts and interprets size information from uncurated size values that are provided in mixed formats the data feed. This enables a much cleaner set of values within the size facet without the need of any manual curation of the data feed. This feature is not needed if the data feed already contain purely curated values.

Size cleaning uses several methods to curate values including:

  • Splitting values such as XS/S to XS and S respectively for the size facet while maintaining the correct presentation in the product card.
  • Combining values such as One Size, one size, and O.S under a common value by selecting the most common representation for the product card.
  • Splitting of multiple sizes provided in different formats such as M=44/46.
  • Automatic separation of formats.

How to use

Enable the feature in the Size cleaning section Settings tab in the Experience app. It is recommended to preview the resulting changes to the facets before publishing the settings.


Localisation interface update

Experience app - Localisation - Home

The view for localising texts has been improved by a clearer user interface for input fields including recommended text lengths, a table of contents to easier find values to localize, and a visualization of colours in the interface.


Quick buy button

Themeable Quick buy button

Support for adding a quick buy button to the product cards have been added. The image above shows the default visuals of the button but it can be themed to a different look using the Theming API. The button will provide an event with information of the product that was targeted. This button can also be used to enable quick view or similar modal functionality, and the text of the button can be localized using the Localisation tab in the Experience app.

How to use

  1. Enable the button by specifying productQuickBuyPosition in the theming of the script.

  2. Integrate the desired modal functionality upon a triggered event.


Subscribe to the eSales Fashion Changelog:


This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.


Last update: January 20, 2020