displaying correct image for variants in shopping cart

Highlighted
New Member
6 0 0
The owner of an organic baby boutique decided to only upload one image for each unique variant.option1, rather than an image for each variant, because the appearance of the product only changes with variant.option1. The problem is that there are also other types of options for each product, so figuring out which product image to display (product.images[?]) was not straight-forward. The following cart.liquid does this by finding each unique option1 for each product in the cart and matching it against the option1 for the variant in the cart. The trick was getting a numeric counter to work without the support for variable casting in order figure out which product.images[?] to use. I couldn't just capture the number to put into the "?" above because that would be using a string as an index. The solution is tortuous: I had to use capture to add "1" to a string each time it found a different option1 for the product, and then use capture to find the size of the string, and then use a separate for loop to assign another variable to the forloop.index0 when it found a match for the image number as a string. The various temp variables are used to persist values in their parent scopes. As I am a Shopify beginner, I'm hoping someone might pipe up and tell me how I could have done with an undocumented feature, but this works!
{% if cart.item_count == 0 %}

Your cart is empty

continue shopping

{% else %} <form name="cartform" method="post" action="/cart" id="cartform"> {% for item in cart.items %} {% assign oldoption1 = '' %} {% assign counterstr = '' %} {% assign incr = '1' %} {% for variant in item.product.variants %} {% if variant.option1 != oldoption1 %} {% assign oldoption1 = variant.option1 %} {% if oldoption1 == item.variant.option1 %} {% capture tempimagenum0 %}{{ counterstr | size }}{% endcapture %} {% assign tempimagenum1 = tempimagenum0 %} {% endif %} {% assign tempimagenum2 = tempimagenum1 %} {% capture counterstrtemp %}{{ counterstr | plus: incr }}{% endcapture %}{% assign counterstr = counterstrtemp %} {% endif %} {% assign imagenumstr = tempimagenum2 %} {% endfor %} {% for img in item.product.images %} {% capture teststr %}{{forloop.index0}}{% endcapture %} {% if teststr == imagenumstr %} {% assign imagenum = forloop.index0 %} {% endif %} {% endfor %}
{{ item.title | escape }}
{{ item.title }}
{{ item.price | money }}
<input name="updates[]" class="cart-update" value="{{ item.quantity }}" type="text" onfocus="this.select();" /> <input name="update" id="update-cart" value="Update" type="submit">

Remove from cart
{% endfor %}
TOTAL: {{ cart.total_price | money }} {{ shop.currency }}
continue shopping <input name="checkout" src="{{ 'checkout.gif' | asset_url }}" value="Proceed to Checkout" type="image" /> {% if additional_checkout_buttons %}

- or -

{{ content_for_additional_checkout_buttons }}
{% endif %}
</form> {% endif %}
0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 122

Good god! I feel you pain on this one! It’s really generous of you to share your very detailed fix for this.

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
New Member
6 0 0

Thanks Jamie. I just edited a couple of variable names in the above cart.liquid for clarity. The shop is not public yet (no link from main menu) but here is the link so you can see how it’s coming so far.

http://www.littlesproutshawaii.com/pages/shop

Another neat feature is when you select an option from the first option pulldown for a product, the correct image is highlighted with a blue dashed border (used mootools).

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 122

I like where this is going Charles. Something is not matching up on this page it’s not grabbing the right item. It’s offset by one. I am assuming it’s just a missing image.

I would add a link back to the product on the cart page for easy reference to the shopper.

<a class="itemtitle" href="{{ product.url | within: collection }}">{{ product.title }}</a>

The other thing I would do is add a conditional on the product page so that if there is only one variant the dropdown is replaced by just the variant name.

This looking very good!

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
New Member
6 0 0

Great advice Jamie. Thanks.

Yes, that is a missing image for the ladybug zoobie.

0 Likes
Shopify Staff
Shopify Staff
5704 0 278

This is an interesting puzzle. I will try and get my own solution later (just for fun! we all have our own ideas of what fun is…). Chances are I will come up with something very similar. I will share regardless.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Shopify Staff
Shopify Staff
5704 0 278

OK, let’s go with a solution that is kind of a cheat.

I would tell my client:

Dear client, if you want this functionality than you must use the option name, say ‘Pink Circles’, in the name of your image file that shows the ‘Pink Circles’ color variation. What’s more, use a handleized version of the option name. For a definition of handleize in Shopify, go here.

So if you want to upload a picture for ‘Pink Circles’ All-in-one diapers, the name of the file should be all-in-one-diaper-pink-circles.gif or all-in-one-diaper-pink-circles.jpg, etc.

Then I would use this code to show the appropriate image on the cart page.


{% if item.product.options.size > 1 %}
  {% assign found = false %}
  {% capture title %}{{ item.variant.option1 | handleize }}{% endcapture %}
  {% for img in item.product.images %}
    {% if found == false and img contains title %}
      [[[ DISPLAY THAT IMAGE ]]]
      {% assign found = true %}
  {% endfor %}
{% endif %}
{% if found == false or item.product.options.size == 1 %}
  [[[ DISPLAY FEATURED IMAGE ]]]
{% endif %}
Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Shopify Staff
Shopify Staff
5704 0 278

Now, let’s say the client says:

Dear Person-Who-I-Am-Paying, I have already uploaded all my product images and they do not contain what you need in their file names. The best I can do is order them in the admin so that the first one shows the first color option.

Then I use maths.

To be continued.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 122

Go code girl! ;)

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
New Member
6 0 0

Nice alternative, Caroline. My client had/has already uploaded 50% of their images, so I’ll have to stick with the matching scheme for option1 I’ve written, and make it better using math if possible as you suggest.

I had trouble with using a simple counter and math because I wasn’t aware that Shopify does not automatically cast numeric strings to numbers and vice-versa, and I couldn’t find a filter to do that.

As a side note, I spent so much time trying to get this to work using Vision and then found that it doesn’t support all the math/filter features that Shopify does live. Is there a way to find out what the differences are between Vision and live Shopify?

0 Likes