Saltar al contenido principal

Embedding the Widget

Store Locator Map: SE provides several methods for adding the store finder widget to your Shopify storefront. Choose the approach that best fits your store's theme and layout requirements.

Method 1: Dedicated Store Locator Page (Recommended)​

The simplest and most common approach is to create a dedicated page for your store locator.

  1. Open the Store Locator Map: SE app from your Shopify admin.
  2. Navigate to Settings > Widget Embed.
  3. Click Create Store Locator Page.
  4. The app will automatically generate a new page in your Shopify store with the widget embedded.
  5. Customize the page title and URL handle (e.g., /pages/store-locator).
  6. Click Save and Publish.

The dedicated page will appear in your Shopify Pages list and can be added to your navigation menus like any other page.

Method 2: App Block (Online Store 2.0 Themes)​

If your Shopify theme supports Online Store 2.0 (OS 2.0), you can add the store locator as an app block through the theme editor. This method provides the most flexibility for placement within your existing pages.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Customize on your active theme.
  3. Navigate to the page or template where you want to add the store locator.
  4. Click Add section or Add block.
  5. Under the Apps category, select Store Locator Map: SE.
  6. Position the block where you want it to appear on the page.
  7. Click Save.

App Block Settings​

When using the app block method, you can configure the following directly in the theme editor:

  • Widget height -- Set the height of the widget container (default: 600px).
  • Full width -- Toggle whether the widget spans the full page width or respects the theme's content width.
  • Top and bottom spacing -- Adjust margin above and below the widget.

Method 3: Embed in an Existing Page​

You can embed the store locator widget into any existing page using a code snippet.

  1. Open the Store Locator Map: SE app from your Shopify admin.
  2. Navigate to Settings > Widget Embed.
  3. Copy the embed code snippet provided. It will look similar to:
<div id="scrollengine-store-locator" data-config="your-store-id"></div>
<script src="https://cdn.scrollengine.io/store-locator/widget.js" async></script>
  1. In your Shopify admin, go to Online Store > Pages.
  2. Open the page where you want to embed the widget.
  3. Switch the content editor to HTML mode (click the <> button).
  4. Paste the embed code at the desired position within the page content.
  5. Click Save.

Method 4: Manual Theme Code Integration​

For advanced users or themes that do not support OS 2.0 app blocks, you can add the widget code directly to your theme's Liquid templates.

  1. Open the Store Locator Map: SE app and copy the embed snippet from Settings > Widget Embed.
  2. In your Shopify admin, go to Online Store > Themes > Actions > Edit code.
  3. Open the template file where you want the widget to appear (e.g., templates/page.store-locator.liquid or sections/store-locator.liquid).
  4. Paste the embed code into the template at the appropriate location.
  5. Click Save.

Creating a Custom Page Template​

To create a dedicated template for the store locator:

  1. In the theme code editor, click Add a new template.
  2. Select page as the template type.
  3. Name it store-locator.
  4. Add the embed snippet to the template.
  5. Assign this template to your store locator page via Online Store > Pages > [Your Page] > Theme template.

Theme Compatibility​

Store Locator Map: SE is compatible with all Shopify themes, including both vintage and OS 2.0 themes.

Theme TypeRecommended MethodNotes
Online Store 2.0App BlockFull drag-and-drop support in the theme editor.
Vintage themesEmbed snippet or manual codeApp blocks are not available; use the code snippet approach.
Custom / headlessManual codeUse the embed snippet in your custom frontend.

Compatibility Notes​

  • The widget requires JavaScript to be enabled in the customer's browser.
  • The widget loads its own styles in an isolated scope to avoid conflicts with your theme's CSS.
  • If your theme uses a content security policy (CSP), you may need to allowlist cdn.scrollengine.io and maps.googleapis.com.
  • The widget container must have a minimum width of 300px. For optimal display, a width of 800px or greater is recommended.

Verifying the Installation​

After embedding the widget:

  1. Visit the page where you added the store locator.
  2. Confirm that the map renders and markers appear for your locations.
  3. Test the search functionality by entering an address or zip code.
  4. Check the page on a mobile device to verify responsive behavior.

If the widget does not render, check the browser developer console for errors and ensure your Google Maps API key is configured correctly. See Google Maps API Setup for details.

Next Steps​