Variants Dropdown Menu doesn't change picture when selected

Store Design
1

Hi everyone,
I hope you’re doing well at the moment. I’m trying to add a dropdown for style and material variants to my product card and I did it. However, the box seems too big for the cards and when I select a variant, the product picture does not change. Even though I have assigned image to every variant.
I have some photos here so you could easily understand the situation.

DK7_0-1655410346809.png
DK7_0-1655410346809.png1920×1080 276 KB

DK7_1-1655410364228.png
DK7_1-1655410364228.png1920×1080 276 KB

And also the uncompleted code for the product-card here:

{% comment %}
Renders a product card

Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false

Usage:
{% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

    {{ product_card_product.title | escape }}

    

      

        

          
            
          
        

      

      
        {%- if product_card_product.featured_media -%}
        {%- liquid
            assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

            if product_card_product.featured_media.aspect_ratio == nil
              assign featured_media_aspect_ratio = 1
            endif
          -%}

        

          

            

            {%- if product_card_product.media[1] != nil and show_secondary_image -%}
            
            {%- endif -%}
          

        

        {%- else -%}
        ## {{ product_card_product.title }}

        {%- endif -%}

        
          {%- if product_card_product.available == false -%}
          
            {{ 'products.product.sold_out' | t }}
          
          {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
          
            {{ 'products.product.on_sale' | t }}
          
          {%- endif -%}
        

      

    

    
      

        {%- if show_vendor -%}
        {{ 'accessibility.vendor' | t }}
        
{{ product_card_product.vendor }}

        {%- endif -%}
        {%- if product_card_product.featured_media -%}
          
        
          {{ product_card_product.title | escape }}
        
        
        {%- endif -%}
        {% comment %} TODO: metafield {% endcomment %}
        {{ block.settings.description | escape }}
        {% render 'price', product: product_card_product, price_class: '' %}
        {% unless product_card_product.has_only_default_variant %}
        

          {%assign color_names = 'color,Color'%}
          
        
  
        
          {%assign style_names = 'style,Style'%}
          
        

      {%endunless%}
      
        
          {% if enable_shopnow_btn %}
            Shop Now
          {% else %}
            {% if product_card_product.available %}
              {% form 'product', product_card_product, class: product_card_product.id, data-product-form: '' , id: product_card_product.id %}
              
              
              {% capture metaF2 %}{{product_card_product.title | escape}}~{{product_card_product.compare_at_price | money}}{% endcapture %}
          
              {% endform %}
            {% else %}
              {{ 'products.product.sold_out' | t }}
            {% endif %}
          {% endif %}

Thank you very much! I’m looking forward to hearing from you soon.

2

Hi @DK7 ,

Please send me link preview showing this section, I will help you check it

3

Hi @LitCommerce ,

It’s my home page.
I use this code

from ColorBlock Free Theme to make the dropdown.
Thank you very much!

4

Hi @LitCommerce ,
Do you have any idea why only handbag display colors while others display only black?
Thank you very much!

5

Hi @DK7 ,

Did you solve the dropdown problem?

Now you want me to check and color display error.

1 Like
6

Hi @LitCommerce ,
I’m still working on the dropdown as well.
For the color swatches, I figure out they display those first 5 values. They’re Black but for S, M, L, XL, 2XL sizes. :disappointed_face:

image0.jpg
image0.jpg1112×626 57.5 KB

Thank you for your response.