Where to add Custom CSS
Go to your Custom CSS page, paste in your CSS, and click Save. Check the Widget Preview and your live page after saving.
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.
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 Use filter icons in Store Locator Map > Settings, and turn on Filters under Store Locator Map > Components > Search result.
Troubleshooting
An icon is still followed by text. Confirm the filter has an uploaded icon and Use 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 CSS change broke the locator. Remove that rule from the Custom CSS page and save again.