How can I change from swatch to image selector for product variants?

[EdgarPateno]

Hi Experts,

We have issues with the variant selector. First, the image below shows the variants on the product editor.

The image below shows how it looks on the front end.

If you noticed, the variants are in SWATCH, however, there is no image on it, just a plain white space. You will know it’s clickable when you hover your mouse on that space.

What we want to happen is to make it an IMAGE SELECTOR or IMAGE SWATCH like this screenshot below.

On that image, we used an app, but we want to delete that app and just use the Shopify default so that we can add an SKU (for fulfillment purposes). Unfortunately, it looks like the code has overwritten it. Also, the code only offers a swatch option, no dropdown.

Please note that the entire site was `100% hard-coded by our previous developer, not a Shopify theme.

Please see the code below:

{% liquid
  for variant in product.variants
  if variant.metafields.global.color_hex and variant.metafields.global.color_hex != blank
  assign has_color = true
  break
  endif
  endfor
%}
{%- assign current_variant = product.selected_or_first_available_variant -%}

        
           
 
        {% render 'family-bundles-description' %}
        
       

Please help. Thanks and stay safe

Edgar

[hamzasgd]

@EdgarPateno your store link?

[EdgarPateno]

Hi @hamzasgd ,

Sorry, I forgot the store URL. Here: https://swished.com.au/products/family-bundles

Thanks for your quick response. Take care

Edgar

[hamzasgd]

@EdgarPateno like this

[EdgarPateno]

Hi @hamzasgd ,

Yes, exactly like that. What code shall I add?

Thanks

[hamzasgd]

@EdgarPateno wait sending

[EdgarPateno]

Thanks, @hamzasgd . I will wait. Stay safe

[hamzasgd]

@EdgarPateno CSS at the end of custom.css file

.pdp-colors {
    width: 90px !important;
    height: 90px !important;
    background-size: 80px 80px !important;
    background-position: center !important;
    border-radius: unset !important;
    transform: translate(0%, -2%) !important;
}
.color-swatchers #wrapper.circle {
    border-radius: unset !important;
    width: 100px !important;
    height: 100px !important;
}
.color-swatchers div#wrapper {
    width: 100px !important;
    height: 100px !important;
}
.color-swatchers {
    order-radius: unset !important;
    width: 100px !important;
    height: 100px !important;
}

Liquid Code Fix

[EdgarPateno]

Hi @hamzasgd ,

Thank you so much for your response. It almost worked.

I tried replacing it one at a time, but it’s either the grey variant has no image or the orange has no image. Or maybe I placed the code in the wrong placement.

[EdgarPateno]

Also, we have 3 products that need the image variant selector. I think you used specific IDs only for that specific product I gave you. Is there a dynamic way where your code can be applied to all products with variants? Thanks

[hamzasgd]

@EdgarPateno You are placing the code in else condition only you have to replace it in both places in if and else conditions.

As for the specific product id did you see any id in my code? The code will work for all I think you have to check the template you selected for the other products.

[hamzasgd]

@EdgarPateno check this and you don’t need to replace the whole code just update the style tag

style="background:url('{{ variant.image.src | img_url: '100x100' }}');

Thanks don’t forget to like and accept it as a solution.

[EdgarPateno]

Thanks @hamzasgd . Yes, you’re right. I will try again.

[EdgarPateno]

Hi @hamzasgd ,

Truly sorry for troubling you. This is the final code with your correction and with the custom css as well:

{% liquid
  for variant in product.variants
  if variant.metafields.global.color_hex and variant.metafields.global.color_hex != blank
  assign has_color = true
  break
  endif
  endfor
%}
{%- assign current_variant = product.selected_or_first_available_variant -%}

        
           
 
        {% render 'family-bundles-description' %}
        
       

This is how it looks on the front end:

Did I do something wrong?

[hamzasgd]

@EdgarPateno I can see that this code is not applying at all can you remove the line above and check again thanks

[EdgarPateno]

Oh, sorry @hamzasgd , it’s supposed to be /* image variant selector */ , hehehe… It’s perfectly OK now. Thank you thank you so much for your time and expertise. I will mark this as the SOLUTION and will LIKE it. Again, thank you so much for your time and so sorry for troubling you.

Stay safe and take care

Edgar

[hamzasgd]

@EdgarPateno watch this you will understand Video Demo

[EdgarPateno]

It’s all good now, @hamzasgd . Thank you so much for your time. Truly truly appreciate your kindness and patience. Stay safe

[hamzasgd]

@EdgarPateno You’re welcome.