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

Third-party cart drawers

The Manual setup above edits your theme's cart template. If your cart is rendered by a separate cart drawer or slide-cart app, the loop over the line item properties lives in that app's own theme extension, not in your theme files, so there is nothing for you to edit there.

On those stores your options are:

Keep the Automatic setup. The thumbnail property has to stay visible for the app to convert it into an image, so the raw link text is briefly shown before the image replaces it.
Ask the cart drawer app's support whether their template can skip properties whose name starts with an underscore and render the thumbnail property as an image. The change has to be made on their side.

Hiding the thumbnail property

Renaming the thumbnail property to _thumbnail hides it from the cart and the checkout summary, but with the Automatic setup it also removes the image preview, because that preview works by converting a visible thumbnail link into an image. There is no app setting that renders the preview from a hidden property.

The full-resolution upload property can be hidden safely. Prefixing it (for example _upload ) removes the raw URL from the cart and the checkout order summary while the file stays attached to the line item and the order, and remains reachable from the app and the order export.

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