How to Add a Store Locator to Webflow (Complete 2026 Guide)

The quickest way to add a store locator to Webflow is one embed code: build your locator in StoreRocket, copy the code from the Install page, and paste it into an Embed element in the Designer. Publish the site and check the live page, because the Designer canvas does not always run third-party scripts.

We make StoreRocket, so weigh our view with that in mind. This guide covers the setup, styling, lead capture and troubleshooting, and you can create your locator with a free trial, no credit card needed.

Related: What is a store locator? | Best store locator software 2026

The short answer

Only a few locations and no budget? You may not need a store locator at all. A free embedded map with a pin for each location is fine when the list is short, rarely changes and visitors only need to see where you are. Our guide to free store locator options compares them.

Why Webflow Sites Need Store Locators

Webflow's Unique Position

Webflow attracts design-conscious businesses. These businesses often have:

• Multiple retail locations
• Showrooms or galleries
• Service centers
• Distribution partners

Visitors to these sites expect the locator to look as considered as the rest of the site.

Your Options for Webflow Store Locators

Option 1: Native Webflow

Webflow's CMS can hold a list of locations, and a map embed can show them. That suits a short list, as in the free-map card above. Searching by address and sorting results by distance need custom code or one of the options below.

Option 2: Webflow Apps

Evaluate Webflow Marketplace apps against the search, design, and management features your project needs.

Option 3: Custom Code Embed (Recommended)

Use a dedicated store locator platform and embed it via Webflow's embed element.

Pros:

• Full-featured store locator
• A design you can match to your Webflow site
• Analytics and lead capture, depending on the plan
• Easy management
• Platform independent

Trade-offs:

• An embed code rather than a drag-and-drop element
• A separate dashboard, which is also how staff update a location without Webflow access

Our pick: StoreRocket, for a list that is long or changes often.

Option 4: Full Custom Development

Build from scratch using Webflow's CMS and custom code.

Pros:

• Complete control

Cons:

• Requires developer

Verdict: Only for very specific requirements with development resources. Our guide to building a store locator with AI lists what a custom build needs.

Adding StoreRocket to Webflow (Recommended Method)

Here is the complete setup process.

Prerequisites

You need access to edit and publish the Webflow site, on a paid Site plan or a paid Workspace plan: Webflow's Code Embed element needs one.

Step 1: Create Your StoreRocket Account

1. Visit storerocket.io/get-started
2. Enter your email and create a password
3. Access your dashboard immediately
4. Start with a free trial, no credit card needed

Step 2: Add Your Locations

Choose your preferred method:

Manual Entry:

1. Go to Locations > Add a location
2. Enter store name
3. Type the address and pick it from the suggestions (drag the pin to fine-tune it)
4. Add phone, email, website
5. Set business hours
6. Add custom fields as needed
7. Click Save

CSV Import:

1. Prepare a spreadsheet with columns: Name, Address, Phone, Email, Hours
2. Go to Locations > Import locations
3. Upload your file (CSV, TSV, TXT, XLS or XLSX)
4. Match its columns to StoreRocket fields
5. Review what will change, choose to add the rows or replace the current list, then publish

Google Sheets Sync (depends on the plan, see pricing):

1. Open Locations > Google Sheets Sync in StoreRocket and create a new linked spreadsheet
2. StoreRocket exports your current locations and emails you the spreadsheet link
3. Add or edit locations in the linked spreadsheet using its template columns
4. Enable automatic daily sync, or click Sync from Sheets after editing

To bring in an existing spreadsheet, import its CSV or Excel export first. Continuous sync uses the spreadsheet created by StoreRocket. Follow the Google Sheets setup guide.

Depending on the plan, your Webflow store locator updates after the daily sync, or when you click Sync from Sheets, which suits franchises, distributors, or businesses with frequently changing locations.

Step 3: Configure Filters

Help visitors find the right location:

1. Go to Locations > Search Filters
2. Create filter groups:
   • Store type (Flagship, Outlet, Showroom)
   • Services offered (Repairs, Custom Orders, Consultations)
   • Products available (Full Line, Accessories)
3. Assign relevant filters to each location

Filters are especially valuable for:

• Multi-brand retailers
• Service businesses with varying capabilities
• Showrooms with different product lines

Step 4: Customize Your Widget

1. Open Widget Studio
2. Choose a locator style
3. Set your brand colors and font to match your Webflow site
4. Configure:
   • Starting zoom and search radius
   • Distance units (miles or kilometres)
   • The wording the locator shows

Choose Google Maps or Mapbox before you copy the embed code: switching provider later means pasting the code again.

Step 5: Get Your Embed Code

1. Open the Install page in your StoreRocket dashboard
2. Copy the embed code shown on your StoreRocket Install page. It already carries your account ID, so paste it exactly as copied.

Step 6: Add to Webflow Designer

Method A: Dedicated Page

1. Open your Webflow project in the Designer
2. Create a new page or navigate to your "Locations" page
3. Add a Section element where you want the store locator
4. Set the section width (full or contained)
5. Inside the section, add a Code Embed element from the Add panel
6. Paste your StoreRocket embed code
7. Save and close the code editor
8. Publish your site

Webflow renames Designer panels from time to time. If a label differs, look for the Code Embed element in the Add panel.

Method B: Within an Existing Page

1. Navigate to the page in Webflow Designer
2. Find where you want the store locator
3. Add a Code Embed element at that position
4. Paste your embed code
5. Save and publish

Method C: Collection Template Page

If you want the store locator on a CMS template page:

1. Open the collection template
2. Add a Code Embed element
3. Paste the code
4. The same locator will appear on every page of that collection

Step 7: Configure Embed Settings

For best results in Webflow:

Container styling:

• Set the parent section/div to full width or specific width
• Add padding if needed
• Leave the height unconstrained, then check the published page

Responsive behavior:

• The locator adapts from a desktop map to a phone layout
• Test at each Webflow breakpoint and on a real phone
• Adjust parent container margins/padding per breakpoint if needed

Step 8: Add to Navigation

Make your store locator findable:

1. Open your Navbar in Webflow Designer
2. Add a new Nav Link
3. Label it "Find a Store" or "Locations"
4. Link to your store locator page
5. Publish

Webflow-Specific Styling

Matching Your Webflow Design

Webflow sites are known for beautiful design. Your store locator should match.

In StoreRocket:

1. Extract your Webflow site's colors (from your style guide or inspect tool)
2. Apply matching colors in Widget Studio
3. Choose a complementary map style
4. Upload custom markers if needed

In Webflow:

1. Style the parent section/container
2. Add consistent margins and padding
3. Apply any site-wide background colors or patterns

Custom CSS for Webflow

Want more control? Style the locator itself with custom CSS in Widget Studio. To set the width of the container it sits in, add CSS to your Webflow site:

1. Open your site settings in Webflow and find the custom code section (check Webflow's plan details: site-wide custom code can need a paid site plan)
2. In the head code, add styles:

 1<style>
 2  /* Give the locator's container the width you want */
 3  #storerocket-widget {
 4    max-width: 1200px;
 5    margin: 0 auto;
 6  }
 7
 8</style>

Webflow Interactions with Store Locator

The store locator won't directly participate in Webflow interactions, but you can:

1. Animate the parent section on scroll
2. Use interactions to reveal the store locator
3. Add hover effects to elements around it

Advanced Webflow Implementation

Full-Page Store Locator

For a dedicated locations page:

1. Create a new page in Webflow
2. Remove the default Section element
3. Add the embed directly in the body
4. Set no margins or padding

Copy the embed code shown on your StoreRocket Install page. It already carries your account ID, so paste it exactly as copied.

Split Layout Design

Create a visually distinctive layout:

1. Add a Section with two columns (Flexbox or Grid)
2. Left column: Content, headline, CTA
3. Right column: Store locator embed
4. Style as needed per breakpoint

Hero Section Integration

Put a search on a hero image with StoreRocket's search box (depends on the plan, see pricing):

1. Add your hero section in Webflow
2. Copy the search box code from Widgets > Search Box in StoreRocket
3. Paste it into a Code Embed element in the hero
4. A visitor's search opens your store locator page

Lead Capture for Webflow Sites

Enabling Lead Capture

Lead capture depends on the plan (see pricing). When a search finds no location nearby, the locator can ask the visitor for their details:

1. Open the lead form settings on the Leads page in StoreRocket
2. Enable the capture form
3. Check the form on your published page

The lead lands in your dashboard, and your team gets an email for each new lead.

Analytics for Webflow Store Locators

Built-in StoreRocket Analytics

Analytics depend on the plan. They show how visitors use your locator:

• Searches over time: When are people searching?
• A map of where people searched: Where are searches coming from?
• Popular locations: Which stores get the most clicks?
• Search terms: What are people typing?
• Leads: Who asked for a location near them (plan-dependent)?

Using Analytics Data

With this data, you can:

• Identify coverage gaps (searches that found nothing nearby)
• Understand seasonal patterns
• Optimize marketing spend by region
• Plan new location openings
• See which locations get the most clicks

SEO for Webflow Store Locators

Basic SEO Setup

Configure your store locator page for search:

Page title:

 1Find a Store | [Your Brand] Store Locator

Meta description:

 1Find your nearest [Brand] location. Search by city, zip code, or use GPS. [Number] locations with [key feature].

URL slug:

 1/store-locator or /locations

SEO Location Pages

If you publish individual location pages, use URLs like:

 1yourdomain.com/stores/new-york-soho
 2yourdomain.com/stores/chicago-michigan-ave
 3yourdomain.com/stores/los-angeles-beverly-hills

Each page should have a unique, indexable URL, structured data, location-specific content, and links back to your main Webflow site. These are separate pages you build in Webflow, for example as a CMS collection: the StoreRocket locator itself sits on one page.

Troubleshooting Webflow Store Locators

Widget Doesn't Appear

Check:

1. Your Webflow plan allows custom code (check Webflow's plan details if the embed does not run)
2. Embed code is complete and correct
3. Page is published (not just saved)
4. No syntax errors in the embed element

Fix: Try removing and re-adding the embed element

Widget Appears Too Small

Check:

1. Parent container width
2. Any max-height CSS that might constrain it

Fix: Set explicit width on parent container, remove height constraints

Widget Looks Different Than Expected

Check:

1. Your Webflow CSS isn't overriding widget styles
2. No conflicting stylesheets

Fix: Add more specific CSS, or adjust the design in Widget Studio

Responsive Issues

Check:

1. Test at each Webflow breakpoint
2. Parent container responsive settings
3. Padding/margin at different sizes

Fix: Adjust parent container styling per breakpoint

Map Not Loading

Check:

1. Browser console for errors
2. Ad blockers disabled (for testing)
3. HTTPS is enabled ("use my location" needs it)

Fix: If errors appear, contact StoreRocket support with details

Best Practices for Webflow Store Locators

Design Consistency

• Match your Webflow site's colors exactly
• Use consistent typography (via custom CSS if needed)
• Maintain visual hierarchy
• Ensure the locator feels native to your site

User Experience

• Make the store locator easy to find (main navigation)
• Use clear call-to-action text
• Show relevant information in results (hours, services)
• Ensure mobile experience is excellent

Data Management

• Keep location data accurate and up-to-date
• Before a holiday, add a note in a custom field such as "Holiday hours" and clear it afterwards
• Add new locations promptly
• Remove or mark closed locations

Performance

• The locator runs only on the page where you embed it
• Test load times at different connection speeds
• Ensure images (if any) are optimized

After install, you change locations in the StoreRocket dashboard and the locator on your page updates itself. StoreRocket maintains the hosted locator and delivers updates through the embed already on your site.

Frequently Asked Questions

Will the store locator match my Webflow design?

Yes. In Widget Studio you choose the locator style, set your brand color and font, change the wording and add custom CSS, with a live preview, to follow your site's look closely.

Can I use Webflow CMS for location data?

For a short list shown on a map, yes. For search by address with the nearest results first, you would need custom development:

• Geocoding for every address
• Map rendering logic
• Search and distance sorting
• Upkeep when Webflow or the map provider changes

With StoreRocket, your locations live in its dashboard, a spreadsheet import or Google Sheets sync (depends on the plan), not in the Webflow CMS.

How many locations can I show?

StoreRocket plans are sized by the number of locations; see current plans.

Can I put the locator on a members-only page?

Webflow retired its own User Accounts in January 2026. If you gate pages with a membership tool such as Memberstack or Outseta, the embed works on those pages like any other content.

Can visitors get directions from the store locator?

Yes. Directions open the route in Google Maps.

Get Your Webflow Store Locator Live

Your Webflow site deserves a store locator that matches the rest of your design.

StoreRocket for Webflow includes:

• ✅ Locator styles you can match to your site
• ✅ Brand colors, fonts, wording and custom CSS
• ✅ Google Sheets sync (plan-dependent)
• ✅ Analytics with a map of where people searched (plan-dependent)
• ✅ Lead capture (plan-dependent)
• ✅ A phone layout

Create your locator →

Free trial, no credit card required.

Need help adding a store locator to your Webflow site? Contact our team.