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, inside your site's design.

It works for a store finder already on your site and for a new one. It takes six steps, in Webflow and on GitHub. Some steps depend on how your site is set up: each of those says how to find out, and what to do in each case.

How it works

Webflow cannot answer for every store's address under one page. Webflow Cloud can: it runs a small app at an address of your site. Uberall gives you that app.

You design the store finder's page in Webflow as usual, as a template page that visitors do not see. The app shows that page at your store finder's address, and at every store's address under it, with your stores in it.

What you need

A Webflow site on a paid site plan other than Basic, published on your own domain. On Starter and Basic, Webflow Cloud apps only run on the webflow.io address

Admin access to the site in Webflow

A GitHub account. Webflow Cloud deploys the app from a GitHub repository

The Uberall Store Finder app for Webflow Cloud, a zip file: uberall-store-finder-webflow-latest.zip

Your render token, from Uberall

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: the page it is on, such as https://www.example.com/store-locator. Each store gets its own address under it

If your site has a CDN or a proxy in front of Webflow

Find out: run dig +short www.example.com with your domain, or ask whoever manages it. If the answer is cdn.webflow.com or 198.202.211.1, nothing is in front of Webflow, and these steps are for you. If it is anything else, such as Cloudflare, Akamai, Fastly or your own servers, contact Uberall before you start: your store finder may be easier to set up there.

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 custom code, in your site's custom code under Site settings, Custom code, and in Embed elements: 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.

Step 1: Make the template page

The template page is the store finder's page as you design it in Webflow. It has its own address, which nobody links to, and the app shows it at the store finder's address.

Find out whether your store finder's address is a Webflow page: open it in the browser.

a) It is a Webflow page, such as the page your store finder is on today

Make a copy of that page the template page. In the Pages panel, duplicate the page, open the copy's settings and change its Slug to store-locator-template. Leave the original page as it is: it keeps showing your store finder until the app takes over its address in step 4.

b) There is no page at that address yet

In the Pages panel, add a page with the slug store-locator-template. Design it like your other pages, with your header and footer.

Either way, on the template page:

Add an Embed element where the store finder goes, with the store finder snippet. Replace YOUR_LOCATOR_KEY with your locator key, and the address with your store finder's full address. This is the address of the store finder, not of the template page:

1. <div
     id="store-finder-widget"
     data-key="YOUR_LOCATOR_KEY"
     data-widgetoriginurl="https://www.example.com/store-locator"
   ></div>
   <script src="https://locator.uberall.com/locator-assets/storeFinderWidget-v2.js"></script>

If the page already has the snippet, keep it, and add data-widgetoriginurl as above if the div has none.

Keep the div empty: the app puts the stores inside it. If the div has anything inside it, even text, the page is served without them.

In the page's settings, under SEO settings, turn off Sitemap indexing. This keeps the template page out of search results. The app takes this off again at the store finder's address.

Give the page the title and the description of your store finder. They show where Uberall sends none (see What changes on your store finder pages).

Publish the site.

Open https://www.example.com/store-locator-template, with your domain. It shows your store finder, as visitors see it today.

The app sends Uberall the div's data-key, data-language, data-countries and data-widgetoriginurl, so the stores in the page always match what the store finder shows. To show the store finder in another language, add it to the snippet, such as data-language="de".

If your snippet loads storeFinderWidget-v2-withoutMap.js, the store finder shows no map, and its pages arrive without one too. Nothing to add.

Step 2: Put the app into a GitHub repository

1. Unzip the file. It has a folder, uberall-store-finder-webflow.
2. On GitHub, create a new repository, such as uberall-store-finder. It can be private.
3. On the repository's page, click uploading an existing file, and drag everything inside the folder there: the app folder and the files next to it.
4. Click Commit changes.

Step 3: Add the app to your site in Webflow Cloud

1. In Webflow, open your site's Site settings, and go to Webflow Cloud.
2. If Webflow asks for it, click Install GitHub App, and allow it to read the repository from step 2.
3. Create an app from that repository.
4. Create its environment, with the branch main, and with the path of your store finder's address as its mount path, such as /store-locator.

The app answers for the mount path and for every address under it, in place of any Webflow page there. So every address under your store finder's belongs to the store finder: do not put other pages under it.

Do step 4 right after this one: until the app has both of its variables, your store finder's address shows an error instead of your page.

Step 4: Add your render token and the template page's address

In the environment from step 3, go to Environment variables, and add two:

Turn Secret Variable on for the token. The token stays in Webflow Cloud. Visitors never see it.

Then deploy the environment again, so the app has both, and publish your site.

Step 5: Link to the store finder

Your site's menu and links point to the store finder's address, such as /store-locator, not to the template page.

In case a) of step 1, change the store finder's design on the template page from now on. The original page stays in Webflow, but visitors no longer see it.

If your store finder's addresses have #! in them today, they lose it. The store finder's main page keeps its address, so its place in search results does not change.

Step 6: 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.

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 as the page title.

What changes on your store finder pages

On the store finder's pages, the app replaces part of the template page's head with what Uberall sends for each store:

• the title, the canonical link and the description
• the Open Graph tags, with the twitter: tags that go with them
• the structured data (application/ld+json)

It only replaces what Uberall sends. What Uberall does not send for a page stays as the template page has it.

The template page's canonical link and its language versions (hreflang) name the template page. The app takes them off, and its noindex too: these are the store finder's pages.

An address under the store finder that names no store, region or city, such as a store that has closed, is served without stores in it. The store finder shows its main page there instead, as it does today.

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 the app 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.

After such a failure, the app serves the store finder's pages without the content for 30 seconds, and then asks Uberall again.

The app needs the template page for every visit. If the template page cannot be loaded, the store finder's address shows an error until it can.

When changes show

A change at Uberall, to your stores or to your store finder's settings, takes a few minutes to show on these pages.

A change to the template page shows once you publish your site.

Webflow Cloud sends the app's pages with Cache-Control: private, no-cache, whatever the app asks for, so no cache keeps them. Every visit to a store finder page is a visit to the app, which asks Uberall for the page each time. These visits count towards your plan's Webflow Cloud requests and CPU time, which you can see in Site settings, Plan usage.