App installation and uninstallation is completely automated for the default features. If interested in using the optional features, the following steps may be necessary to add the needed code to your store’s theme files. If the optional features have been used and the app is being uninstalled, then the relevant code will need to manually removed.

Order details page (optional)

When installed, customers with store accounts will have the ability to update their shipping address for eligible orders from the order details page after signing in. Follow the steps below to install the code for this feature on your store's theme.

Copy the following code snippet to your clipboard:

      {% if shop.metafields.crwdctrlreloc.visibility.value.odp == 1 and shop.metafields.crwdctrlreloc.enabled == 1 %}

          {% if order.fulfillment_status == 'unfulfilled' or order.fulfillment_status == 'partial' %}

          <p class="ccrelocate"></p>

          <script>

            var xhttp = new XMLHttpRequest();

            xhttp.onreadystatechange = function() {

                if (this.readyState == 4 && this.status == 200) {

                  var resp = JSON.parse(xhttp.responseText);

                  document.querySelector('.ccrelocate').innerHTML = resp.btn;

                }

            };

            xhttp.open("POST", "/apps/ccrelocate/", true);

            xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");

            xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

            xhttp.send('action=getbtn&cadrfrm=odp&order_id={{order.id}}');

          </script>

        {% endif %}

      {% endif %}

Paste the snippet in the theme file for templates/customers/order.liquid where you want the ‘change address’ button to appear. Usually this is just below the {{ order.shipping_address | format_address }} tag, the code may look something like this:

 {{ order.shipping_address | format_address }}

      {% if shop.metafields.crwdctrlreloc.visibility.value.odp == 1 and shop.metafields.crwdctrlreloc.enabled == 1 %}

       {% if order.fulfillment_status == 'unfulfilled' or order.fulfillment_status == 'partial' %}

          <p class="ccrelocate"></p>

          <script>

            var xhttp = new XMLHttpRequest();

            xhttp.onreadystatechange = function() {

                if (this.readyState == 4 && this.status == 200) {

                  var resp = JSON.parse(xhttp.responseText);

                  document.querySelector('.ccrelocate').innerHTML = resp.btn;

                }

            };

            xhttp.open("POST", "/apps/ccrelocate/", true);

            xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");

            xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

            xhttp.send('action=getbtn&cadrfrm=odp&order_id={{order.id}}');

          </script>

        {% endif %}

      {% endif %}

Once added, save your theme.

Order confirmation email (optional)

When installed, an ‘update address’ button will be visible in order confirmation emails. Follow the steps below to install the code for this feature on your store's theme.

1) Copy the following code snippet to your clipboard:

                  {% if shop.metafields.crwdctrlreloc.visibility.oce == 1 and shop.metafields.crwdctrlreloc.enabled == 1 %}

                    {% if fulfillment_status == 'unfulfilled' or fulfillment_status == 'partial' or fulfillment_status == 'pending' %}

                      <p class="button__cell ccupdaddr"><a href="{{ shop.url }}/apps/ccrelocate/?order={{id}}&skey={{ email | append:':' | append:order_number | md5 }}" class="button__text">Update Address</a></p>

                      {% endif %}

                  {% endif %}

Paste the snippet in the stores Order Confirmation email template where you want the ‘update address’ button to appear. Usually this is just below the {{ shipping_address | format_address }} tag, the code may look something like this:

                  {{ shipping_address | format_address }} 

                  {% if shop.metafields.crwdctrlreloc.visibility.oce == 1 and shop.metafields.crwdctrlreloc.enabled == 1 %}

                    {% if fulfillment_status == 'unfulfilled' or fulfillment_status == 'partial' or fulfillment_status == 'pending' %}

                      <p class="button__cell ccupdaddr"><a href="{{ shop.url }}/apps/ccrelocate/?order={{id}}&skey={{ email | append:':' | append:order_number | md5 }}" class="button__text">Update Address</a></p>

                      {% endif %}

                  {% endif %}

2) Copy the following code snippet to your clipboard:

    .ccupdaddr { display:inline-block; }

    .ccupdaddr .button__text { padding:10px 15px; }

    td.customer-info__item { vertical-align:top; }

Paste the css inside <style></style> before </head> for the Order Confirmation email template.

Once added, click actions at the top of the page to ‘preview’ or ‘send test email’ to confirm the button appears correctly. If correct, save the changes to the template.