How can I add arrows next to product images in Dawn Theme?

[carla_5]

Hi there

I am using Dawn Theme. And I was wondering how I can add Arrows next to my product images. Please see attached picture.

Thank you.

[sahilsharma9515]

Hi @carla_5 This can be done with custom coding, or you can try to achieve this with the help of 3rd party app, that provide you the same functionality.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

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

Best Regards

Sahil

[carla_5]

Hi there, thank you for your reply. Can you please assist me with the coding. Thank you

[sahilsharma9515]

Hi @carla_5 I can provide you the base code and you need to edit it according to your theme code and needs.

Here is the base code

<div class="arrow prev" onclick="changeImage(-1)">&#10094;</div>

  <!-- Product Images -->
  <div class="product-images-inner">
    <!-- Your existing code to display product images goes here -->
  </div>

  <!-- Right Arrow -->
  <div class="arrow next" onclick="changeImage(1)">&#10095;</div>

<script>
  var currentIndex = 0;
  var images = document.querySelectorAll('.product-images-inner img');
  var totalImages = images.length;

  function changeImage(delta) {
    currentIndex += delta;
    if (currentIndex < 0) {
      currentIndex = totalImages - 1;
    } else if (currentIndex >= totalImages) {
      currentIndex = 0;
    }
    showImage(currentIndex);
  }

  function showImage(index) {
    for (var i = 0; i < totalImages; i++) {
      images[i].style.display = 'none';
    }
    images[index].style.display = 'block';
  }
</script>

Please Note: You need to edit the code according to the theme code so that it will work well.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

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

Best Regards

Sahil

[carla_5]

Thank you so much, I really appreciate it. Can you please assist me with regards to editing the code based on my theme. 

[sahilsharma9515]

Hi @carla_5 I will need the access of the store so that I can look into the code and implement the changes.

Best Regards

Sahil