I removed the arrows from the slide section, however is did not remove them on mobile version. Help

Shopify Discussion

Topic summary

A Shopify store owner successfully removed slideshow navigation arrows from their desktop view using custom code, but the arrows remain visible on mobile devices.

Problem Details:

  • Arrows with dots still appear in the mobile version despite being hidden on desktop
  • A screenshot was provided showing the persistent mobile navigation elements

Proposed Solutions:
Three different approaches were offered:

  1. theme.liquid modification: Add CSS code above the </body> tag to hide slider controls

  2. base.css media query: Insert a media query targeting screens up to 767px width to hide .slideshow__controls.slider-buttons.no-js-hidden elements

  3. theme.liquid head section: Add CSS in the <head> tag to hide slider button elements specifically on mobile

All solutions involve adding custom CSS code to hide the navigation arrows on mobile devices. The discussion remains open, awaiting confirmation from the original poster on which solution resolved the issue.

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

I removed the arrows from the slide section, however is did not remove them on mobile version.

https://pawprosupply.com/

2

Hi @Rcard , Can you kindly share the details of your problem (screenshot/ link page) with us? We will check it and suggest you a solution if possible.

3

The arrows with dots on the screen. I had a code to remove them from the desktop view however they are still seen on mobile. See photo below

IMG_3928.png
IMG_3928.png1170×2532 352 KB

1 Like
4

Hi @Rcard

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

5

Hi @Rcard

This is Amelia from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.slideshow__controls.slider-buttons.no-js-hidden {

display: none;

}}

Hope that my solution works for you.

Best regards,

Amelia | PageFly

6

Hi @Rcard ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1721874459349.png
BSSCommerceHDL_0-1721874459349.png1919×686 101 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes: