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