Cart Upload with product targeting

Product targeting on the upload field only works on the Product detail page.

If you need to show an upload field on the Cart page based on the contents of the cart, please follow the steps below:

What this setup does and does not do. The code below adds one upload field to the cart page when the cart contains at least one matching product. It is a condition on the cart as a whole, not a field per product:

One upload field for the whole cart, regardless of how many matching products are in it.
The same field for every customer whose cart matches — its settings cannot differ per product.
A separate upload field in front of each cart line item is not supported.

If each product needs its own upload, collect the files on the product detail page instead, where product targeting does apply per product and each file is attached to its own line item.

This setup requires the upload field to be placed manually as described here: How can I show the widget on a custom page?

The idea is to only add the upload container if the cart contains specific products, we can do this by using a custom liquid code that checks each product in the cart:

 {% for item in cart.items %}
         {% if item.product.tags contains 'personalized' %}
                <div class="upload-lift"></div>
          	{%- break -%}
         {% endif %}
{% endfor %}

The above code checks if a product contains a tag "personalized", you can modify the condition to anything you want to based on the product object.

To target specific collection you can instead use this code:

{% for item in cart.items %}
         {% assign uploadAdded = false %}
         {% for c in item.product.collections %}
              {% if c.handle == 'picture-frames' %}
                   <div class="upload-lift" ></div>
                   {% assign uploadAdded = true %}
                   {%- break -%}
             {% endif %}
         {% endfor %}  
         {% if uploadAdded %}{%- break -%}{% endif %}                                                                                      
{% endfor %}

This code should be added at your desired location on the cart page:

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

in your cart-template.liquid file add the code before somewhere between the "<form>..</form>" tag.

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