How can I modify product images with a click button for customer orders?

Technical Q&A
1

Hey, I’m trying to create code for a button which changes the product image when clicked. The changed image needs to be passed on with the order if the customer so chooses. I currently have trouble accessing and modifying the product images in the code.

2

Hello, thanks for the quick reply. The theme is Dawn. Good to know that the modified image should find its way to the cart, too. I would appreciate the more specific answer regarding the location of the code for modifying the product images.

3
  1. Write the JavaScript code: In your JavaScript file or tag, write the code to handle the image swapping functionality. Here’s an example:
$(document).ready(function() {
  // Store the original product image URL
  var originalImageURL = '{{ product.featured_image | img_url: 'master' }}';

  // Handle button click event
  $('#imageSwapButton').on('click', function() {
    // Get the new image URL to be swapped
    var newImageURL = 'path_to_new_image.jpg'; // Replace with your desired new image URL

    // Change the product image source
    $('.product__image img').attr('src', newImageURL);
  });

  // Handle form submission to pass the chosen image with the order
  $('form').on('submit', function() {
    // Get the current product image URL
    var currentImageURL = $('.product__image img').attr('src');

    // Attach the chosen image URL to a hidden input field
    $('').attr({
      type: 'hidden',
      name: 'chosen_image',
      value: currentImageURL
    }).appendTo('form');

    // Continue with form submission
    return true;
  });
});
​
4

Hi,

Thanks for the code. The problem is that my theme, Dawn, has separate files that handle the product images and I don’t know which part I should start investigating and editing.