Variant 32x32 images are not loading (were not made ?).

Solved
Highlighted
Tourist
7 1 3

Hi,

 

We use the Portland theme for our shop.

After loading a product with variants, the variant images don't show up in the little squares (see below).

It seems that these images were not made (at least the URL of the images are "not found"). 

 

Any help, suggestions would be greatly appreciated.

 

Peter

 

 

Untitled.jpg

 

 

0 Likes
Highlighted
Shopify Expert
96 17 13

@PLintel - Have you assigned images to each of your variants (can be accomplished by clicking the image placeholder next to the variant on the product page)?  If this has been done, would recommend reaching out to the theme dev's.

0 Likes
Highlighted
Tourist
7 1 3
Yes, the assignments were made, and they work for the main pictures.
0 Likes
Highlighted
Excursionist
13 1 2

There is a bug in the swatch code: background-color has an invalid property value of shown when it should be a hex value. Try adjusting and associating the images again.

 

If all else fails I would contact the maker of your Turbo portland theme-children.

Need shopify help? Drop us an email hi@cnvs.la
Web: www.cnvs.la
0 Likes
Highlighted
Tourist
7 1 3

Ye, I noticed the bug, but I am uncertain if this is a simple / unrelated bug, or a symptom of the problem of the missing images (the files are not made, or so it seems). 

0 Likes
Highlighted

Success.

Tourist
7 1 3

I hacked the code in both swatch files:

...  style="background-image: url({{ variant.featured_image | product_img_url: '600x' | prepend: 'https:' }});  ...

 

0 Likes
Highlighted
Tourist
7 1 3

Untitled.jpg

1 Like
Highlighted
New Member
1 0 0

I've been trying to figure out how to display the variant images within the swatch boxes.  I have to say, I was very relieved when I saw this answer.  You would think that this would be the default, but I am finding out otherwise.

 

When you say "swatch files", exactly what do you mean?  Where can I find these, please?

0 Likes
Highlighted
Tourist
7 1 3

These are the files I edited:

product-swatch.liquid

and

collection-swatch.liquid

 

 

0 Likes