Method 1: Embedding with embed code
Access Progus Store Locator Settings: Open Progus Store Locator and navigate to the "Settings" page.
Navigate to Installation Page: Within Settings, find and select the "Installation" page.
Customize Filters (Optional): Below the embed code, tailor the Store Locator by choosing from three filters: Tag, City, and Group.
Copy Embed Code: Copy the provided embed code by clicking on the copy icon or using the standard copy-paste method.
Integrate into Shopify:
Option 1: Creating a New Page:
Navigate to your Shopify Admin and go to "Online Store" -> "Pages".
Click on "Add Page" to create a new page.
Name the page, switch to the HTML editor, and paste the Store Locator embed code.
Save and publish the page.
Option 2: Adding a Custom Liquid Section:
Go to "Online Store" -> "Themes" in your Shopify Admin.
Click on "Customize" to access the theme editor.
Find and click on "Add section" and select "Custom Liquid".
In the HTML editor for the custom liquid, paste the Store Locator embed code.
Save your changes.
Method 2: Using Shopify App Blocks (if compatible)
Ensure your Shopify theme supports App Blocks. Not all themes may be compatible, you can verify this in our app -> settings -> installation page.
Log in to your Shopify Admin dashboard.
Go to "Online Store" -> "Themes" and click the "Customize" button. You should see a Shopify theme editor.
You can select the page where you want to display the store locator from the top center selector.
After selecting the page you can click on the "Add section" button from the left menu.
Move to the "Apps" tab in the popup menu and choose Progus Store Locator.
Now you should see our app in your theme. You can move the "Apps" block (from the left menu) to another position on your page by drag & drop.
Finally click the "Save" button. Changes should be visible on your store after few seconds.
Method 3: Adding a floating button with your locations
Access Widget Settings in App:
Open Progus Store Locator.
Navigate to the "Widget" section in the app settings.
Activate Floating Button:
In the "Visibility" section, locate the "Activate" button for the floating button widget.
Click on the "Activate" button to enable the floating button feature.