How to Add a Store Locator to Webflow

Webflow stands out significantly among other website builders.

It’s a powerful platform for designing and managing websites, enabling users to create advanced, interactive, and responsive sites without any coding required (no-code).

👉 In fact, many MapCosmos users are also Webflow users.

Why use a store locator on your Webflow website?

The MapCosmos Store Locator for Webflow is a dynamic and personalized widget designed to improve your website’s usability and boost customer engagement.
It helps your customers easily find your physical locations.
With a rich set of features focused on performance and usability, it becomes an essential tool for showcasing store locations in a clear, interactive way.

Let’s see how to add a custom store locator to Webflow — step by step.

1. Set up an account‍

Go to MapCosmos.com and log in or create a free account.

2. Add or import your locations, products, categories, and services

You can manually add entries or use the bulk import tool to upload a CSV/Excel file.

Pro Tip: Field Mapping During Data Import
Field mapping is the process of matching the columns from your imported file (e.g., CSV or Excel) with the fields in the system where the data will be stored.
This ensures each piece of data is placed in the correct place.

‍How it works:

• The system detects your column headers – for example: First Name, Last Name, Email
• You then manually or automatically match each column to a system field like:
  • Name → name
  • Position → (choose the correct column)
  • Published → published
• After everything is correctly mapped, you can confirm and complete the import.

👉 Read more about importing data.

3. Customize your widget

Adjust the design, filters, language, and overall appearance to match your brand.

4. Add custom fields

You can add additional info such as:

• Parking availability
• Distance from the nearest parking area
• Accessibility info
• PDF downloads (e.g., a product catalog or price list)
  You can even include a button to download/open the file directly.

5. Get the installation code

From the MapCosmos dashboard, go to your widget and click "Installation Code". Copy the embed code.

6. Add the store locator to Webflow

1. In the Webflow Designer, click the top-left "+" icon and drag a Section element onto your page where you want the locator to appear.
2. Again, click the "+" icon and drag a Code Embed element inside the section.
3. Paste the code you copied from MapCosmos into the embed box.

7. Save and publish — You’re done! 🚀

You’ve now successfully added a fully responsive, mobile-friendly store locator to your Webflow site.

Now your visitors can:

✅ See detailed addresses and opening hours
✅ Get directions with one click
✅ Check where specific services or products are available
✅ Meet your team – the people behind your brand, working with passion every day

🚀 Get started with MapCosmos for free today

and add a powerful, personalized store locator to your Webflow website in minutes.