We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How To Add Arrows In The Product Page Image Slider

How To Add Arrows In The Product Page Image Slider

Dnlgrs
Visitor
2 0 0

Hi, 

 

Is it possible to add arrows on the slider images of the product page? I'm using Refresh Theme. 

 

Something like in the picture below.
 
Thanks 

 

Screenshot 2022-11-14 at 11.05.17.png

 

Replies 7 (7)

AnhTien
Tourist
19 0 0

I think you go up to the code to edit.

EnvyTrendy
Tourist
4 0 0

Hello,

Were you able to figure out which part to place the code?

I'm stuck here as well, having the same issue.

Minakshi15
Shopify Partner
148 6 14

@EnvyTrendy which code are you using for slider ?

If you find my reply helpful, please hit Like and Mark as Solution

Minakshi15
Shopify Partner
148 6 14

@Dnlgrs Please use this js 

$(function(){
  $("#add your id/class here").slick({
    speed: 1000,
    dots: true,
    prevArrow: '<button class="slide-arrow prev-arrow"></button>',
    nextArrow: '<button class="slide-arrow next-arrow"></button>'
  });
});
If you find my reply helpful, please hit Like and Mark as Solution
Dnlgrs
Visitor
2 0 0

Where should I use this?

Minakshi15
Shopify Partner
148 6 14

In your Js file @Dnlgrs 

 

added this into you css 

.product__media-wrapper .slider-mobile-gutter .slider-button{

  display:flex !important;

}
If you find my reply helpful, please hit Like and Mark as Solution
stephenm1
New Member
4 0 0

where do i put the code ?