Display thumbnail image in cart

Automatic

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.

Image styles

To overwrite the image styles you can use the following CSS:

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

Manual

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.

To achieve the result shown in the image above, you first have to configure the thumbnail feature in the App.

On your upload field, in the Image settings section, select "Thumbnail uploaded image".

Next you have to edit your theme code where the cart items are displayed.

Open the Shopify Admin theme editor, navigate to Online Store > Themes, [More actions] > Edit Code.

Search for "cart" to show your themes cart related code.

Common locations are:

sections/cart-template.liquid (most themes)
templates/cart.liquid

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 -%}

If you need further assistance, please send us a request and we will be happy to help you out.