Store Locator Widget

Wondering about Custom CSS. Would like to remove or lessen the rounded corners on image and background of active information modal as well as the selectors to remove margin on top to bring the box up a bit on mobile at least. Also, would be great to be able to select a marker for the location one by one. So I am using as an area guide so I will have different businesses within the same widget so would be nice to change the pin marker for each individual location. Lastly if you could add more icons for CTA (Google, Apple Maps, Quote) as a few examples. Otherwise great to have this new widget. Well done!

1 Like

Hi @Shawn_Martin :wave:

A huge thank you for your kind feedback and such a detailed description of your case!

Just to make things clear, do you want to change the background color of the active informational modal, or you want to change its corner radius?

As for the margin removal, could you please share a screenshot of what you mean? I’ll gladly check if it’s feasible :slightly_smiling_face:

I would like any & all selectors available to customize the widget if possible? But at least you remove the rounded corners. Background color I know is availing widget already.

I’ve attached a screenshot with the margin issue. Not sure if it be changed only in mobile?

Shawn Martin
FanYourLocal
651-707-5530

Got you!

Unfortunately, we don’t have a list of classes/selectors for the Store Locator app. However, we agree that this is a great idea, and we’ll try to consider it in our future updates. We’ll keep you in the loop here - List of selectors for customization

We also share your point that it would be great to have an option to choose pin marker for each individual location. I’ve moved this idea to the separate topic - Separate pin marker for each individual location.

As for the more icons for CTA buttons, could you please share what icons you’d like to be added?

Regarding your customization request, I still didn’t quite get what you mean under "remove or lessen the rounded corners on background of active information modal. Do you just want to change the corner radius on this info panel:

If I misunderstood your idea, please share a screenshot of what you mean.

As for the margin issue, could you please share a direct link to the page where your widget is installed? We’ll be happy to check it for you :slightly_smiling_face:

A post was split to a new topic: Social profiles like in Team Showcase

Yes margin top on mobile when modal is activated also. With the rounded corners. Would be nice if it filled the screen vh: 100% or something like that?!

Shawn Martin
FanYourLocal
651-707-5530

1 Like

Thanks. Could you please send me a direct link to the page where the widget is installed, so that I could check margin issue?

https://www.fanyourlocal.com/locator

Shawn Martin
FanYourLocal
651-707-5530

1 Like

Thank you! I’ll check it with the devs and will let you know once any news come up :slightly_smiling_face:

@Shawn_Martin Thank you for waiting!

To remove margin on mobile and change corner radius of the images in the side panel and detailed card popup, please use this code:

@media (max-width: 500px) {
  .global-styles,
  [class*="Popup__PopupInner-sc"] {
  	padding: 0 !important;
  }
  
  .global-styles,
  [class*="location-card-popup__StyledPopup-sc"] {
  	height: 100% !important;
  	width: 100% !important;
  }
}

.global-styles,
[class*="location-card-popup__StyledPopup-sc"],
[class*="location-preview-image-layout__StyledMediaImage-sc"] {
	border-radius: 0 !important;
}

Check it out and let me know if it worked for you :slightly_smiling_face:

Sorry spaced out thanking you for the CSS. Thank you!

Wondering if it’s possible to have the map go to the Google profile of the business when tapping on the map icon - not just a generic pin drop to address since some addresses have several businesses in them like strip malls with suite #?

Shawn Martin
FanYourLocal
651-707-5530

1 Like

You are welcome :wink:

Do you want to be redirected to your Google profile instead of opening a detailed card popup when clicking on the map icon? Or you’d like to have an option to open either a detailed card popup or Google profile?

I would like the map to open up within the businesses profile with the current location turn by turn directions preloaded. Basically when someone taps the directions button on a businesses profile that is what I personally would like to load up. Not a generic location that shows the locations at that address. If that makes sense?!

Shawn Martin
FanYourLocal
651-707-5530

1 Like

@Shawn_Martin Do I understand correctly that you’d like to be redirected to the Directions page for the specific location when clicking on the icon?

If it is, do you want your current location to be automatically detected?

If I misunderstood you, please elaborate on your idea. A screenshot of the page where you need to be redirected would be highly appreciated :slightly_smiling_face: