Shopify: Cart

The Autoaddress jQuery plugin can be easily integrated to a standard Shopify cart by editing the theme code. If your Shopify site has a sliding cart, please contact us.

Requirements

To integrate Autoaddress into Shopify, the following is required:

  • A Shopify site with a standard (non sliding) cart page
  • An Autoaddress Licence Key (contact sales@autoaddress.ie for further info)
  • Code as noted in this document

Integration

Step 1: Open the Shopify Theme Code Editer

After logging into the Shopify dashboard for your site, open the Themes page by clicking the "Online Store" menu option on the left and selecting "Themes" from the sub-menu that appears:


Next, in the "Current Theme" section, select the "Actions" button and select the "Edit Code" option from the drop down menu:

The Themes code editor will now open.

Step 2: Configure Cart Template to Integrate Autoaddress

In the code editor, select the "cart.liquid" file in the "Templates" section of the menu on the left:

This will open the file in the editor:


Next, copy the following code below {% section 'cart-template' %}:

<code>{% comment %}import js files{% endcomment %}<br><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br><script src="https://api.autoaddress.ie/2.0/control/js/jquery.autoaddress.min.js"></script><br><br>{% comment %}configure Autoaddress Control{% endcomment %}<br><script><br>    var licenceKey = "YOUR KEY HERE";<br>    var roiOnly = false;<br>    var useDefaultMargins = true;<br>    var aaControlMargin = "X%";<br>    var aaCountryMargin = "Y%";<br>    var insertControlBefore = "";<br>    var checkoutButtonClass = "";      <br>    var useCompanyField = false;<br>    var useAddressLine2 = true;<br>      <br></script><br><br>{% comment %}import shopify js{% endcomment %}<br><script src="https://integrations.autoaddress.ie/2.0/shopify/shopify.min.js"></script><br><br><script><br>  $(window).load(function() {<br>    //CSS Code here        <br>    <br>});<br></script>

Enter the licence key provided by Autoaddress and replace the text "Your_Licence_Key" with the value of the key.

Set the value of "roiOnly" to true or false depending on your requirements. If set to false, the plugin will include a dropdown box to allow users to select between Ireland and the UK.

The Autoaddress plugin for Shopify was built using the Debut theme. While the control will work for all themes (prior to Themes 2.0), it may require some styling changes. The plugin will use default settings that work with Debut. If this does not suit your theme, set the "useDefaultMargins" setting false. This will tell the plugin to use the values of aaControlMargin and aaCountryMargin to determine the width of the Autoaddress control and the country selection field.
For other styling requirements, use the $(window).load section to style the control. For styling options, see our styling page on the developer centre.

The plugin by default uses the "cart__submit-controls" class to determine where to place the control. If this class is not available in your theme, set the value of "insertControlBefore" to an available class to put the control above the object with that class.

The plugin by default uses the "cart__submit" class for submitting the address information to the checkout. If this class is not available in your theme, set the value of "checkoutButtonClass" to the class of your checkout button.

Finally, click the "Save" button at the top of the file to complete the integration. Your sites cart will now contain the jQuery plugin to allow searching of addresses in your cart form. When clicking checkout, the information selected will be passed to the checkout form.

Step 3: Configuration Settings

Required Settings

Setting Description Type Default
licenceKey Unique Key Per Customer string None
roiOnly Toggle to enable drop down field to select which country to search in boolean false
 useDefaultMargins  Toggle to set whether to use default CSS margin settings  boolean true
 aaControlMargin  Exposed setting to change the margin left value for the Autoaddress control. Replace X with desired percentage. Higher numbers shorten the field while lower numbers increase it.  string X%
 aaCountryMargin  Exposed setting to change the margin left value for the country select field. Replace Y with desired percentage. Higher numbers shorten the field while lower numbers increase it.  string Y%
 insertControlBefore  Exposed setting to change which object the Autoaddress control should be placed before in the cart. Requires a class name.  string None
 checkoutButtonClass  Setting to set the classs of the checkout button string None
 useCompanyField When set to true, this setting will ensure company names are put into the company field at checkout. When set to false, company field will never be used.  boolean  false
 useAddressLine2 When set to true, this setting will ensure the address line 2 will be populated when applicable at checkout. When set to false, address line  will never be used.  boolean true
Optional Settings

Setting  Description Type Default
 Language Sets the language. Options are 'en' for English
and 'ie' for Irish.
 string "en"
 geographicAddress Turns on or off Geographic Address in results.  boolean  false
 vanityAddress Turns on or off Vanity/Preferred Address in results. boolean true
 placeHolderLabel Hint to describe to expected input into the search field. Displayed before user starts typing.   string  "Enter Full Address or Postcode"
 searchButtonLabel Value of the text on Search Button.  string  "Search"
 optionsFoundLabel Text displayed to indicate to select one of the options returned. Only displayed when options are available.  string "Please select an option below"
 incompleteAddressLabel Info message displayed when the search result was an Incomplete Address.  string  "Too little information, please enter more details."
nuaAddressFoundLabel Info message displayed when the search result was an Non Unique Address (NUA). Other addresses share this address and require the user to add an Eircode to make the address unique.  string  "We’ve found the address, please add your Postcode in the text box below if you know it"
 noResultFoundLabel Info Message displayed when no result could be found for the search.  string  "No search results have been found."
 addressFoundLabel Success message when a full address or Eircode has been found.  string  Postcode Found, address populated below
 noEircodeAppendedLabel Success message when a full address has been found but no Eircode available for that address.  
string
 "Address found, but no Postcode Available"
 inputRequiredLabel Info message displayed when no input has been entered by the user.  string  " Info message displayed when no input has been entered by the user."
 errorMessageLabel Info message displayed when an Error has occurred.  string  "Sorry, an unexpected error has occurred."
 addressTabLabel Tab Label  string  "Address"
 businessTabLabel Tab Label  string  "Business"