Showing Featured Image Before Choosing The Color Variant

Store Design
1

Hey guys,

I’m using a customized 3rd party theme (Wookie), and I’m having problems setting the featured image to show first when the product listing is opened. I want to offer variants of the products in different colors (black, blue, green, purple), with black being the first color listed, and as soon the users opens a listing, the image changes to the single image of the black product (as black color being the first variant selected).

I was thinking that the best solution would be to unselect the variants before the users pick it themselves, while showing the featured image (for example with all the variants/colors in one picture). I have followed the official Shopify article but it is made only for the Shopify themes, so I couldn’t figure out where the problem lies in my code.

Below is my product-template.liquid, and thanks to everyone helping out.

{%- assign product_meta = product.metafields.description -%}

{%- assign sale_on = false -%}
{%- if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
  {%- assign sale_on = true -%}
{%- endif -%}

{%- comment -%} Main Image URL. {%- endcomment -%}
{%- assign main_url_image = product.featured_image -%}

{%- comment -%}
date_difference = 60 * 60 * 24 * day counter, this is new product period in seconds
{%- endcomment -%}
  {%- assign date_now = 'now' | date: "%s" -%}
  {%- assign date_published = product.published_at | date: "%s" -%}
  {%- assign date_difference = date_now | minus: date_published -%}
  {%- assign date_limit = 86400 | times: settings.new_product_period -%}
  {%- assign pr_variant = product.selected_or_first_available_variant -%}

{%- assign item = section.settings -%}

{%- include item.page_design -%}

{%- if item.show_share_buttons -%}

  

    {%- include 'addthis' -%}
  

{%- endif -%}

{%- if item.full_width_description != 'default' -%}
{%- if item.full_width_description == 'design_tabs_in_column' -%}

  

    {%- include "product_page_tabs" -%}
  

{%- elsif item.full_width_description == 'design_tabs_in_row' -%}
{% include "product_page_tabs_horizontal" %}
{%- endif -%}
{%- endif -%}

{%- capture upsellcollection -%}{%- include "product-page-upsellcollection" -%}{%- endcapture -%}
{%- assign upsellcollection = upsellcollection | strip -%}
{{ upsellcollection }}

{%- if item.show_custom_related -%}
{%- assign product_meta = product.metafields.description -%}
{%- unless product_meta.related_collection == blank -%}
{%- assign name_collection = product_meta.related_collection -%}
{%- assign collection = collections[name_collection] -%}
{%- assign _pr = product.handle -%}

  

    

      ## {{ item.custom_related_title }}
    

    
      {%- for product in collection.products limit: length -%}
      {%- if _pr != product.handle  -%}
      
{%- include 'product-grid-item' -%}

      {%- endif -%}
      {%- endfor -%}
    

  

{%- endunless -%}
{%- endif -%}

{%- include "product_page_sticky_addtocart" -%}
2

Hello @Emiral ,

Try to change the featured image url with the first selected variant image

e.g {{ product.selected_or_first_available_variant.featured_image }}

Thanks