Showing featured image before choosing the color variant

Highlighted
New Member
2 0 0

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 -%}
<div class="container-indent wrapper-social-icon">
  <div class="container text-center">
    {%- include 'addthis' -%}
  </div>
</div>
{%- endif -%}

{%- if item.full_width_description != 'default' -%}
{%- if item.full_width_description == 'design_tabs_in_column' -%}
<div class="container-indent product_tabs">
  <div class="container">
    {%- include "product_page_tabs" -%}
  </div>
</div>
{%- 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 -%}
<div class="container-indent">
  <div class="container container-fluid-custom-mobile-padding">
    <div class="tt-block-title text-left">
      <h2 class="tt-title-small">{{ item.custom_related_title }}</h2>
    </div>
    <div class="tt-carousel-products row arrow-location-right-top tt-alignment-img tt-layout-product-item">
      {%- for product in collection.products limit: length -%}
      {%- if _pr != product.handle  -%}
      <div class="col-2 col-md-4 col-lg-3">{%- include 'product-grid-item' -%}</div>
      {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
</div>
{%- endunless -%}
{%- endif -%}

{%- include "product_page_sticky_addtocart" -%}

 

0 Likes
Shopify Staff
Shopify Staff
324 9 35

Hi, @vatas 


Elle here from Shopify. 

 

I've moved your post to our Design board so you can receive a better response!

 

Cheers,
Elle

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
2 0 0

This is exactly what I'm looking for to achieve, in case I didn't explain well in the first post.

0 Likes