Embed MOBI into Squarespace

You can embed your MOBI Storefront directly into your Squarespace website rather than having to redirect customers to an external site for ordering.

 

Step One - Obtaining your MOBI Storefront Embed Code

To obtain the customised embed code for your Storefront navigate to WEBSITE --> Embed into an existing website in your MOBI Console.

 

 

Step Two - Embedding the Storefront on your Squarespace page

Please ensure you are logged in to your Squarespace admin console and open the page that you'd like to embed MOBI on while in the Pages panel. Hover over the content area and click Settings (or click on the gear symbol which appears when you hover the page on the  Pages panel, see image below).

In the Page Settings window, click Advanced at the bottom.

This is the space that you'll need to paste your MOBI embed script into, being sure to replace the container value to the id of the element you'd like MOBI to be created in. For more information regarding choosing an element to embed in, please click here.

For more information on using "Per-page Code Injection" in Squarespace, please click here.

Click "SAVE" on the top left hand corner of the window to save your work.

 

Step Three - Add HTML Code   

Roll over the main window with the Page Content in order to make the EDIT and SETTINGS tabs show up. Click EDIT on the block your want your storefront to be embedded into.

On the top right hand corner, click on the "+" button: 

 

Scroll down the "Basic" section and select the "</> Code" option:

 

A content window will pop up, see image below. Enter the following html tag : 

<div id='Mobi2Go-Storefront'>

</div>

(You may need to add or update an existing block for this step).

Click anywhere out of this window to close it and then SAVE.

 

Step Four - Ensure MOBI loads when customers navigate to your order page

In Squarespace click on the Home Menu, then Design, and then Site Styles.
In the second section SITE, uncheck Enable Ajax Loading and Save your settings

 

Step Five - Authorising Embed Code in MOBI 

Once you have added your Storefront code you need to add your domain details into MOBI in order to authorise your Storefront to display.  This is to prevent your Storefront being embedded into sites without your permission.

In your MOBI Console navigate to Storefront --> Website Settings and add yourdomain.com to the External Domain setting and save.

 

 

Your Storefront should now show in the page where embedded.

Note: If using a free Squarespace website i.e. mysite.squarespace.com you may need to set the external domain to static.squarespace.com