Where to add Custom CSS
Go to Store Locator > Customize, choose Style, and find Custom CSS under Code. You can also open Custom CSS directly. Paste your CSS into the editor and select Save.
The editor sits beside the preview, and the preview applies your CSS as you type. Until you select Save, it stays a draft. Check your live page after saving.
On a computer, the preview shows your locator at desktop width, scaled to fit, so CSS written for desktop screens looks the way it will on your website.
Your locator's parts are named .storerocket- followed by a word, for example .storerocket-result.
Custom CSS styles the locator itself. It cannot widen a Shopify page section or another website container that holds the locator. If the locator looks narrow, use a wider page template or section on your website.
Editing longer CSS
Select Bigger editor, next to the Custom CSS name. The other settings step aside and the editor takes half the screen at full height, with the preview still beside it. Select Back to settings, or press Esc, to return. Customize remembers your choice the next time you open Custom CSS.
On a phone, Customize shows one panel at a time, so there is no bigger editor. Switch to Preview to see the result.
Tidy spacing, done for you
The editor spaces your CSS with two-space indents as you type ; or }, when you paste, and when you save after a change. Only the spacing changes: what your CSS does stays exactly the same. After a paste or a save, Undo (Ctrl+Z on Windows, Cmd+Z on Mac) puts your own spacing back.
How do I show only filter icons on location cards?
On Native Modern and Starbucks, location cards can show an icon beside each filter name. If you want the icon without the name, add:
#storerocket-widget .storerocket-result-item-filter-icon + .storerocket-result-item-filter-name {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
This visually hides a name only when that filter has an icon. Names for filters without icons stay visible, and screen readers can still read the hidden names. First, upload an icon for each filter you want to show this way, turn on Show filter icons under Search & filters > Filters in Settings, and turn on Filters under Location details > Show in the results list.
Troubleshooting
An icon is still followed by text.
Confirm the filter has an uploaded icon and Show filter icons is on. Save your Custom CSS, then refresh the live page.
The locator is still narrow.
Check the width of its parent section in your website theme. CSS inside StoreRocket cannot change the parent section.
A rule does nothing, even though it looks right.
Look just above it for broken CSS, for example a stray };, pasted HTML such as a <style> tag, or a { that is never closed. Browsers skip the rule after a stray }; or HTML, and everything after an unclosed {, in the preview and on your website alike. The editor marks most of these with red beside the line number. Fix or remove that line and save again.
A CSS change broke the locator.
Remove that rule from Custom CSS and save again.