Show Featured Image, Not Image of First Variant

Highlighted
Shopify Partner
2 0 0

I am using the Minimal theme and I would like to customize the product.liquid template to show the featured image (first image) rather than the image of the first variant when the page is initially loaded. I still want the option selectors to change the image shown but I want to show an image not associated with a variant when the page first loads. 

This is the section of code in product.liquid that I have been focusing on: 

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector,
      translations: {
        add_to_cart : "{{ 'products.product.add_to_cart' | t }}",
        sold_out : "{{ 'products.product.sold_out' | t }}",
        unavailable : "{{ 'products.product.unavailable' | t }}"
      }
    });
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  });
</script>

It seems that when selectCallback calls timber.productPage it updates the image. This functionality is needed to change the image when a different variant is selected but I just want it to pick the "featured image" when the page is first loaded.

I have checked this tutorial but it didn't seem to work with the minimal theme: 

https://docs.shopify.com/support/your-website/themes/how-to-add-a-pick-an-option-to-drop-downs

I also saw this conversation about what I might have done wrong but that didn't help either: 

https://ecommerce.shopify.com/c/ecommerce-design/t/display-main-image-not-first-variant-on-page-load...

Big Thanks to anyone that can help!  

0 Likes
Highlighted
Shopify Partner
2 0 0

Never mind - It does work as expected. My testing method was incorrect. 

0 Likes
Highlighted
New Member
4 0 0

Hi, Jack!  Could you show exactly what you changed in the Minimal theme to fix this?  I tried to follow along with the two links you supplied, but I can't get the first variant image to stop showing up when the product pages load.  Thanks!!

-Amy

0 Likes
Highlighted
Astronaut
1890 1 400

@Amy Dryden -- Try this.  Open Templates/product.liquid.  You should find two instances of:

            {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Change both instances to:

            {% assign featured_image = product.images.first | default: product.featured_image %}

I hope this helps.

1 Like
Highlighted
Tourist
9 0 1

@Alex135 i was wondering if you can help me with the opposite of this... 

My featured image changes to the correct variant image, except for the first selection. (original and black) - but only first time. 

If I chose a different colour and come back to the first variant, the image will change, but if i select first time first variant, it wont change, it will remain the featured image of the product. 

 

{% assign current_variant = product.selected_variant %}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

 

This is the product that i am looking at:

https://999inks.myshopify.com/collections/dcp-inkjet/products/dcp-j572dw

 

Thank you

0 Likes