Show size image

Hi,

This might be hard to achieve but even if I just have one size of product is it possible to show a mini image next to it like this image? My site is https://scntwrld.com

Even if I need an app to achieve this it’s ok. Most apps I see focus on style not image per size.

You’ll have to have that coded professionally. There are certainly apps for it, but nothing beats clean code.

Can you provide any code or insight?

I like to build something like this into the theme natively. I take the variant selection, take a parameter (e.g., match with size, scent, color…) and as soon as it matches, the variant image is displayed. This only works with one option. If there are multiple options, I take a workaround via meta objects.

Every theme is different - you can use AI to create a general code, but a developer should still perform a final check.

Hi @Luxurymrkt

You first want to set all variant images in the admin for a product.

This is for the default Horizon theme as an example. It has a variant picker and its images, but just when the setting is set to swatch

But we can copy the code a bit later,

                    {% liquid
                    assign featured_media = product_option_value.variant.featured_media

                    # If the variant has no featured media, and we have a combined listing product, then fall back to
                    # using the featured media of the child product that is linked to this option value.
                    if featured_media == blank and product_option_value.product_url
                      assign featured_media = product_option_value.variant.product.featured_media
                    endif
                  %}
                  {% if featured_media %}
                    <span class="variant-option__button-label__media">
                      {% render 'image',
                        image: featured_media,
                        height: 60,
                        class: 'variant-option__button-label__media-img'
                      %}
                    </span>
                  {% endif %}

before the text

And it needs some styling. But this is just an idea, and you need to see how your theme displays variants and featured variant images.

Hi @Luxurymrkt :raising_hands:

From what I understand, you’d like to display a small image next to each size option rather than just showing text labels. Shopify’s native variant picker can change the main product image when a variant is selected, but it doesn’t typically support displaying individual thumbnail images directly beside each size option.

You might want to take a look at Easify Custom Product Options :blush:

With Easify, you can create your size options using Image Swatches, allowing each size to have its own image. Instead of seeing simple text such as Small, Medium, or Large, customers can see a visual thumbnail associated with each option.

  • This is the result:

  • This is the app setup:

Simply create an option using the Image Swatches display type, then upload the image you’d like to associate with each size. Customers can click directly on the image to make their selection, creating a much more visual shopping experience.

What I like about this approach is that it works even if you only have a single size option. You’re not limited to color swatches or variant images—you can use actual images for each choice, making it easier for customers to understand the differences between options at a glance :blush: