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' %}:

{% comment %}import js files{% endcomment %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://api.autoaddress.ie/2.0/control/js/jquery.autoaddress.min.js"></script>

{% comment %}configure autoaddress control{% endcomment %}
<script>
    var licenceKey = "YOUR_KEY";
    var addressProfile = "Shopify_Default";
    var language = "en";
    var geographicAddress = false;
    var vanityAddress = true;     
    var roiOnly = false;
    var useDefaultMargins = true;
    var aaControlMargin = "X%";
    var aaCountryMargin = "Y%";
    var insertControlBefore = "";
   var checkoutButtonClass = ""; </script> {% comment %}import shopify js{% endcomment %} <script src="https://api.autoaddress.ie/2.0/integrations/Shopify/shopify.min.js"></script> <script> $(window).load(function() { //CSS Code here }); </script>

Step 3: Configuration Setting

Settings Explanation

Setting Description Type Default
licenceKey
Unique Key Per Customer
string None
 addressProfile  Name of address profile that determines how addresses are returned.  string  Shopify_Default
language Language for the plugin. Allowed values are "en" for English and "ga" for Irish. string "en"
 geographicAddress  Turns on or off Geographic Address in results.  boolean  false
 vanityAddress  Toggle for enabling AutoComplete feature on the plugin  boolean  true
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

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

The addressProfile used by default is optimised for use with the shopify checkout form. If requirements differ from this, contact support@autoaddress.ie for assistance.

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, 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.