Top

Embed Online Bookings into Shopify

Follow

If you'd like some assistance with embedding your Simple Salon Online Bookings into Shopify, feel free to check out the guide below.

Before we go any further, you can show this article to the Shopify support team if you are requesting their assistance - this will help them to understand what you are attempting to do.

To embed Online Bookings into Shopify:

1) Login to your Shopify account and locate the Sales Channels panel.

Screen_Shot_2020-02-04_at_4.43.53_PM.png

2) Click on the Pages link located under the Sales Channels section.

Screen_Shot_2020-02-04_at_4.47.11_PM.png

3) When Pages loads, click the Add Page button.

Screen_Shot_2020-02-04_at_4.57.36_PM.png

Screen_Shot_2020-02-04_at_4.47.15_PM.png

4) Click the <> button (on the screen below, you can see Show HTML just beneath the button)

Screen_Shot_2020-02-04_at_4.47.39_PM.png

5) If you know that you have clicked on the <> button enter in a page title in the Title section.

Screen_Shot_2020-02-04_at_4.47.51_PM.png

In this next section, we will add our Online Bookings Embed Code link into the code section and blow up the screen so nothing else can be viewed, except for the headers and footers:

6) Copy the Embed Code content - click here to learn how

7) Paste the link into the Content area.

  • On a Mac you can retrieve this data by holding down the Command key () and clicking the V key to paste the link when needed.
  • For a Windows PC this is done by holding down Ctrl and clicking the V key.

Screen_Shot_2020-02-04_at_5.07.27_PM.png

8) Compare the following code to the content you have pasted as part of step 7.

We have:

  • Removed the width="400" height="600" section of the code
  • Added in style="width: 100%; height: 100%; left: 0%; position: fixed; top: 0%; background-color: white; z-index: 1;"

Feel free to copy and paste the following code into your online bookings link.

style="width: 100%; height: 100%; left: 0%; position: fixed; top: 0%; background-color: white; z-index: 1;"

Screen_Shot_2020-02-04_at_5.05.25_PM.png

9) When you are happy with the changes, click the Save button.

Screen_Shot_2020-02-04_at_5.11.24_PM.png

10) You can then View Page to view how your page looks.

Screen_Shot_2020-02-04_at_5.12.15_PM.png

If you ever have any questions, please send them to us via the Submit a Request option in your Help & Support page—we're here to help. 

Have more questions? Submit a request
Powered by Zendesk