Insert Map on Pages

4. EC + SC (EN).png

You can add a "Google Map" location to your website so customers can easily look for your actual shop location.

 

This article covers two ways of embedding Google Maps into your website:

 

1. Embed from Google Maps

Step 1 

Pin your shop from Google Maps.

Screen_Shot_2017-09-06_at_12.55.27_pm.png

 

Step 2 

Confirm the address you want to pin, then click Share.

Screen_Shot_2017-09-06_at_12.05.32_pm.png

 

Step 3 

Click Embed map tab and copy the link after selecting the desired map size (Large/ Medium/ Small/ Customized)

Screen_Shot_2017-09-06_at_12.05.58_pm.png

 

Step 4 

In SHOPLINE Admin, go to [Online Store Design] > [Pages]. Click on the blue Text Page button and enter the Page Title.

 

Step 5

Click the Toggle HTML icon under "Page Content" and paste the copied code. Click Add to update.

Note: After clicking the Toggle HTML button, the content of this field will change into HTML syntax. Please refer to this link for more details: View HTML from Text Editor.

 

Step 6

Go to the Menu Navigation tab in the left bar > Add the page to the menu according to your preference (You can add the page to both the upper and bottom menus) 

 

2. Embed from Advanced Page in SHOPLINE Admin 

Step 1

Go to SHOPLINE Admin, go to [Online Store Design] > [Pages]. Add an advanced page and choose your desired template

 

Step 2

Click the Build button on the left and set up a page title.

We recommend bilingual shops set the second language at the same time to save trouble from inputting information again

 

Step 3

Drag and drop the Google Map button to the editor

Screen_Shot_2017-09-06_at_3.30.27_pm.png

 

The image below shows the layout after dragging the Google Map to the editor.

Screen_Shot_2017-09-06_at_3.30.54_pm.png

 

Step 4

Search and confirm the shop address. 

Screen_Shot_2017-09-06_at_3.55.07_pm.png

No size customization is available if the map is embedded through advanced page.

 

Step 5

You can also set up map title and description in the Settings tab. Click OK to save the setting.

Screen_Shot_2017-09-06_at_3.37.10_pm.png

 

Step 6

Click Preview to view the page in mobile/tablet/web mode. Don't forget to click the Save button on the bottom right corner, then click Back to Admin at the top left corner of the page.

 

Step 7

Go to the Menu Navigation tab in the left bar, and add the page to the menu according to your preference (You can add the page to both the upper and bottom menu).

 

3. SHOP Builder

*Before you begin:

    • SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
    • After creating a page using SHOP Builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

Please see the Introduction to learn more about the widgets and setups of SHOP Builder.

 

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.

npb_2_EN.png

 

 

Step 2

Click the Widget button.

widget_EN.png

 

Step 3

Select the "Text" widget.

Please see Custom Liquid | SHOP Builder to learn more about setting up custom liquid for your pages.

custom_liquid_EN.png

 

 

 

 

 

Have more questions? Submit a request

Comments