Display thumbnail image in cart

The app can automatically convert thumbnail links it finds on the page into image elements.

On your upload field, in the Image settings section, select "Thumbnail uploaded image". 
Make sure the "Show image preview" checkbox is enabled.

For the automatic thumbnail image preview to work, the thumbnail link must be visible on the cart page.

Make sure that the field name does not start with an "_" underscore, as most themes exclude field names starting with an underscore.

.cl-prop img {
  max-width:100px !important;
  max-height:100px !important;
}

If you want to have full control over how the thumbnail is displayed and avoid the flickering of the full link text you can use a manual setup by following the instructions below.

in your cart-template.liquid file you will find a peace of code that loops over the cart item properties, look for something like:

{%- for p in item.properties -%}<br>
	

in this case " p" holds a cart item property.

you can than decide how to display each cart item property, to show the thumbnail as an image tag  for all the files uploaded from this app add the following code:

{%- for p in properties -%}
  {%- unless p.last == blank -%}

    {%  if p.first contains 'thumbnail' %}
      <li class="product-details__item product-details__item--property" data-cart-item-property>
         <span data-cart-item-property-value> <img class="cart__image" style="margin-left: 0;margin-top:1em;" src="{{ p.last }}" /></span>
      </li>
      {%- continue -%}
    {%- endif -%}

    {% if p.first.first == '_' %}{% continue %}{%- endif -%}

    <li class="product-details__item product-details__item--property{%if property_size == 0%} hide{% endif %}" data-cart-item-property>
      <span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

      <span data-cart-item-property-value>
        {%- if p.last contains 'cloudlift.app' -%}
          <a href="{{ p.last }}" target="_blank">Link</a>
        {%- else -%}
          {{ p.last }}
        {%- endif -%}
      </span>
    </li>
  {%- endunless -%}
{%- endfor -%}