Arrows on the main image on a product page

[MosheKapetas]

Hi community! hope everyone is well.

I need help with the design of my product page, I would like to add arrows on the main image so the user knows there are more images to see on this product.

What do you think?

Is it necessary?

And how do I do it?

I realized that I need to change the code and I don’t really understand codes

I would love to hear from you

thanks and all the best

Moshe

[EBOOST]

Hi @MosheKapetas ,

If you use “Dawn” theme. May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/section-main-product.css
3. Add code below to end of file

@media screen and (min-width: 750px) {

  .product--thumbnail .product__media-item:not(.is-active),
  .product--thumbnail_slider .product__media-item:not(.is-active) {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .product-media-modal__content > .product__media-item--variant.product__media-item--variant {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  media-gallery [id^="GalleryViewer"] .slider + .slider-buttons {
    display: flex!important;
  }
   media-gallery [id^="GalleryViewer"]{
     position: relative;
   }
   media-gallery [id^="GalleryViewer"] .slider-buttons button {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: 0;
     z-index: 2;
   }
   media-gallery [id^="GalleryViewer"] .slider-buttons button.slider-button--next{
    right: 0; 
    left: auto;
  }
  media-gallery [id^="GalleryViewer"] .slider-buttons .icon {
    height: 1.6rem;
  }
}

4. Snippets/product-media-gallery.liquid

5. add “slider–tablet-up” class. You can refer the screenshot below to add this class