My arrows are not showing on the desktop and showing on the mobile

Store Design
, , , , ,

Topic summary

A user is experiencing an issue where custom navigation arrows display correctly on mobile but not on desktop for their Shopify product page. Multiple solutions have been proposed involving CSS modifications to the base.css file.

Attempted Solutions:

  • Initial CSS code targeting .slider-buttons display property was provided but didn’t resolve the issue
  • A more comprehensive CSS solution with media queries for different screen widths was then offered, which successfully made the arrows appear on desktop

Current Status:
The discussion remains unresolved. While the latest CSS fix made the arrows visible on desktop, it introduced two new problems:

  • Product thumbnails have disappeared
  • The arrows are not functioning properly (not changing slides like they do on mobile)

The user has requested further assistance to address these secondary issues while maintaining the arrow visibility.

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

Hi,

My custom arrows are not showing on the desktop on product page. And showing and working perfectly on mobile version. Can anyone help me to display the arrows on the desktop as same the mobile version have. Thanks!

Store URL : https://store1.ecomsmartify.shop/products/lahu
Password: 4

2

Hi, @Unknowndev234

Can you take a screenshot to indicate the custom arrow?

3

@Unknowndev234 Please follow the below steps:

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

@media (min-width:768px) {

.slider:not(.slider–everywhere):not(.slider–desktop)+.slider-buttons {
display: block;
}

}

Webcreto || Shopify Partner

WhatsApp: +91 9125530390

For additional discussions, reach out via: Email ID: webcreto@gmail.com

4

Hi @AnneLuo here is the screenshot attached below from my old screenshots.

1arrows.jpg
1arrows.jpg1280Ă—480 60.6 KB

5

Hi I have added this code but still my arrows are not appeared on the desktop version. can you check please. Thanks!

6

Hello @Unknowndev234
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (min-width: 990px) {
.slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
display: block !important;
}
}
@media screen and (min-width: 750px) {
.product--thumbnail_slider .slider-mobile-gutter .slider-button {
display: flex !important;
}
}

result

171.png
171.png1167Ă—792 168 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
7

Hi @GTLOfficial Tahnkyou soo much for providing me the solution. after adding this my arrows are appeared. But my thumbnail got disappeared. can you check again please and my arrows are also not working as the button on mobile changing the slides. Thanks!