Can You Display Arrows On Mobile-Only In Shopify Collections?

Store Design
, ,

Topic summary

A user accidentally hid navigation arrows on their Shopify collection page and wants them visible on mobile only.

Problem identified:

  • Previous/next buttons are hidden via CSS code in theme.liquid or component-slider.css
  • The existing code overrides default settings, making modifications difficult

Solution provided:

  • Locate the CSS code that hides the slider buttons (.slider-buttons, .slider-button--next, .slider-button--prev)
  • The code uses display: content !important within a media query @media screen and (max-width: 749px)
  • Modify this CSS to show arrows on mobile devices
  • Code snippets and screenshots were shared to illustrate the fix

Status: Solution marked as resolved by the original poster.

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

Hi can you please help me display the arrows on mobile version only under the section T-shirts. I think I used CSS code to hide by accident.

page:https://matibrnd.com/products/alexander-the-great-ar-hoodie

code: biangu

Thank you

MT27_0-1711036988058.png
MT27_0-1711036988058.png321×400 39.2 KB

1 Like
2

Hi @MT27

Yes, you have a prev. and next button but you hide it well in the theme.liquid. It over ride already and it would be hard to add another code it would not listen.

What you can do is to find this code in the theme.liquid, component-slider.css or wherever youi paste it before.

This is the code.

Made4uoRibe_0-1711041969441.png
Made4uoRibe_0-1711041969441.png395×229 5.04 KB

And it must be change like this.

@media screen and (max-width: 749px) {
.slider-button--next {
    display: content !important;
}

 .slider-button--prev {
    display: content !important;
}

.slider-buttons {
  position: unset !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like