How to add a ‘contact free’ or ‘contactless’ delivery option to your Shopify cart page

Before making any changes to code, we strongly recommend downloading a backup copy of your theme.

Create a snippet

In your Shopify admin, look for Sales Channels and click Online Store.
If necessary, click Themes.
Select Actions and then click Edit Code from the dropdown menu.
In the left sidebar that shows the list of files, scroll to Snippets and click to expand it.
Then click Add a new snippet.
In the popup, enter a name such as contact-free. Note that you cannot use spaces and letters should be lowercase.
You should now see a blank file.
In that file, copy and paste this code (scroll right to see all of the code):
<p class="cart-attribute__field">
 <input type="hidden" name="attributes[Contact free delivery]" value="No">
 <input type="checkbox" name="attributes[Contact free delivery]" value="Yes"{% if cart.attributes["Contact free delivery"] == "Yes" %} checked{% endif %}>
 <label>Contact free delivery</label>
 (<a href="/pages/contact-free" target="_contactfree">Learn more</a>)
</p>
In the code above, you can edit the colored parts of the code to meet your needs.
The red code should be the same and be a clear, easy to understand label. This is what you will see on the order page when someone selects this option. It may also appear on order confirmation pages and receipts, depending on your settings.
The green code should be left as No for most stores. You can change this, however, if you need to change what text indicates the user has opted not to select the contact free option, you can change it here.
The blue code should be left as Yes for most stores. You can change this, however, if you need to change what text indicates the user has opted not to select the contact free option, you can change it here. Both instances must match.
The pink code is what your users will see on the cart page next to the checkbox. You can edit this to read whatever you’d like. If you use a translations app, you may need to use special code provided by the app developer.
The orange code is an optional code that lets you let shoppers click to learn more about your contact free option. You can change this to anything you’d like. If you use a translations app, you may need to use special code provided by the app developer.
The gray code should be modified to be the URL path to the page that you have created with information about contact free delivery. 
If you prefer not to have a link for more information, you can delete the line with orange and gray code.

Click Save to save your code.

Add the snippet to your cart template

In the left list of files, scroll down to the Sections folder and click it to expand if needed.
Then, locate cart-template.liquid (if you don’t see this file, you may have an older theme so instead, find the Templates folder and locate cart.liquid).
In the code that opens, look for </form> in the code.
Depending on your theme, you will most likely want to paste the next code BEFORE this. In most cases, you may see one or more </div> tags and in most cases you should paste the code below BEFORE these as well.
Once you’ve determined the best place for the code, paste this code there:
```
 {% include 'contact-free' %}
```
The boldface portion of the code above may need to be modified depending on what you named the snippet you created. It must be in all caps, with no spaces or symbols except a hyphen and match the name you used above exactly. If you used the suggested name in the steps above, you shouldn’t need to change the code.
Click Save.

Testing it out

You should immediately test out your changes.
First, visit your store and add an item to the cart. Then visit the cart page and see how the checkbox and label looks. If applicable, try the link to make sure it works. Make any changes needed.
You should also test out what happens when you actually place an order with the box checked and not checked. To do this, you can either make a purchase and then refund yourself or create a discount code for 100% off an free shipping.
When you view the test orders you create, look for the Additonal Details box in the sidebar or, on smaller screens, below the order information to see how the order is designated as being “contact free.”
Be sure to make sure your fulfillment or shipping department or system is set up to recognize this field and make any changes needed. For example, orders may need to be sent with “no signature required” or have a note added to the label that reads “Leave if no response” or something similar.
If your fulfillment is automated or handled by a third party, you may need to contact them to make arrangements or find out how they prefer to receive this data. Some may not be able to handle this.

Important notes

Keep in mind that this feature will only work if customers see the cart page. There is no way to add this feature to the checkout process unless you are a Shopify Plus account holder.
If you have a drawer, popup, dropdown or “mini” cart that allows customers to start checking out without viewing the cart page, you will need to add additional code to add this checkbox feature. In many cases, you can use the “include” tag above if you know what file controls these advanced cart features. Check with your theme developer or higher a developer for more details.
You should verify what liability you might have by using contactless delivery. It may also be a good idea to update your FAQ or terms and conditions to mention that selecting this option releases your company from any liabilities if the package is stolen or damaged after delivery.
If you need help installing this code or run into trouble, you’ll need to hire a developer. We recommend using Carson or Storetasker to have this code updated for you.
Shopkeeper Tools cannot provide customization assistance.