Overview
For most use-cases, you should be able to use the Shopify theme editor section that is labelled "Store Locator - Closeby" to easily add your map to your theme. If you have tried that approach and would still like more custom control, then proceeding with the following instructions may work better.
Note: You can find you map embed code by visiting your map installation page.
Using a Shopify Editor Section
The most straightforward way to install your Closeby map to your Shopify theme is by simply creating a "Custom HTML" block and adding your embed code to it.
Disabling The Launcher
If you are going to choose to disable the launcher and only embed your map on a particular page, you do not need you to have your Shopify store connected to your map installation settings. So, feel free to disconnect your store in the Map Installation in the "Global Overlay" section if you are choosing to not use the Overlay installation. To see more steps on how to remove the launcher from your Shopify store, click here.
For custom Shopify theme installation...
Below are more detailed instructions for editing the Shopify theme code to accomplish what you are hoping to achieve. The vast majority of users do not need to do this, so if possible, it's usually simpler to use the "Custom HTML" method shown above or one of the integration options shown in this article.
If you believe you need even more code-level control over the integration, use the following guidelines to help your setup.
Installation Basics
Because of the way Shopify's theming works, you will need to edit the theme's code itself in order to install the map within the page. While this may seem intimidating if you are not familiar with code at all, hopefully this article can walk you through the process. You can always reach out to our team and we can do our best to assist you as well.
To get started, you will need to view your theme's code by clicking "Edit code":
Once editing your Shopify theme, add the following HTML code to your pages copied from your maps page. Change the "width" and "height" attributes to values that work well on your webpage.
<iframe src="https://www.closeby.co/embed/<:yourmapkey>" width="100%" height="600" style="height:600px;border:none" />
To restrict your map to a specific category, you can do so by following these instructions.
This can be quite complicated and often Shopify themes will have slightly different code, so our instructions may be slightly different than what you will see. However, if you think you are comfortable enough to do this, the following instructions should walk you through the process.
Installation Details For Minimal Themes
Note: these instructions are for showing your embedded map within a Shopify "page".
1. Go to "Edit code" in your theme. Check if your theme has a {{ page.content }} in the page.liquid file. If it does, then continue with these directions. Otherwise, use the alternative directions below (Installation Details For Complex Themes).
2. Add a new "Template" file for "page" called "closeby".
This will generate the file page.closeby.liquid that will be showing in your Page settings when editing your store content.
3. Copy your iframe embed code from your Closeby account and paste it into your new section template file under "{{ page.content }}".
This file may look different depending on your theme, however it should have the same {{ page.content }} variable that you can use to identify where your content for the page template will render.
4. Save your changes to page.closeby.liquid.
5. Update your Shopify page so that it uses your new Closeby template.
10. If you need to make any width/height adjustments to your iframe embed, you can do so by going back to your section file (template--page-closeby.liquid) and changing the styling of your iframe there.
Installation Details For Complex Themes
Note: these instructions are for showing your embedded map within a Shopify "page".
1. Go to "Edit code" in your theme.
Check if your theme has a {{ page.content }} in the page.liquid file. If it does, then go to the alternative directions above (Installation Details For Minimal Themes). Otherwise, continue with the following instructions.
2. Create a new "Section" file called:
template--page-closeby.liquid
3. Copy/paste code from "template--page.liquid" into this new section file. If that file does not exist, look for one called "page-full-width.liquid" and copy/paste that code instead.
This will ensure that your new template will display the same as your existing page template content, but with addition of the your Closeby map.
4. Copy your iframe embed code from your Closeby account and paste it into your new section template file under "{{ page.content }}".
This file may look different depending on your theme, however it should have the same {{ page.content }} variable that you can use to identify where your content for the page template will render.
5. Save your changes to this new "Section" file.
6. Add a new "Template" file for "page" called "closeby".
This will generate the file page.closeby.liquid that will be showing in your Page settings when editing your store content.
7. Update the content of this new "Template" file so that it uses the new section you previously created by replacing the content with {% section 'template--page-closeby' %}.
When you create a new "Template" file, it will automatically use the default section. Instead, you want to use the new one you've created: {% section 'template--page-closeby' %}. This will ensure it renders the new section you created in the previous steps.
8. Save your changes to page.closeby.liquid.
9. Update your Shopify page so that it uses your new Closeby template.
10. If you need to make any width/height adjustments to your iframe embed, you can do so by going back to your section file (template--page-closeby.liquid) and changing the styling of your iframe there.