Show the first image on the product page load

Store Design
,
1

Hello, good morning!

How can I show the first image on the product page load?

Example on this product page - https://casaliving.com.au/products/glass-vase-in-diamond-designs-14x14x20cm

Mabinibooks_0-1727217062703.png
Mabinibooks_0-1727217062703.png1179Ă—727 222 KB

I want the first image to show first

Also, why the variant images get blurry?

Please assist.

Thank you!

1 Like
2

Hi @Mabinibooks ,

Please send me the code of main-product.liquid file, I will check it for you

3

@Mabinibooks If the “Auto-select first available variant” option is checked, it will display the first available variant and it’s respective image on page load. If we uncheck this option, it will automatically display the first image of the product on the page load. Please follow the below steps and let me know whether it is helpful for you.

  1. From Shopify admin, navigate to “Online store” → “Themes” → “Customize”.
  2. Go to the product page.
  3. Locate the “Product information” section and click to edit like in the below attached screenshot.

Vinsinfo_0-1727432456837.png
Vinsinfo_0-1727432456837.png354Ă—597 18.6 KB

  1. Locate the “Theme Settings” section like in the below attached screenshot and search for the “Auto-select first available variant” field inside the “Theme Settings” section .

Vinsinfo_1-1727432471837.png
Vinsinfo_1-1727432471837.png355Ă—590 23.1 KB

  1. Uncheck the “Auto-select first available variant” field and save to show the first image of the product on the page load.

Vinsinfo_2-1727432478147.png
Vinsinfo_2-1727432478147.png355Ă—591 28.3 KB

Note: If you are using multiple product templates, we need to update it in all the needed templates by choosing “Products” → “Default product” template or the respective template for which you want to display the first image of the product on the product page like in the below screenshot.

Vinsinfo_3-1727432529708.png
Vinsinfo_3-1727432529708.png904Ă—378 33.8 KB

For blurry variant images, kindly consider using the images in proper resolutions.

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

4

Hello, thank you for replying to my post. I’ve tried what you have suggested, and it worked. However, if I disable “Auto-Select first available Variant”, it also disable other feature - if I click any variant, the variant image would not show or the picture would not change. It is stuck on 1 picture.

5

@Mabinibooks Thanks for letting us know this. We have checked this behavior on the default Empire theme. Even after disabling the “Auto-Select first available Variant” option, the variant image is properly updating based on the variant selection. Kindly make sure you have selected all options like “Color” and “Size”. If you are still facing the issue, please disable the option and share the theme preview URL to check this on deeper.