Product gallery arrows/navigation (Prestige Theme)

themuddshop
Excursionist
16 1 3

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

Any help coding assistance would be much appreciated!

Replies 3 (3)
NerdCurator
Shopify Partner
259 50 85

Hello @themuddshop, 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.

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
marcoswatanabe
Shopify Partner
37 4 9

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:

<script>
  // triggers a resize event once the window is loaded; it refreshes the Flickity slider on resize to solve a buggy behaviour
  window.onload = function(){
    window.dispatchEvent(new Event('resize'));
  }
</script>

 

2. 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 

If my answer was helpful then please Like and Accept Solution :)
If you need help with design, development or marketing your store, talk to one of our experts at https://whymatters.co.uk/
BaberKhan
Tourist
3 0 1

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,