Add your Google Maps API Key to your Theme on Shopify

Chandler
Chandler September 27, 2018

Share:

In the themes provided by Shopify, there are a lot of them have a map section. Adding a map section to your homepage enables you to show the location of your business. However, in order to add a Google map API to the themes on Shopify, you have to register it first. This is the writing on how to add your Google Maps API key to your theme on Shopify. Please read carefully and follow my instruction step by step.

Related Posts:

How to add your Google Maps API key to your theme

Step 1: Go to the Online Store.

After logging in your Shopify account, from the homepage page, take a look at the left side of the screen, you can see a section called Online Store in the Sales Channels category. Click on Online Store.

add your Google Maps API key to your theme on desktop 1

Step 2: Choose a theme to customize.

The Shopify system will automatically take you to the Themes page. From the Themes screen, scroll down to see more themes, decide which one would you like and hit Customize.

add your Google Maps API key to your theme on desktop 2

Step 3: Go to the Sections tab.

The themes editor toolbar is divided into two tabs, which are Sections and Themes setting. As for our purpose, go to the Sections tab.

add your Google Maps API key to your theme on desktop 3

Step 4: Add Section.

From the Sections tab, scroll down until you see the Add Section button, click on it.

add your Google Maps API key to your theme on desktop 4

Step 5: Add the Map section.

In the Add Section dialog, you can see the Map section in the Store information area. Click on the Map button to add it.

add your Google Maps API key to your theme on desktop 5

Step 6: Paste the API link.

After clicking on the button, you can see the map dialog, scroll down to the Background area, you can see a box called Google Map API key, move your cursor in the box and paste the Google Map API you registered before in it.

add your Google Maps API key to your theme on desktop 6

Step 7: Save theme.

The final step is quite simple, all you have to do is hit Save.

To add your Google Maps API key to your theme on iPhone (Click here)

  • Step 1: Go to Store. After getting into your Shopify app, at the bottom of your phone screen, there is a Store button, tap on it.

     add your Google Maps API key to your theme on iPhone 1
  • Step 2: Go to the Online Store. In the middle of the screen, you can see the Sales channels category, under it is the Online Store section, hit that button to continue.

     add your Google Maps API key to your theme on iPhone 2
  • Step 3: Tap Manage Themes. After finishing the above step, continue by tapping the Manage Themes button.

     add your Google Maps API key to your theme on iPhone 3
  • Step 4: Choose a theme to customize. From the Themes screen, scroll down to see more themes, decide the themes you want to make changes to and click Customize.

     add your Google Maps API key to your theme on iPhone 4
  • Step 5: Go to the Sections tab. The themes editor toolbar is divided into two different tabs, however, for our purpose, go to the Sections tab.

     add your Google Maps API key to your theme on iPhone 5
  • Step 6: Add section. From the Sections tab, scroll down until you see the Add Section button, click on it.

     add your Google Maps API key to your theme on iPhone 6
  • Step 7: Add the Map section. In the Add Section dialog, you can see the Map section in the Store information area. Click on the Map button to add it.

     add your Google Maps API key to your theme on iPhone 7
  • Step 8: Paste the API link. After clicking on the button, you can see the map dialog, scroll down to the Background area, you can see a box called Google Map API key, move your cursor in the box and paste the Google Map API you registered before in it.

     add your Google Maps API key to your theme on iPhone 8
  • Step 9: Saving. The final step is quite simple, all you have to do is tap the Save button.

To add your Google Maps API key to your theme on Android (Click here)

  • Step 1: Go to Store. After getting into your Shopify app, at the bottom of your phone screen, there is a Store button, tap on it.

  • Step 2: Go to the Online Store. In the middle of the screen, you can see the Sales channels category, under it is the Online Store section, hit that button to continue.

  • Step 3: Tap Manage Themes. After finishing the above step, continue by tapping the Manage Themes button.

  • Step 4: Choose a theme to customize. From the Themes screen, scroll down to see more themes, decide the themes you want to make changes to and click Customize.

  • Step 5: Go to the Sections tab. The themes editor toolbar is divided into two different tabs, however, for our purpose, go to the Sections tab.

  • Step 6: Add section. From the Sections tab, scroll down until you see the Add Section button, click on it.

  • Step 7: Add the Map section. In the Add Section dialog, you can see the Map section in the Store information area. Click on the Map button to add it.

  • Step 8: Paste the API link. After clicking on the button, you can see the map dialog, scroll down to the Background area, you can see a box called Google Map API key, move your cursor in the box and paste the Google Map API you registered before in it.

  • Step 9: Saving. The final step is quite simple, all you have to do is tap the Save button.

Conclusion

Above is my writing on how to add your Google Maps API key to your theme on Shopify. I hope you have a great time reading and applying it while running your store.

Google Tag Manager for Enchanced eCommerce and improved Shopify performence store

Get it FREE

Themes

Find out what Shopify theme a website is using Build a Shopify theme from scratch About Us page templates & examples Install Shopify theme Shopify blog featured image size Add Products to Drop-down Menu in Shopify Add Sliders in Shopify To Add A Quickview to Shopify Store To add affiliate links to your Shopify store How to Add Fonts to Shopify Theme Add About us page in Shopify Remove Powered by Shopify from your Shopify store Create a Landing Page Backup Shopify theme What Programming Language Does Shopify use Put your Shopify store Under Construction Edit Checkout Page In Shopify Add Adsense to Shopify Change Shopify theme Remove Shopify Payment Icons from Store Footer Shopify Payment Icons Add a Logo to Shopify Store on all page Customize Shopify Themes Add Shop Now Button in Shopify Store Edit HTML Code Add Social Media Icons on Shopify store Edit Theme Code Change Language in Themes Register a Google Maps API Key Add Favicon Create Translation for Theme Choose Language for Theme Add Alt Text to Theme Image Edit the Code Templates for Password Page Hide Store Name on Password Page Hide Footer on Password Page Remove Content From Dynamic Section Add Google Maps API Key to Theme Edit Password Page Settings Remove Password Protection From Online Store Show Dynamic Checkout Buttons For Some Products but Not for Others Publish Themes from Theme Editor Publish Theme from Admin Add Password Set the Social Sharing Image Remove Dynamic Sections Rearrange Dynamic Sections Hide Dynamic Sections Add Dynamic Sections Add Google Translate Widget


Chandler
Chandler
Hi! I'm Chandler - a Shopify expert and also a customer supporter with over five years of experience. I had done more than 300 custom work projects in the Shopify platform, namely building a store from scratch, installing apps, adding custom features, optimizing speed and SEO, and so on.

Comments for Add Google Maps API Key to Theme



People also searched for

Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up