The floating button is a small button that sticks to the corner of every page on your website. When visitors click it, your store locator opens in an overlay. Great for giving visitors quick access without dedicating an entire page to it.
This feature is available on the Business plan.
Setting it up
In StoreRocket, open Store Locator > Search Box & Button > Floating Button (open the Floating Button page)
Under The button, change Words on the button (default is "Store Locator")
Pick a Button colour
Under Phones, choose whether to turn on Show it on phones. It starts off, so the button is hidden on phones and small tablets (windows under 768 pixels wide).
Select Save
Everything is on that one page. Beside the settings, What visitors see shows your real button in the corner of a web page and updates as you type. Use the computer and phone switch above it to see both sizes.
Click the button in the preview to open your real store locator over the page, the way it opens on your website. On a computer it opens at full size in a window. Select × or press Escape to close it.
Installing on your website
On Shopify? You don't need the code. Click Turn on in Shopify on the Floating Button page, then Save in Shopify. See how.
Go to Put it on your website, further down the same page (open it)
Copy the embed code
Paste it once into the part of your website that is on every page, such as its footer, or into the code your website adds to every page (the
<head>tag, or just before the closing</body>tag)
The code looks like this:
<script>
window.StoreRocket = {
account: "YOUR_ACCOUNT_ID"
};
</script>
<script src="https://cdn.storerocket.io/js/embed/v1.js" async defer></script>
The button will appear on every page where this code is present. If you only want it on specific pages, only add the code to those pages.
You don't need to paste the code again when you change the words, colour or phone setting. Those reach your website by themselves after you save.
Changing the button position
By default the button sits at the bottom-right corner of the page (right: 10px, bottom: 0). You can control its exact position by adding a position property to the config. This is an edit to the code you pasted, so you make it on your website, not on the Floating Button page. The page also lists it under For developers.
<script>
window.StoreRocket = {
account: "YOUR_ACCOUNT_ID",
position: {
right: "10px",
bottom: "80px"
}
};
</script>
<script src="https://cdn.storerocket.io/js/embed/v1.js" async defer></script>
The position object accepts these CSS properties:
bottom: distance from the bottom of the page. Increase this to move the button higher (e.g. "80px", "150px")
top: distance from the top. Use this instead of bottom to anchor the button to the top of the page
right: distance from the right edge (default: "10px")
left: distance from the left edge. Use this instead of right to put the button on the left side
All values are CSS units (px, em, %, etc.).
Common positioning examples
Move the button higher (to clear a chat widget or cookie banner):
position: {
right: "10px",
bottom: "80px"
}
Move the button to the left side:
position: {
left: "10px",
bottom: "0"
}
Using your own button instead
If you want to use your own button or link to open the store locator (instead of the floating button), use the trigger option with a CSS selector:
<script>
window.StoreRocket = {
account: "YOUR_ACCOUNT_ID",
trigger: "#my-store-locator-button"
};
</script>
<script src="https://cdn.storerocket.io/js/embed/v1.js" async defer></script>
Then add a button or link anywhere on your page with that ID:
<button id="my-store-locator-button">Find a Store</button>
When someone clicks your button, the store locator overlay opens. The floating button won't appear when you use a custom trigger.
Embedding inside a specific container
If you want the button to appear inside a specific section of your page (instead of fixed to the browser window), use the parent option:
<script>
window.StoreRocket = {
account: "YOUR_ACCOUNT_ID",
parent: "#my-container"
};
</script>
The button will use absolute positioning within that container instead of fixed positioning on the page.
Customization options
These are the three settings on the Floating Button page:
Words on the button: Change it from "Store Locator" to whatever fits your site ("Find a Store", "Locations", etc.). Keep it to a few words, because the button is 180 pixels wide.
Button colour: Match it to your brand colors
Show it on phones: Off by default. Turn it on if you want visitors on phones to see the button, or leave it off and link to a dedicated page on mobile.
Not seeing the button?
Make sure the embed code is on the page (check your page source)
Check if Show it on phones is off and you're testing on a phone. It starts off.
Clear your browser cache or try incognito
Make sure your plan includes the floating button feature (Business plan)
On Shopify: open Online Store > Themes > Customize > App embeds and check that Floating button is switched on for the theme your store uses
Still stuck? Drop us a message on live chat.