How can I fix transparent overlay arrows in my slideshow?

Store Design

Topic summary

A user is experiencing an issue with slideshow navigation arrows on their product page that have an unwanted white background, affecting both mobile and desktop views.

Problem Details:

  • Navigation arrows display with white backgrounds instead of being transparent
  • Issue appears on the product/collection pages
  • Store URL: brandonthorne.com

Solutions Provided:
Two support representatives offered nearly identical CSS fixes:

  1. Navigate to: Shopify Admin → Online Store → Themes → Edit Code
  2. Open the theme.liquid file from the layout folder
  3. Add custom CSS code just before the </head> tag
  4. The CSS targets .product-section .slide__arrow to remove background and change arrow color
  5. Save changes

Resolution:
The user confirmed the solution worked by thanking the helpers. The issue was resolved through a simple CSS modification to make the arrow backgrounds transparent.

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

Hi, I would like to fix the arrows on the mobile and desktop view of my product page. They currently have a white background which covers the corner of the image. Thanks

Screen Shot 2022-10-25 at 9.18.41 PM.png
Screen Shot 2022-10-25 at 9.18.41 PM.png1918×1265 199 KB

2

I’m Richard Nguyen - CRO Expert at PageFly - Free Landing Page Builder.

Please share with me your store URL and that collection URL - password if password protected. I will give you a solution after review on the page

Hope this can help you solve the issue

Best regards,

Richard

3

Hello @bthorne1 ,

Could you please share your website URL so we can check and let you know the exact solution?

Regards,

CedCommerce

4

https://brandonthorne.com/

5

@Cedcommerce https://brandonthorne.com/ https://brandonthorne.com/collections/new-arrivals

@PageFly-Richard

6

Hi @bthorne1 ,

You can add the below code in the theme.liquid file for removing the background and changing the color:

  • Go to your Shopify admin > Online store > Themes
  • Edit code > Open theme.liquid file from the layout folder
  • Add the below code just before the tag
  • Save the changes

Code:

.product-section .splide__arrow { background: none; color: #fff; }

Hope it resolves your issue. Let us know if you need any further help.

Regards,

CedCommerce

7

hi @bthorne1 you can add this code in theme.liquid

Step1: Online store > Themes > Edit code > theme.liquid

Step2: Find and paste this code above
8

Thank you

9

Thank you!