Arrow not showing in Fabric theme

Store Design
1

When i use the product list in craousel the scroll arrows dosent appear on desktop. Somehow i tried increasing the gaps i saw the arrowes are under the products thats why they are not showing what can i do?

https://thenewbeast.myshopify.com/

000

2

Your carousel arrows are hidden because they’re placed under the product items due to CSS layering issues.
Add custom CSS like z-index: 10 and position: absolute to the arrow container to bring them above.
Also ensure your theme’s carousel settings have arrows enabled and properly positioned.

3

Hello @NOT1

It sounds like the scroll arrows are being hidden behind the product cards due to a z-index or positioning issue. Here’s how you can fix it:

  1. Inspect the arrows using your browser’s developer tools to find their class (usually something like .slider-button or .carousel__arrow).

  2. Then, try adding this custom CSS to bring them above the product cards:

.carousel__arrow {
  z-index: 10 !important;
  position: relative;
}

If they’re still not showing properly, you might also need to adjust margins or padding around the carousel:

.product-carousel {
  padding: 0 40px; /* Add horizontal padding so arrows have space */
  position: relative;
}

And if the arrows are inside another container with overflow: hidden, try this:

.carousel-container {
  overflow: visible !important;
}

Let me know if you have any issues!

1 Like
4

None of them worked

5

Can you share any screenshot with us, so we can check.