I have created a custom dropdown attribute name "manufactures_guarantee_length", and its value like 1_year_guaranty,2_year_guaranty,3_year_guaranty, more, in the product details page, I call that attribute, now when we change the attribute value in any product that kind of image should change at the front-end product detail page,

for that, I have created a layout file catalog_product_view.xml and guaranty.phtml file, in phtml file, I code like

<?php $product = $block->getProduct(); ?>
<?php echo $product->getData('manufactures_guarantee_length'); ?>

so I get the value of dropdown, so now how to change like Image as per dropdown? please suggest me on this. Thanks in advance. .

  • you want to change images based on product attribute manufactures_guarantee_length? Sep 22, 2020 at 4:50
  • @RizwanKhan yes, if we select attribute then the image change like I select guaranty_1 attribute value, then guaranty_1.jpg display
    – rocky9310
    Sep 22, 2020 at 4:52
  • this is product attribute you are talking about not a custom option, right? Sep 22, 2020 at 4:54
  • 1
    @RizwanKhan i have created a custom dropdown attribute and its work on product level,
    – rocky9310
    Sep 22, 2020 at 4:56
  • 1
    @RizwanKhan Yes, this is product attribute,
    – rocky9310
    Sep 22, 2020 at 4:58

1 Answer 1


For changing the image on the product view page of the gallery You first need to override gallary.phtml file in your theme or your custom module.


Add the below script in gallary.phtml to change the JSON data of the gallery and load the images accordingly. You need to add your custom conditions for the images.

], function ($, gallery) {

        var allimgsobj = '<?php echo $block->getGalleryImagesJson(); ?>';
        var manufacturer = "<?php echo $block->getProduct()->getData('manufactures_guarantee_length'); ?>";

        $('.gallery-placeholder').on('gallery:loaded', function () {

            var res = [{}];
            $.each(JSON.parse(allimgsobj), function(i, obj) {
                if(obj.caption != null && obj.caption.toLowerCase() == manufacturer.toLowerCase()){
                    res[i] = obj;

            var gallery = $('.gallery-placeholder').data('gallery');
            gallery.fotorama.load(res); // this will reload the gallary with fresh json data
            gallery.first(); // this will select first image on load in gallary

my condition is based on caption of images, you can change it to name of the images.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.