Product gallery arrows/navigation (Prestige Theme)

Store Design
1

Is it possible to move the product navigation arrows atop the product gallery, instead of below? (Prestige Theme)

Store link: harminharmin.myshopify.com

Screen Shot 2021-04-07 at 12.37.13 PM.png
Screen Shot 2021-04-07 at 12.37.13 PM.png1432×808 128 KB

Any help coding assistance would be much appreciated!

2

Hello @the_mudd_shop , It would need customization to implement this feature, Unfortunately, there is no simple solution otherwise I will be happy to help you. I would suggest hiring a Shopify expert to assist you OR feel free to contact me. I have done this same customization on Prestige theme for one my client in past. I can share the example with you, do private message me or mail me directly.

3

I know this is old, but if someone still needs to implement this, here is a solution:

  1. In sections/product-template.liquid, find this bit of code:
"prevNextButtons": false,

And change it to:

"prevNextButtons": true,

Then write before {% schema %}, add this bit of code:
  1. Then go to assets/theme.css and on its bottom, add the code:
.Product__Slideshow .flickity-prev-next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.Product__Slideshow .flickity-prev-next-button.previous {
  left:0;
}
.Product__Slideshow .flickity-prev-next-button.next {
  right:0;
}

Good luck
Marcos Watanabe

4

I implemented this, the arrows are working fine however when I click on the back arrow after viewing all the images, the images do not load.

The code you said to implement before the {% schema %} tag, liquid doesn’t allow me to place it before the tag saying inavlid JSON in tag schema.

Thanks,

5

Thank you so much! There is one bug- please help me out here! This works great but the images disappear after the slider reaches its end.

https://www.loom.com/share/5e06806db2094c73a2244aa7e51e0253