Getting Started
These are instructions for installing your map in your Shopify store. We have a direct integration that will add the Closeby map to your store with just a few clicks.
If you haven't already connected you Shopify store, find Closeby in the Shopify app store and add it to your Shopify account: https://apps.shopify.com/closeby-store-locator
--------------------------------------------------------------------------------------------------
You have 3 options to easily integrate your Closeby map into your storefront:
-
Theme Section - Use the Shopify theme editor to embed your map within your storefront.
-
Single Page Template - Use auto-generated page templates to create a stand-alone Shopify page for your locations.
-
Global Overlay - Add your map to your website to be opened as a modal from any page with custom links.
--------------------------------------------------------------------------------------------------
Theme Section
Use the Shopify theme editor to embed your map within your storefront.
To use Closeby in your Shopify theme, just select "Store Locator - Closeby" in your theme editor to add it as a new section. Select one of the section style options and your map will appear in your theme automatically.
That's it! You have your custom map integrated.
If you'd like a more custom setup, you may need to use your iframe embed code instead. If you wish to use the iFrame embed (in-page installation) on Shopify, you can view instructions here.
To restrict a map to a specific category, you can do so by adding a url param ?category=[CATEGORY NAME] when embedding your iframe. Learn more
--------------------------------------------------------------------------------------------------
Single Page Template
Use auto-generated page templates to create a stand-alone Shopify page for your locations.
If you wish to use your map embedded within the content of a Shopify page, all you need to do is select it as the page template.
Just select one of the automatically generated templates (default, centered or full-width) when creating a page and you will have your custom map integrated. That's it!
If you'd like a more custom setup, you may need to use your iframe embed code instead. If you wish to use the iFrame embed (in-page installation) on Shopify, you can view instructions here.
--------------------------------------------------------------------------------------------------
Overlay Installation
The default launcher is the an easy way to install the Closeby locator across your entire website. This approach will add the launcher on every page so that no matter where visitors are on your site they can conveniently open the locator and find your locations.
This is what is looks like in the bottom right corner of your website:
All you have to do is install the Closeby javascript by either connecting Shopify or manually adding the Closeby script to your website.
When you do that the launcher will automatically show up. If it is not showing up, check your map customizations and make sure the "Enable Launcher" option is checked.
More Overlay Installation Info
If you have connected your Shopify store in your Map Installation settings, you only need to enable/disable your launcher in the theming settings.
If you do not connect your Shopify store there, you will need to manually add the javascript to your website's HEAD code.
To people more familiar with custom code, you can learn how to open the overlay with links (instead of the default launcher) here.
Note: adding the launcher javascript to your website may impact your page speed, so if this is of concern you may wish to opt for other in-page installation approaches.