I need to show my product pic in landing page and not variant

Store Design
, , ,

Topic summary

A store owner wants to display the main product image on landing pages instead of the first variant image, which currently shows by default when a variant is pre-selected.

Proposed Solutions:

  • One user suggested editing the theme’s global.js file by finding and commenting out the this.onVariantChange(); code line
  • Another developer offered to implement the fix directly via collaborator access

Current Status:

  • The JavaScript code modification did not resolve the issue
  • The store owner shared their store URL (1rs3ty-ar.myshopify.com) for further troubleshooting
  • Discussion remains open as the problem is unresolved
Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone! I am struggling to find a solution to this matter. I would highly appreciate it if someone could help to solve the below.

Here is my problem:

Whenever someone is landing on my product page, the first image he will see is the first variant image as it is selected by default whereas I would like the first featured image to be displayed.

I will need help asap

1 Like
2

Hi @Nikoscapone,

1. Go to Online Store → Theme → Edit code.
2. Open your global.js file.

Find code

Use the search function Ctrl + F

this.onVariantChange();

Comment Out the Code.

Click Save.

Thank You!

3

Hi @Nikoscapone ,

Yes its possible. If you’d like me to handle it, please share the collaborator code so I can edit the theme accordingly. Thank you

4

i write pm to you we take it from there thx

5

this didnt work :confused: u can make it with collabrator?

6

@Nikoscapone,

Can you share your store url?

1 Like
7

1rs3ty-ar.myshopify.com

8

anyone who can connect with collab code and fix it

9

@Nikoscapone can you DM me the collab code and website link? I think first variant image in code needs to be changed to featured image, I can check that

1 Like
10

i sent pm my man check

1 Like
11

@Nikoscapone I replied , please check

12

Hi @Nikoscapone , I just wanted to confirm a few details regarding your store:

  • Do you currently have a featured image set for your main product?

  • Could you please share a preview link of your store so I can take a closer look?

  • Also, may I know which theme you’re using?

Once I have this information, I’ll compare it with the code from my store and get back to you with a tailored solution.

With Black Friday & Cyber Monday (BFCM) approaching, this is a great opportunity to optimize your theme’s user experience and boost conversions.
Thanks!

13

Hi @Nikoscapone

Step 1: Go to Your Theme Code

  1. From your Shopify admin, go to Online Store → Themes.
  2. Find your live theme (e.g., Dawn) → click … → Edit code.

Step 2: Open the Product Template

  1. In the sidebar, open:
    sections/main-product.liquid
    2.(In older versions, it might be product-template.liquid)*

Step 3: Find the Default Selected Variant Code

Search for this line (or something similar):

{%- assign selected_variant = product.selected_or_first_available_variant -%}

This line tells Shopify to automatically select the first available variant — that’s why its image shows up first.

Step 4: Replace It

Replace that line with this:

{%- assign selected_variant = null -%}

This change ensures no variant is pre-selected when the product page loads.

Step 5: Disable Auto-Select in JavaScript

Scroll down near the bottom of the same file, or open:

assets/product-form.js

Find code similar to:

this.currentVariant = this.getVariantData()[0];

Comment it out or remove it:

// this.currentVariant = this.getVariantData()[0];

This stops the first variant from being selected automatically via JS.

Step 6: (Optional) Reset the Image to Featured

If you want to make sure the first featured image always shows first, add this snippet right after your product media loop begins in main-product.liquid:

{%- assign featured_image = product.featured_image -%}
<img
  src="{{ featured_image | image_url: width: 1200 }}"
  alt="{{ featured_image.alt | escape }}"
  class="featured-image"
>

Step 7: Save and Test

  • Save your changes.
  • Go to your product page in an incognito window or after clearing cache.
  • The main featured image should now display first — not the first variant image.

Best regards,
Devcoder :laptop:

14

It will be better if you can share this page URL here, so that I can take a look directly and check the way how to help you.