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". Click this to open the themes page.
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.

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:

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.


If the Account menu icon is not visible, please navigate to your Administration -> Settings -> Checkout -> Customer Accounts, and select one of the two options:

  • Accounts are optional
  • Accounts are required

This will display the Accounts menu icon when previewing your Shopify site.



On the Account page, see the "Account Details" section and select "View Address".

This will open the address page. 

Click the "Add A New Address" button to open the address form and see the Autoaddress control.

Optional Reading: