How to show feature image as a 1st image on the product page and collection page.

Store Design
, , ,
1

Hi all,

I have an issue as I need to show the feature image as the 1st image on the product page, but unable to achieve the same as it is showing the variant image as the 1st image not the feature image(or first image which we have added in the product admin section).

I have tried previous suggestion that has given on the forum but it is not working on the dawn 15.0 theme.

Also we need the same for the collection page, as for some of the product on the collection page its showing the feature image, but if the first variant is sold out then it is not showing the variant image rather than the feature image.

Can you all please help how can I solve this issue?

2

Hi @sahilrev Hopefully you have found the solution for this issue, if not then here is the code you can use to solve the issue of product page.

<script>
    document.addEventListener('DOMContentLoaded', function() {
    const allMediaItems = document.querySelectorAll('.product__media-item'); // All media items (big images)
    const thumbnailItems = document.querySelectorAll('.thumbnail-list__item'); // Thumbnails
    const featuredMediaId = document.querySelector('.product__media-item.is-active')?.getAttribute('data-media-id'); // Featured media ID

    // Function to display the initial featured image on load
    const showInitialMedia = () => {
        if (featuredMediaId) {
            // Check if the featured media exists and activate it
            const featuredMediaItem = document.querySelector(`[data-media-id="${featuredMediaId}"]`);
            if (featuredMediaItem) {
                resetActiveState(); // Clear previous active states
                featuredMediaItem.classList.add('is-active');
            }
        } else {
            // If no featured media, default to the first media item
            allMediaItems[0].classList.add('is-active');
        }
    };

    // Function to reset all media and thumbnails to remove active state
    const resetActiveState = () => {
        allMediaItems.forEach(item => item.classList.remove('is-active'));
        thumbnailItems.forEach(item => item.querySelector('button').setAttribute('aria-current', 'false'));
    };

    // Function to update the main media image when a thumbnail is clicked
    const activateMediaItem = (mediaId) => {
        resetActiveState(); // Remove 'is-active' from all media items
        const selectedMediaItem = document.querySelector(`[data-media-id="${mediaId}"]`);
        if (selectedMediaItem) {
            selectedMediaItem.classList.add('is-active'); // Activate the selected media item
        }
    };

    // Attach click event to thumbnails to update the big image
    thumbnailItems.forEach(thumbnail => {
        thumbnail.addEventListener('click', function() {
            const mediaId = thumbnail.getAttribute('data-target'); // Get the corresponding media ID
            activateMediaItem(mediaId);
            thumbnail.querySelector('button').setAttribute('aria-current', 'true'); // Mark thumbnail as active
        });
    });

    // Call the initial load function to set the featured image
    showInitialMedia();
});
</script>

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Thanks for the help it worked.

4

Hi. Hope you can help. I’m having the same issues as the OP, but using the Studio theme (latest version 15.3.1.).

Have copied and pasted the code above but am still seeing the same issue - the main image I want to feature on the product landing page is replaced by the first variant image; here’s a link to illustrate:

https://fogwalking.com/products/helvellyn-lake-district-photo-print

I wish the main image to be the one not associated with a variant, so the image not in a room setting. No matter what I do (and I’ve tried a number of suggested solution from various threads) the first image is always the one associated with the first available variant.

I note the OP is using the Dawn theme. Would your code work OK with the Studio theme? I think I copied and pasted, but am no code warrior. :slightly_smiling_face:

TIA for any guidance you can give.

Best wishes, Jonathan.