Craft CMS
+

Integrating a Store Locator into Craft CMS

This guide provides a step-by-step walkthrough for adding a MapCosmos widget to your Craft CMS website.

Step 1: Grab your installation snippet

Log into your MapCosmos dashboard, open your widget, and select Installation Code from the settings. Copy the script + <div> snippet that is generated for you.

Example:

<script type="text/javascript" src="https://widget.mapcosmos.com/map-widget.js?key=WIDGET_KEY" async></script>
<div id="map-cosmos-map-widget"></div>

Finally, publish the entry under Entries → Store Locator.

Step 2: Add the locator inside Craft CMS

Because Craft strips scripts from rich text fields, you’ll need to place the embed in a Twig template (or partial) instead.

Option A: Create a dedicated “Store Locator” page

  1. In the Control Panel, go to Settings → Sections → New Section
  2. Choose Single as the section type
  3. Call it Store Locator or similar (handle: storeLocator)
  4. Save

Next, create the template file:

templates/store-locator.twig

{% extends "_layouts/base" %}
	{# use your site’s layout if applicable #}
    {% block content %}  
    <h1>Find a Store</h1>  
    <script type="text/javascript" src="https://widget.mapcosmos.com/map-widget.js?key=WIDGET_KEY" async></script>
    <div id="map-cosmos-map-widget"></div>  
{% endblock %}

Finally, publish the entry under Entries → Store Locator.

Option B: Reuse as a component

If you want to show the locator on multiple pages:

  • Create templates/_partials/store-locator.twig with the snippet above

Then include it wherever needed:

 {% include "_partials/store-locator" %}

Step 3: Publish and link it up

  • Save your entry/template
  • Add a link to /store-locator in your site’s header or footer navigation
  • Clear caches/CDN if enabled

Your MapCosmos Store Locator is now live 🎉

Visitors can now:

✅ Locate your nearest stores in seconds
✅ Get directions on desktop or mobile
✅ Filter results by service, category, or product
✅ View rich details like hours, parking, or downloadable brochures
✅ Connect with your brand both online and offline

🚀 Try MapCosmos free today and give your Craft CMS site a store locator that is fast, flexible, and fully customizable.

Quick fixes if something doesn’t work

  • No widget appears? Check that your data-widget-id is correct.
  • Code disappears? Don’t use a rich text field; scripts must go into a Twig template.
  • Blocked script? If your site uses a strict Content Security Policy, allow https://files.tgb-pro.com, or host the script as a local Craft Asset.
  • Styling issues? Use CSS in your layout to control height, spacing, and alignment.
All integrations