RP Knowledgebase: Add a Store Locator Link as a Map Icon in Your Shopify Menu
Last updated: 2026-01-24
Platform: Shopify (Online Store 2.0 + legacy themes)
Skill level: Beginner → Intermediate
Overview
If you want a clean, modern header menu, you can add a Store Locator link as a map icon instead of a text link.
This guide shows how to:
✅ Add a Store Locator page/link
✅ Add a map icon SVG to your theme
✅ Display the icon in your header menu (desktop + mobile)
Step 1 — Create Your Store Locator Link
First, make sure you have a Store Locator page or link.
Common examples:
Page URL:
/pages/store-locatorApp URL:
/apps/store-locator
You can confirm your link by opening it in the browser.
Step 2 — Add the Map Icon SVG (Theme Code)
Option A (Recommended): Add SVG as a snippet
Go to Shopify Admin → Online Store → Themes
Click … → Edit code
Open Snippets
Click Add a new snippet
Name it:
icon-map.liquid
Paste this SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false" class="rp-icon rp-icon-map" > <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/> </svg>
Step 3 — Add the Store Locator Icon Link to Your Header Menu
Now we’ll add a clickable icon that links to your Store Locator page.
Find the menu file
Most Shopify themes render the header menu in one of these files:
sections/header.liquidsnippets/header-menu.liquidsnippets/header-drawer.liquid(mobile menu)
Search inside the theme editor for:
section.settings.menu.links
or
link.title
Step 4 — Add the Icon Link (Liquid Code)
Locate where menu links are printed, like:
{% for link in section.settings.menu.links %} <a href="{{ link.url }}">{{ link.title }}</a> {% endfor %}Now add a Store Locator icon link (example: placed at the end of the menu):
{% for link in section.settings.menu.links %} <a href="{{ link.url }}" class="header__menu-item"> {{ link.title }} </a> {% endfor %} <a href="/pages/store-locator" class="header__menu-item header__menu-item--icon" aria-label="Store Locator"> {% render 'icon-map' %} </a>✅ This adds a map icon in your header that links to your Store Locator page.
Step 5 — Add Styling for the Icon
Open your theme CSS file (commonly):
assets/base.cssassets/theme.css
Add:
.header__menu-item--icon { display: inline-flex; align-items: center; justify-content: center; padding: 8px; } .rp-icon-map { display: block; }Step 6 — Add the Icon to Mobile Menu (Optional but Recommended)
Many themes use a separate file for the mobile drawer menu.
Check:
snippets/header-drawer.liquid
Add the same icon link inside the mobile menu area:
<a href="/pages/store-locator" class="menu-drawer__menu-item" aria-label="Store Locator"> {% render 'icon-map' %} </a>Troubleshooting
The icon shows on desktop but not mobile
Your theme likely uses two different menus:
Desktop header menu file
Mobile drawer menu file
Add the icon link in both.
The icon is too big / too small
Change the SVG size in the snippet:
width="18" height="18"
Try 16–20px for best results.
My Store Locator URL is different
Replace this:
/pages/store-locator
with your correct link (example):
/apps/store-locator
Best Practices
✅ Use SVG icons for sharp quality
✅ Add aria-label="Store Locator" for accessibility
✅ Keep the icon size consistent with your header icons
✅ Test on mobile and desktop