Shopify

The Autoaddress Javascript control and CSS can be easily added to a Shopify address form.​

 







Adding the Autoaddress control to the default Shopify Address form

Requirements

The Autoaddress control requires three things to work correctly with Shopify:

  1.  A Shopify site
  2. Autoaddress jQuery and CSS code. Code can be downloaded from GitHub.
  3. License key. For more information about license keys, see Configuration Options.

Implementation

For this demonstration, this document will be using the default Shopify theme.

Login to the admin section of your Shopify site. The menu on the left of the screen will have an item called "Online Store".
Online Store
Click this to open the themes page.
themes page edit code
Click the "Actions" button and select "Edit code" from the menu that drops down, as shown above. This will open the code editor for the theme.
Theme Editor
If, at this point, you haven't downloaded the code from GitHub, you can follow the optional reading guide "CRM Integration Files" on how to do that.

Click the "Layout" folder and open "theme.liquid". Open the "Reference Code.html" file that you downloaded from GitHub. Copy the code in the file and paste it into the header section of theme.liquid.

Next, click on templates and open the "
customers/addresses.liquid" file. Also open the "AutoaddressControl.html" file that you downloaded from GitHub and copy the code into the bottom of the address.liquid file. Lastly, insert "<div id="myControl"></div>" above the address form as shown below:
myControl

Next, click the "Preview" button to open a preview (non-live) version of your site.


Login to an existing account or create a new one. On the Account page, see the "Account Details" section and select "View Address".
View Addresses
This will open the address page. 
Add New Address
Click the "Add A New Address" button to open the address form and see the Autoaddress control.
ShopifyNewAddressForm