Shopify Plus: Adding Product Images Back to the Multi-Address Checkout ✏️

Important: This an advanced tutorial which applies to merchants using Shopify Plus only. Advanced knowledge of HTML, and Javacript are required.

With Giftship’s multi-address checkout – the “default” checkout type does not include product images. This is done in order to not show an additional shipping address form on the checkout page, as all address details are already entered.

In order to get the product images back to your checkout page, the following concepts can be applied.

Step 1: Enable your checkout.liquid file

As a Shopify Plus merchant, you have access to your checkout.liquid file. This is however not enabled by default, so you may need to reach out to your Shopify account manager in order for them to enable this feature.

Step 2: Add the image url of the selected product as a hidden line item property.

To do this, you must find where your product image is loading from, and add a hidden input into your product form containing the images url. Here is an example of this which can be used:

<input type="hidden" name="properties[_image]" value="{{ product.images[0].src | img_url: '110x110', scale: 2 }}">

Step 3: Add javascript to your checkout.liquid file.

The below snippet of javascript can be used to replace the placeholder images with the values stored previously in the line item property.

<script>
      {% for item in checkout.line_items %}
        {% assign cart_index = forloop.index | minus: 1 %}
        {% for p in item.properties %}
          {% if p.first == "_image" && p.last != "" %}
            document.getElementsByClassName('product-thumbnail__image')[{{ cart_index }}].src = "{{ p.last }}";
          {% endif %}
        {% endfor %}
      {% endfor %}
</script>