Product Image Scrolling

Store Design
, , ,
1

Hi there

I am looking to add arrows on product page main images on desktop site (already have swiping on mobile site) which enables customer to scroll through pictures (next, previous etc)

I am using Dawn theme 15.3.0.

Thankyou

IMG_0670
IMG_06701091×602 120 KB

3

Hi @EternitySparkles

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Try this solution – Add main image slider in prdocut page - #10 by tim_tairli

5

Hey @EternitySparkles Welcome to Shopify Community can you please share the Website URL

6

Hey @EternitySparkles , Thanks for sharing the screeenshot
this can definitely be added to the product page in Dawn 15.3.0.1

  1. Add arrow Button
    Open section/main-product.liquid and find the products media gallery. Add the following button inside the gallery container
<button class="product-gallery-arrow prev-arrow" aria-label="Previous image">
  &#10094;
</button>

<button class="product-gallery-arrow next-arrow" aria-label="Next image">
  &#10095;
</button>
  1. Add CSS
    Add this to assets/base.css or theme.liquid above 
.product-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 2px solid #d9534f;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  z-index: 5;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prev-arrow {
  left: 15px;
}

.next-arrow {
  right: 15px;
}

@media screen and (max-width: 749px) {
  .product-gallery-arrow {
    display: none;
  }
}
  1. Add JavaScript
    Add this before the closing tag in theme.liquid or in a custom JS file:
document.addEventListener('DOMContentLoaded', () => {
  const slider = document.querySelector('.product__media-list');
  const prevBtn = document.querySelector('.prev-arrow');
  const nextBtn = document.querySelector('.next-arrow');

  if (!slider || !prevBtn || !nextBtn) return;

  nextBtn.addEventListener('click', () => {
    slider.scrollBy({
      left: slider.clientWidth,
      behavior: 'smooth'
    });
  });

  prevBtn.addEventListener('click', () => {
    slider.scrollBy({
      left: -slider.clientWidth,
      behavior: 'smooth'
    });
  });
});

Thanks,
Rajat

7

Hi @EternitySparkles . Hope you are doing well.

First thing to do is to add te product slider, you can get it from the smart product slider from the app store. In this way you cannot do any coding.

Otherwise you should first look at the Online Store then go to Customize and then go to the Product Page. You might find that Dawn already has a setting for a media viewer, in that section.

If this was helpful, then don’t forget to like it and Mark as Solution.