How to Troubleshoot and Fix Common Issues with the Store Locator Functionality
The Store Locator feature in the Rose Perl Technology LLC application is a powerful tool for helping customers find store locations. However, users may encounter some common issues related to layout, widget behavior on mobile devices, and map display. This guide provides solutions to these problems and best practices for embedding and customizing the Store Locator.
Overview of Store Locator Functionality
The Store Locator is designed to be embedded into your website using the app’s embed block. This allows you to position it on your page as needed, ensuring it integrates seamlessly with your site’s layout and functionality.
Common Issues and Fixes
1. Footer Appearing Above the Store Locator
Issue: The footer appears above the Store Locator, disrupting the layout. Solution:
Use the app’s embed block to place the Store Locator in your page designer.
Navigate to the designer, go to Apps, and add the Store Locator as an app embed block.
Position the block where you want it to appear (e.g., below other content).
Ensure the app embed is turned on and properly placed on the page. If the embed is active but not positioned, the Store Locator may default to the bottom or appear in an unexpected position.
2. "More" Button on Mobile Redirects to a 404 Page
Issue: On small mobile screens, tapping the "More" button in the Store Locator widget redirects to a 404 page instead of expanding the widget. Root Cause:
Some themes use custom scripts that intercept clicks on anchor (
<a>) elements and force a redirect using thehrefattribute. The "More/See more" control in the Store Locator is rendered as an<a>element, causing the theme override to trigger an unintended navigation.
Solution:
Update the markup or behavior so the control isn’t treated as a navigational link.
Run a small script on page load to replace the affected
<a>elements with<button>elements or remove/neutralize thehrefattribute and prevent the default action on click.Implement this change in your theme (e.g., theme.liquid or a theme script) to ensure it applies site-wide to the Store Locator page.
3. Map Appearing on Unintended Pages
Issue: The map appears on the stockist form page and other pages where it is not intended to be displayed. Root Cause:
The app embed is added at the theme page template level. If a template includes the map embed, any page using that template will display the map.
Solution:
Assign a page template that includes only the stockist form embed and excludes the Store Locator embed.
Alternatively, create a new template specifically for the stockist form page and ensure the Store Locator embed is not included.
Manage this through your theme’s page templates or the theme editor.
Best Practices for Embedding and Customizing the Store Locator
Always use the app embed block to position the Store Locator on your page.
Regularly review your theme’s scripts and templates to ensure they do not override or conflict with the Store Locator functionality.
Test the Store Locator on different devices and screen sizes to identify and resolve any layout or functionality issues.
When making changes to your theme, document the updates to ensure consistency and ease of troubleshooting in the future.
By following these solutions and best practices, you can ensure the Store Locator functions smoothly and provides a seamless experience for your customers.