How to Replace Product Gallery Arrows in radiant theme?

Store Design
, , , , ,

Topic summary

A user working with Shopify’s Radiant theme wants to modify the product image carousel navigation.

Current issue:

  • Small arrows and image counter (e.g., “1/9”) appear at the bottom of the product gallery
  • User finds this layout less visible and user-friendly

Desired outcome:

  • Hide the bottom arrows and counter
  • Display transparent left/right navigation arrows overlaid directly on the product images (similar to fullscreen slider style)
  • Reduce empty space after hiding original arrows

Solution provided:
A CSS snippet was shared to reposition existing navigation arrows:

  • Uses .product .slider-buttons to reposition arrows across the full width and overlay them on the image
  • Hides the counter using .product .slider-counter { display: none; }
  • Adjusts spacing with negative margin and padding values

The discussion appears resolved with a working CSS-based solution, though implementation confirmation is pending.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello Shopify store partners, experts, owners and other users of this platform, hope you are doing well.

I’m currently working on customizing the product image carousel on my store (using the Radiant theme), and I’m looking to adjust the arrow navigation style.

Here’s what I’d like to do:

Hide the small arrows and the image counter currently shown at the bottom of the product gallery (e.g., “1/9”) in the image below.

IMG-20250418-WA0001.jpg
IMG-20250418-WA0001.jpg540×1206 37.2 KB

I want to Show left and right navigation arrows that appear directly over the product image—similar to a fullscreen slider and transparent as shown in the other image—so they’re more visible and user-friendly as well as decrease the empty space left after hiding arrows.

Same like this or similar:

IMG-20250418-WA0000.jpg
IMG-20250418-WA0000.jpg540×1206 67.9 KB

If anyone has done something similar or can point me in the right direction (especially with the CSS or Liquid changes needed), I’d really appreciate your help!

Thanks in advance!

2

You can use the navigation arrows you have already and just reposition them. This should make it look similar to the example you provided.

Try adding the following css:

.product .slider-buttons {
width: 100%;
margin-top: -60vw;
padding-bottom: 60vw;
justify-content: space-between;
}

.product .slider-counter {
display: none;
}
1 Like