Order confirmation email (upload)

If you want to show the uploaded files on the order confirmation email, follow the steps below.

Automatic

The app has an integrated email editor that can automatically edit the Shopify email templates to include the uploaded file links.  

In the App > Settings > Online Store settings section:

Navigate to Shopify Templates:

In the editor, click on the Supported templates links to open the settings in your Shopify store:

Upload thumbnails

On the order confirmation email template, the email editor can edit the template to show the thumbnail on different locations:

For this to work, your Upload Field has to have the Image thumbnail setting enabled:

Upload links & thumbnail image

Upload links & thumbnail as product image: replace the product image with the uploaded image thumbnail:

Note: packing slip template from Shopify does not support showing external images, only the full file links will be displayed.

Email template update

Select and copy the full HTML Email body:

Paste into the editor in the app:

The editor automatically updates the content and provides the updated version, then Copy to clipboard:

Paste it back in Shopify:

Email test

If you want to test the updated email without creating a new order, you can visit a previous order (one that already has file upload links) and at the bottom Timeline, click on View email for the order confirmation email:

Select Resend email, and select Yourself as the recipient:

Revert to default

If the email is not showing as expected, it might be due to your previous email template having a different structure. In this case, it's recommended to first "Revert to default" and then copy the content back into the app, let it convert again, and copy back into Shopify:

Manual

The app saves the uploaded files as links on the order line item properties.   You can edit your order confirmation email template to show the uploaded files. 

Template

In the Shopify Admin, click on settings in the bottom left corner:

Select "Notifications": 

Select "Customer notifications" > "Order confirmation":

Line items

Inside the template, look for the following line item code:

All of the following examples have to be added below this line: (at the desired location inside the table cell)

{% for line in subtotal_line_items %}

Link to Download

To show a download link of the uploaded file you can use the following code:

{% if line.properties['upload'] %}
     <span class="order-list__item-variant"><a href="{{ line.properties['upload'] }}" target="_blank">Download</a></span><br/>
{% endif %}

Make sure to replace the "upload" property name with the field name you've configured in the app:

Multiple uploads

If you have set your upload field to allow multiple uploads, then the file links are stored with the number next to it, eg. "upload_1", "upload_2".  

To list all the files in the template you can use the following code:

{% for p in line.properties %}
    {% unless p.last == blank %}
       {%- if p.last contains 'cloudlift.app' -%}
               <span class="order-list__item-variant"><a href="{{ p.last }}" target="_blank">Download</a></span><br/>
       {%- endif -%}
    {% endunless %}
{% endfor %}

Thumbnail image

If you have enabled the thumbnail image as described in:  Display thumbnail image in cart

Then you can show the uploaded image thumbnail using the following code:

{% if line.properties['thumbnail'] %}
      <span class="order-list__item-variant"><img src="{{ line.properties['thumbnail'] }}" width="100" /></span><br/>
{% endif %}

Product image

If you want to replace the product image with the uploaded image, you can use the following code:

{% if line.properties['thumbnail'] %}
      <img src="{{ line.properties['thumbnail'] }}" align="left" width="60" height="60" class="order-list__product-image">
{% elsif line.image %}
      <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}

Full template example

You can download the full template with all the modifications:  order-confirmation.liquid

Order Printer - Packing slip

To include the upload on the Order Printer app, you can add the following check  or p.last contains "cloudlift.app"  to the existing template code:

{% if p.last contains "cdn.shopify.com" or p.last contains "/uploads/" or p.last contains ".png?" or p.last contains ".jpg?" or p.last contains "//uploadery.s3" or p.last contains "cloudlift.app" %}
     <p class="line-item-property">{{ p.first }}:<br></p>
     <a href="{{ p.last }}" target="_blank"><img src="{{ p.last }}" alt="{{ p.first }}" width="60" border="0" style="width: 60px; height: auto !important;"></a>
{% else %}