Linking the Image to the Extra Options Service Dropdown

If you have the need to swap out the product image displayed on the Product page with the user's selected option in a dropdown you can try the following.

This works with Job Services within the extra options.

You will first need to create the Job Service. For the unique  image id you can write MyImage. The name is arbitrary but you need to use it later on.

Next add the values with the correct image. Make sure to add a price method using the job service pricing. It can have a price of zero for values.

After you are done adding all your options you will have to go back to the product options and this job service.

The last step is to include the MyImage id to the image tag as follows.

 <img id="MyImage" src="{ProductImageUrl}" class="img-fluid" style="border: 5px solid black;" />

The images in the job services will replace the product image.

The entire bootstrap code can look like the following:

<div class="row" >

    <div class="col-md-6">

        {Description}

         <img id="MyImage" src="{ProductImageUrl}" class="img-fluid" style="border: 5px solid black;" />

    </div>

    <div class="col-md-6" style="text-align:left;padding:0 5 5 5px;">

        {Extras}

        {PreviewPanel} 

        {OrderPanel}

    </div>

</div>