Search engines and AI assistants often cannot see your store finder. When they visit the page, your stores are not on it yet: they only appear later, on the visitor's screen. So your stores can be missing from search results and from the answers AI assistants give.

After these steps, every store finder page arrives with its stores already on it, with names, addresses and opening hours. Search engines and AI assistants can find each of your stores and show it. Your visitors see the store finder as usual.

It works for a store finder already on your site and for a new one. It takes five steps. The developer who deploys your storefront's code does them, in Business Manager and in your code.

What you need

A storefront on SFRA, Salesforce's Storefront Reference Architecture. In Business Manager, go to Administration, Sites, Manage Sites, your site, Settings: if the cartridge path has app_storefront_base, it is SFRA. A storefront on SiteGenesis, PWA Kit or Composable Storefront cannot use these steps: ask Uberall.

Rights to deploy code to your instances, and Business Manager access to Administration and Merchant Tools

The Uberall Store Finder cartridge, a zip file: uberall-store-finder-sfcc-latest.zip

Your render token, from Uberall. Each store finder has its own

Your locator key, from Uberall. If the store finder is already on your site, it is the data-key of its snippet:

<div id="store-finder-widget" data-key="YOUR_LOCATOR_KEY"></div>

Your store finder's address in each locale: the page it is on, such as https://www.example.com/de-de/stores/. Each store gets its own address under it

If the store finder is already on your site

After these steps, your store finder pages use only the settings saved at Uberall. What is set on the page itself no longer applies there:

• attributes on the store finder's div, other than data-key, data-language, data-countries and data-widgetoriginurl
• settings your site's scripts pass to UberallStorefinderMount or UberallStorefinderRestart, other than withoutMap

To find them, look in two places:

• The store finder's div, in the page's source: any data- attribute other than the four above.
• Your site's scripts, in the page's source and in your cartridges' JavaScript files: calls to UberallStorefinderMount or UberallStorefinderRestart.

If you find any of these settings, send them to Uberall before you start, to be saved with your store finder. Until then, leave the page as it is: the store finder keeps working as it does today.

Your pages' title and description

Uberall gives every store finder page its own canonical link. The title, the description and the preview image for social media come from Uberall only when they are set up there:

• The store finder's main page, and its directory pages (the lists of stores by country, region or city): only what is set up at Uberall.
• A store's page: always a title and, when the store has one, a description: the store's name and short description, unless others are set up. The image is the store's photo.

When Uberall sends no title for a page, the page gets the title you set in step 2. Without that, and without a description from Uberall, the page has what your templates print for a page without its own. So check with Uberall first that a title and a description are set up for your store finder, or send yours to be saved with it.

Step 1: Install the cartridge

Unzip the file. Its folder uberall-store-finder-sfcc holds the cartridge, cartridges/int_uberall_storefinder, and uberall_store_finder_site_import.zip.

Add int_uberall_storefinder to your code the way you deploy your own cartridges, and deploy it to your instances. Business Manager does not upload code: upload it over WebDAV or with Salesforce's b2c code deploy, then activate the code version in Administration, Site Development, Code Deployment.

In Business Manager, go to Administration, Sites, Manage Sites, your site, Settings. Add int_uberall_storefinder to the cartridge path, left of app_storefront_base, and click Apply. It extends SFRA's routes, so it has to be left of them:

app_yourbrand:int_uberall_storefinder:app_storefront_base

Do this for every site that has a store finder.

Go to Administration, Site Development, Site Import & Export. Under Import, choose uberall_store_finder_site_import.zip and click Upload. Then select it and click Import. It adds the two site preferences of step 2, and the service the cartridge calls Uberall with.

Check what the import added:

• Merchant Tools, Site Preferences, Custom Preferences has the group Uberall Store Finder.
• Administration, Operations, Services has the service, the profile and the credential uberall.storefinder.render. If the service is not there, import services.xml, from the folder inside uberall_store_finder_site_import.zip, in Administration, Operations, Import & Export.
• The credential's URL is https://uberall.com. If the credential is not there, create it on the Credentials tab, with the name uberall.storefinder.render and that URL. The cartridge sends no user or password, so leave them empty, or fill in anything if Business Manager asks for them.

If Business Manager refuses the import, send its message to Uberall.

Step 2: Add your render token and your store finder pages

In Business Manager, go to Merchant Tools, Site Preferences, Custom Preferences, Uberall Store Finder, in each site that has a store finder, and fill in its two fields.

Render tokens: your render token, in both of its boxes. The token stays on your server. Visitors never see it.

If the site has more than one store finder, each with its own locator key, write each key and its token with a colon between them, and a space between the pairs:

YOUR_LOCATOR_KEY:YOUR_RENDER_TOKEN YOUR_OTHER_LOCATOR_KEY:YOUR_OTHER_RENDER_TOKEN

Store finder pages: where the store finder is, in each locale, as JSON. Each entry's name is a locale ID, such as de_AT. A site with only its default locale has the ID default.

If your snippet has data-language, data-countries or data-widgetoriginurl, put the same values in lang, countries and origin. If it loads storeFinderWidget-v2-withoutMap.js, or your scripts start the store finder with withoutMap: true, add "withoutMap": true.

A locale without an entry keeps its page as it is today. So you can start with one locale.

a) One locator key for every locale, each locale with its own countries:

{
  "de_DE": {
    "key": "YOUR_LOCATOR_KEY",
    "lang": "de",
    "countries": "DE",
    "path": "/de-de/stores/",
    "route": "Stores-Find"
  },
  "de_AT": {
    "key": "YOUR_LOCATOR_KEY",
    "lang": "de",
    "countries": "AT",
    "path": "/de-at/stores/",
    "route": "Stores-Find"
  }
}

b) A locator key for each locale, on a content asset page:

{
  "nl_BE": {
    "key": "YOUR_DUTCH_LOCATOR_KEY",
    "lang": "nl",
    "path": "/nl_BE/stores.html",
    "route": "Page-Show",
    "cid": "stores"
  },
  "fr_BE": {
    "key": "YOUR_FRENCH_LOCATOR_KEY",
    "lang": "fr",
    "path": "/fr_BE/stores.html",
    "route": "Page-Show",
    "cid": "stores"
  }
}

with both keys and their tokens in Render tokens.

Step 3: Put the store finder on its page

The cartridge serves the store finder page on the route that serves it today. To find that route, open your store finder in the browser, right click, choose View page source, and search the source for data-action=:

UberallStoreFinder-Show is the cartridge's own route. To give it an address, go to Merchant Tools, SEO & Discoverability, URL Rules, Pipeline URLs. Choose the locale, and add an alias, such as stores, that resolves to UberallStoreFinder-Show. Aliases are per locale, so add it in every locale that has a store finder. The address the alias gives, such as /de-de/stores, is the path of step 2.

The cartridge extends SFRA's Stores.js, Page.js and RedirectURL.js. One of your own cartridges left of it can take a route away from it: a Stores.js, Page.js or RedirectURL.js that does not start with server.extend(module.superModule), or one that replaces the route, such as server.replace('Find' in Stores.js, server.replace('Show' in Page.js or server.replace('Start' in RedirectURL.js. If you find one, ask Uberall. On a store finder page, the cartridge answers the route itself, so a step your cartridges add to the end of one of these routes, with server.append, does not run there.

On the store finder page, the cartridge shows your site's header and footer, from common/layout/page, with the store finder between them. What the page had around the snippet before, such as a heading or a content asset's text, is not shown. To show your own, copy cartridge/templates/default/uberall/storeFinderPage.isml into the same place in one of your cartridges left of int_uberall_storefinder, and change it there. Keep its <isinclude template="uberall/storeFinder" />: that is the store finder.

The cartridge puts the store finder snippet on the page itself. The snippet you had on the page, in the content asset or the template, is not used on the store finder page any more. You can leave it there, or remove it once every locale is set up.

Step 4: Store addresses without #!

Each store's page lives at an address under the store finder, such as /de-de/stores/l/berlin/.... The cartridge answers all of them with the store finder page.

The store finder on these pages uses these addresses, and no longer #!. Check with Uberall that your store finder's address is saved there without #! too.

The store finder's address must be the one your visitors see. The cartridge makes it from https://, the HTTPS host name set up for your site in Business Manager, such as www.example.com, and path. Without one, B2C Commerce uses the site's HTTP host name, and without that, your instance's own. If your visitors see another host name, for example because the site has none set up or a domain per country, set origin in step 2.

Step 5: Check

Open your store finder in the browser, right click, and choose View page source. Search the source for __ubSfSsr. If you find it, it works.

Search the same source for <title and rel="canonical". Each should appear exactly once. If one appears twice, your templates print their own: see What changes on your store finder pages. The canonical link's address should start with the one your visitors see. If it does not, set origin in step 2.

Then open one of your stores and copy its address into a new tab. The store's page should open, with the store's name at the start of the page title.

If the page has not changed, your page cache still has the old one: go to Administration, Sites, Manage Sites, your site, Cache, and click Invalidate. It takes up to 15 minutes, so click it once.

What changes on your store finder pages

On the store finder's pages:

• the title and the description are Uberall's, when Uberall sends them
• the canonical link, the Open Graph tags, the twitter: tags and the structured data (application/ld+json) are Uberall's only: the store finder page sets none of its own

If your templates print a canonical link, Open Graph or twitter: tags on every page, such as your own og:image, they appear next to Uberall's on these pages. Leave them out where pdict.uberallStoreFinder is set.

If it does not work

When the store finder content does not arrive

The store finder keeps working in every case. If the content does not arrive, because your server cannot connect to Uberall, the connection takes too long or it returns an error, the page loads without it, and the store finder appears on the visitor's screen as usual.

When changes show

A change at Uberall, to your stores or to your store finder's settings, takes a few minutes to reach Uberall's answers.

Your page cache keeps a store finder page with its stores on it for an hour, so a change can take up to an hour more to show. A page without its stores is not cached, so a later visit tries again, unless one of your templates, such as common/layout/page, sets a cache time of its own with <iscache>. To show a change sooner, invalidate the page cache, as in step 5.

If a CDN in front of your storefront caches pages, add the time it keeps them: each store finder page in that cache keeps the content it had when it was cached. And a page your CDN stored while the content did not arrive stays without its stores, for search engines, until your CDN stores it again.