Analytics & Reports


This material is supplemented by the generated docs.

At its very simplest, StoreFront requires three things to function.

The StoreFront JavaScript Artifact
<!DOCTYPE html>

    <meta charset="utf-8">
    <script src="" charset="utf-8"></script>


    <script src="/storefront.js" charset="utf-8"></script>

A JavaScript file (or `<script>` tag) to Initialize Storefront
Include this at the bottom of your HTML body
// storefront.js
new storefront({
  customerId: '--customerId--',
  area: 'Production',
  collection: 'default',
  structure: {
    id: 'id',
    title: 'title',
    price: 'price',
    image: 'image'
  tags: {
    sort: {
      labels: [
        'Price High to Low',
        'Price Low to High'
  search: {
    fields: ['*'],
    pageSize: { options: [20, 40, 60], default: 20 },
    sort: [
      { field: 'price', descending: true },
      { field: 'price', descending: false }

The tags/components included in the HTML
<!DOCTYPE html>

    <meta charset="utf-8">
    <script src="" charset="utf-8"></script>



    <script src="/storefront.js" charset="utf-8"></script>


To simplify this setup process, we have created a very small slush generator to scaffold your own starter project. To use the slush-storefront npm package, follow the StoreFront setup.

IE11 Support

IE11 does not have all the functions natively to support Storefront. Because of this we use a Polyfill wrapper to give it these capabilities.

To use this wrapper, encapsulate your configuration inside this call:

storefront.polyfill( function () {
  new storefront(){

Note: For more on Polyfills


Component Packages

New: The StoreFront project has moved to a monorepo. This is where all the release notes for all of the packages can be found.

Old: These are links to the release notes for each package.




  • The URL is updated before any requests are sent. This should reduce the number of extraneous calls.
    • Observer events DETAILS_CHANGED and PAST_PURCHASE_CHANGED fire on new details and past purchase searches respectively.
  • Repeat queries are now allowed.
  • Zero results will no longer be shown for a search that returns a redirect.

Bundled package versions

Package Version
@storefront/breadcrumbs 1.28.6
@storefront/collections 1.28.3
@storefront/core 1.47.0
@storefront/details 1.28.4
@storefront/did-you-mean 1.28.6
@storefront/flux-capacitor 1.57.0
@storefront/infinite-scroll 1.2.0
@storefront/navigation 1.38.2
@storefront/page-size 1.30.4
@storefront/paging 1.29.4
@storefront/products 1.34.7
@storefront/query 1.35.8
@storefront/recommendations 1.25.5
@storefront/record-count 1.29.3
@storefront/related-queries 1.28.6
@storefront/sayt 1.37.7
@storefront/sort 1.30.5
@storefront/structure 1.40.3
@storefront/template 1.29.6



  • onUpdate and onUpdated now gets the previous state passed in as the second parameter.
  • gb-record-count now takes a limitCount prop that shows the full record count when its value is false.
  • Component versions are listed at the end of the bundle file.
  • The count can be shown for selected refinements by setting the alwaysShowTotals prop to true on gb-navigation.
  • Search overrides are now independent from autocomplete overrides.
  • Fetch actions now take an options object instead of explicit arguments.
    • This options argument can contain a partial request as the value to the request property to override parts of the final request that is sent.
    • The new function signatures are reflected in the documentation.

Bundled package versions

Package Version
@storefront/breadcrumbs 1.28.5
@storefront/collections 1.28.2
@storefront/core 1.46.9
@storefront/details 1.28.3
@storefront/did-you-mean 1.28.5
@storefront/flux-capacitor 1.54.0
@storefront/infinite-scroll 1.1.4
@storefront/navigation 1.38.2
@storefront/page-size 1.30.3
@storefront/paging 1.29.3
@storefront/products 1.34.6
@storefront/query 1.35.6
@storefront/recommendations 1.25.4
@storefront/record-count 1.29.2
@storefront/related-queries 1.28.5
@storefront/sayt 1.37.6
@storefront/sort 1.30.4
@storefront/structure 1.40.2
@storefront/template 1.29.5



  • provide/consume
    • use options: { legacyAliasing: true } in configuration to opt out
  • this.subscribe(event: string, handler: function) and this.subscribeOnce(event: string, handler: function)
    • removes event listeners on unmount
  • shouldUpdate
    • use mixins: { global: { shouldUpdate: true } }

Bundled package versions

Package Version
@storefront/breadcrumbs v1.28.3
@storefront/collections v1.27.2
@storefront/details v1.28.2
@storefront/did-you-mean v1.28.3
@storefront/infinite-scroll v1.1.2
@storefront/navigation v1.37.0
@storefront/page-size v1.30.1
@storefront/paging v1.29.1
@storefront/products v1.34.3
@storefront/query v1.35.5
@storefront/recommendations v1.25.2
@storefront/record-count v1.28.2
@storefront/related-queries v1.28.3
@storefront/sayt v1.37.4
@storefront/sort v1.30.2
@storefront/structure v1.40.0
@storefront/template v1.29.3