How can I hide navigation arrows on sliders except for the product page?

Store Design
,
1

Hey guys, I need some help with CSS code.

What happened:

I wanted to hide the navigation arrows on sliders from home page, which I did sucessfully, however I also disable them on a product page gallery slider. Is there a way to hide navigation everywhere except product page.

Initial code to hide all navigation:

.slider-buttons {
                display: none !important;
 }

I tried to select class id of the product page gallery:

#MediaGallery-template--15961445400730__main .slider-buttons {
                display: visible !important;
 }

It didn’t work :disappointed_face:

Thanks

2

@dmitry_z

Please share your store URL!

Thanks!

3

Hello @dmitry_z ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1669340280001.png
GemPages_0-1669340280001.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before 
{% unless template contains 'product' %}

{% endunless %}

GemPages_1-1669340438495.png
GemPages_1-1669340438495.png1615×844 39.5 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
4

Thank you so much, again!!! We love GemPages!

5

I am glad that my recommendation is helpful to you :grin: .