How To Show Featured Image First In Featured Product in Home Page Instead Of First Selected Variant

[Rabi3]

Hello,

I want to always show the featured product instead of the first variant image in the latest dawn theme version. I followed the below link and it works perfectly.

Solved: Show Featured Product Image Instead of Selected Variant Image, Dawn Theme, v8.0.0 - Shopify ...

However, it works well in the products pages but does not work for a featured product I had added on my homepage. Since the location is different I have to code it separately in card-product.liquid but I don't know how to code. Any help?

Thanks.

[NadiaAnthony]

Could you please provide the URL and password for website?

[Rabi3]

Hello Nadia,

www.seby-store.com

Not password protected..

[NadiaAnthony]

Try this... Navigate to Online Store > Themes > "..." > Edit Code. Find the "featured-product.liquid" file in the sections folder. Scroll down to around line 79 and find this chunk of code. 

<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
 {% render 'product-thumbnail',
      media: media,
      position: 'featured',
      loop: section.settings.enable_video_looping,
      modal_id: section.id,
      xr_button: false,
      media_width: media_width,
      media_fit: section.settings.media_fit,
      constrain_to_viewport: section.settings.constrain_to_viewport
 %}
</div>

Replace with: 

<div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
  {%- for media in product.media limit: 1 offset: 1 -%}
   {% render 'product-thumbnail',
       media: media,
       position: 'featured',
       loop: section.settings.enable_video_looping,
       modal_id: section.id,
       xr_button: false,
       media_width: media_width,
       media_fit: section.settings.media_fit,
       constrain_to_viewport: section.settings.constrain_to_viewport
    %}
  {%- endfor -%}
</div>

What it's doing is looping through the images, offsetting the featured image to the second one in the loop and then limiting it to only show one featured image at a time. Here is an example: https://nadia-coalition-tech.myshopify.com/ PW: teatime. When you view full product, you'll notice it's pulling in the second image only for the featured product section on the homepage.

Hope this helps!

[Rabi3]

Hello Nadia,

Thank you for your reply.

I tried your code but now it's giving me the second variant picture (Yellow product).

What I want is to show the product featured main picture first which I chose here on the left.. and then when I choose the color Blue or Yellow to see the selected variant picture..

 

[NadiaAnthony]

Hi, thanks for your patience. The store is now password protected. Could you please provide me with the password so I can take another look?

[Rabi3]

Hello Nadia,

Password removed.

Thanks.

[NadiaAnthony]

I see. Okay, feel free to reverse/undo the other code. Note that the following applies to the button/pill variant type only, not the drop down. Navigate to Online Store > Themes > "..." > Edit Code. Open the snippet file titled "product-variant-options.liquid". Around line 55, you'll find this:

{% if option.selected_value == value %}
    checked
{% endif %}

To make the change globally (main/all products not just the featured product) you'll replace that block of code with this:

{% comment %}
{% if option.selected_value == value %}
    checked
{% endif %}
{% endcomment %}

To apply this change ONLY to the featured product on the homepage, keeping the main product the same, you'll replace it with this: 

{% if option.selected_value == value %}
  {% unless template.name == "index" %}
    checked
  {% endunless %}
{% endif %}

Example of homepage only: https://nadia-coalition-tech.myshopify.com/

PW: teatime

Please let me know how this solution works for you. 

[Rabi3]

Hello Nadia,

Thank you for your reply. Unfortunately, this did not work.

[NadiaAnthony]

Hi, could you please explain an issues you encountered? Please remember to revert changes first before moving on.

Let's try again and start with JUST the featured product on the homepage... Navigate to Online Store > Themes > "..." > Edit Code. Open the snippet file titled "product-variant-options.liquid". Around line 55, you'll find this:

{% if option.selected_value == value %}
    checked
{% endif %}

 Replace with:

{% if option.selected_value == value %}
  {% unless template.name == "index" %}
    checked
  {% endunless %}
{% endif %}

Working example with same theme: https://nadia-coalition-tech.myshopify.com/

[Rabi3]

Hello Nadia,

I am starting from a copy of my theme no changes are made to the code yet.. followed the steps above but the first variant picture is still showing.. I want the main picture instead..

[Rabi3]

Hello Nadia,

Any feedback?