How To Add Arrows In The Product Page Image Slider

Store Design

Topic summary

A user asks how to add navigation arrows to the product page image slider in the Refresh theme, similar to a reference screenshot they provided.

Proposed Solution:

  • One response suggests editing the theme code directly
  • Another provides JavaScript code using a slider plugin (likely slick slider) with configuration for arrows, dots, and speed settings
  • Accompanying CSS code is shared to style the slider buttons with flexbox display

Implementation Questions:

  • Multiple users are unclear about where exactly to place the provided JavaScript and CSS code
  • The discussion remains unresolved, with participants still seeking clarification on file locations and implementation steps
  • No definitive answer has been confirmed as working

Note: The conversation includes code snippets that are central to the proposed solution but lacks clear step-by-step guidance for implementation.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

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
Screenshot 2022-11-14 at 11.05.17.png1118×1320 272 KB

2

I think you go up to the code to edit.

3

@Dnlgrs Please use this js

$(function(){
  $("#add your id/class here").slick({
    speed: 1000,
    dots: true,
    prevArrow: '',
    nextArrow: ''
  });
});
4

Where should I use this?

5

In your Js file @Dnlgrs

added this into you css

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

  display:flex !important;

}
6

Hello,

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

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

7

@EnvyTrendy which code are you using for slider ?

8

where do i put the code ?