All Tutorials

Best practices for editing checkout.liquid

All Tutorials

Best practices for editing checkout.liquid

Best practices for editing checkout.liquid

If you're on Shopify Plus, then you can edit the code for your checkout. However, if you make changes to your checkout code, then you need to upgrade your checkout.liquid template manually whenever Shopify makes an upgrade.

Adding custom code

When making changes it is good to keep all of the relevant code for a specific customization in a single snippet. Doing this cuts back the risk of conflict with other code and generally makes the code clearer to read.

Any time a change is made to a customization, it is recommended that a comment is placed at the beginning of the change. The comment should contain who made the change and when the change was made. For example:

{% comment %} Added by Name from Company on September 21 2018 {% endcomment %}

Document Object Model dependency

One of the biggest considerations to make when implementing checkout modifications is how Document Object Model (DOM) dependent your code is. As Shopify releases checkout upgrades, the content output by the Liquid variable calls in checkout.liquid (and in some cases the checkout.liquid content itself) is upgraded. This means that if your customizations depend on that content, then they might break as Shopify releases new upgrades. It’s always best to minimize DOM dependency as this can go a long way in cutting down on future support debt for your team.

There are various Liquid variable calls in checkout.liquid that output all of the checkout HTML/Content, so if you’re targeting an element that’s output by one of these variable calls, then your function could possibly break with a checkout upgrade. If you need to target an element with a Liquid variable call then it’s best to use that attribute as a selector. The data attributes can also be used, rather than a class or ID.

For example, when making changes using the Google Chrome inspect tool, the browser shows all the IDs and class names that relate to the visual changes being made. These do not necessarily relate directly to what is in the Liquid file, where variable calls are used. Directly copying edits from the inspect tool is therefore not recommended, as the IDs and classes don't always match what is rendered in the browser.

Kill switches

After adding in a snippet call to the customization, you can wrap all the snippet code in a single Liquid conditional that is connected to a theme setting. This is a killswitch. If unforeseen conflicts arise with a customization, the code can be disabled through the theme setting. This removes all the code from the customization from the storefront but keeps the file within the theme to be edited later.

The following example shows killswitch code wrapped around snippet:

{% if settings.checkout_customization %}
<style>
  //Add styles
</style>

<div>
  //Add HTML content
</div>

<script>
  (function ($){
    ‘use strict’;
    //Add Javascript
  }(jQuery);
</script>
{% endif %}

The following example shows ‘killswitch’ theme setting code:

,
{
    "type": "checkbox",
    "id": "checkout_customization",
    "label": "Enables a checkout customization"
},

Capture and preserve cart attributes

You can capture checkout attributes the same way you capture cart attributes. To pass a checkout attribute through, you must include the attribute input inside the form using JavaScript. This is because the main content form is output by the Liquid drop and there is no direct access to it.

The input you must use to capture a checkout attribute differs slightly from the input for a cart attribute.

Below is the code to capture a cart attribute.

<input type=”text” name="attributes[attribute name]">

Below is the code to capture a checkout attribute. When capturing a checkout attribute, you must specify the input's name attribute using the syntax checkout[attributes][attribute name].

<input type=”text” name=”checkout[attributes][attribute name]”>

If you capture an attribute in the checkout, it will remove any existing attribute you have captured in the cart. To account for this, you can use the checkout.attributes Liquid object, which contains the cart attribute values. Loop through them, and add them into the checkout as attribute inputs with values defined by the existing attribute data:

{% for attribute in checkout.attributes %}
<input type=”text” name=”checkout[attributes][{{ attribute.first }}]”
    value=”{{ attribute.last  }}” />
{% endfor %}