Issue with Ella Theme - Main Image Being Overridden by Variant Image

[MudassirMehmood]

Hi Shopify Community,

I’m using the Ella theme on my Shopify store and facing an issue with product media. Here’s the problem:

1. Main Image vs. Variant Image:

   • I’ve set a main image for each product in the Shopify admin under the Product Media section.

   • However, the theme automatically displays the image of the first variant (e.g., the first color option) instead of the main image I’ve set.

   • For example, if I have a product like a shoe rack with 5 color options (e.g., Black, White, etc.), the theme shows the Black variant image by default, even though I want a different image to appear as the main image.

2. Where the Issue Occurs:

   • Collection Page: The main image is replaced by the first variant’s image.

   • Product Page: When a user lands on the product page, the first variant’s image is displayed instead of the main image.

3. What I’ve Tried:

   • I’ve attempted to add custom JavaScript to override the default behavior, but it didn’t work as expected.

   • I also tried modifying the product template to prioritize the main image, but the theme still defaults to the variant image.

4. What I Need:

   • I want the main image to always appear first, both on the collection page and the product page, regardless of the selected variant.

   • When a user selects a variant, the variant-specific images should still work, but the main image should remain the default image when no variant is selected or when the page loads.

5. Additional Details:

   • Theme: Ella (latest version: 6.7.1 ).

   • Customizations: I’ve made minor customizations to the theme, but nothing related to product media or variant handling.

   • Code Attempts: I’ve tried adding JavaScript to the theme.liquid file and modifying the product template, but I’m not sure if I’m targeting the right elements.

6. Questions:

   • Has anyone else faced this issue with the Ella theme?

   • Is there a way to override the default behavior of the theme to prioritize the main image?

   • Are there specific changes I need to make to the product template or JavaScript to achieve this?

If anyone has experience with this issue or can provide guidance, I’d greatly appreciate your help! Please let me know if you need more details or code snippets from my theme.

Thank you in advance!

[mageplaza-cs]

Hi @MudassirMehmood ,

I am from Mageplaza - Shopify solution expert.

Based on your description, the Ella theme is prioritizing the first variant’s image over your designated main image.

1. Collection Page Fix
Modify the collection grid item to use the product’s featured image instead of the first variant’s image.

File: snippets/product-card.liquid
Find the image rendering code (look for product-card__image class) and replace:

{%- assign img_url = product.variants.first.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

With:

{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

2. Product Page Fix
Override the default variant image initialization in the product template.

File: sections/main-product.liquid
Locate the JavaScript initialization code (search for variants:). Add a conditional to prioritize the main image:

3. Variant Selection Logic
Update the image switching behavior when variants are selected.

File: assets/theme.js or variants.js (find the variantChange() function)
Modify the image update logic:

function variantChange(event) {
  // ... existing variant handling code ...

  if (variant) {
    // Use variant image if available, else fallback to main image
    var newImage = variant.featured_image ? 
      variant.featured_image.src : 
      window.productSingle.featured_image;
  } else {
    // No variant selected: show main image
    var newImage = window.productSingle.featured_image;
  }

  // Update image (example using class selector - adjust as needed)
  document.querySelector('.product-single__photo img').src=newImage;
}

4. Force Main Image on Page Load
Add CSS to hide variant-specific images until selected:

File: assets/theme.css.liquid
Add:

/* Hide variant images by default */
[data-variant-image] { 
  display: none; 
}

/* Show only the main image initially */
.product-single__photo:not([data-variant-image]) { 
  display: block; 
}

Additionally, you should refer to the theme’s changelog to stay updated with the latest changes.

Please let me know if it works as expected

Best regards!

[Nikoscapone]

can u help with this on shrine theme?? asap

[suyash1]

@Nikoscapone can you please share your page link?