How can I add arrows to my collection slider for mobile view?

Technical Q&A
,
1

I hope everyone is doing well. I’m currently experiencing an issue with the category slider at the top of the page. The slider contains multiple icons, but the problem arises when viewing it on mobile devices. I would like to display arrows instead of icons in the mobile view, allowing customers to slide through the categories. While the slider itself is functioning correctly on mobile devices, the arrows are not visible.

HamzaTaaj_0-1683679483274.png
HamzaTaaj_0-1683679483274.png2554×411 41.7 KB

Website Link: https://www.docemporium.com/

2

Here’s an example of how you can add left and right arrow icons to the category slider:

@media (max-width: 767px) {
  .category-slider {
    background-image: url('path/to/left-arrow-icon.png'), url('path/to/right-arrow-icon.png');
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: contain;
    /* Adjust the width, height, and other styles as needed */
  }
}

Replace 'path/to/left-arrow-icon.png' and 'path/to/right-arrow-icon.png' with the actual file paths or URLs of your arrow icons. Adjust the CSS properties like background-position, background-size, and other styles as needed to achieve the desired appearance.

Make sure to save the modified CSS and upload it to your theme or use the appropriate method to apply the changes to your Shopify store.

3

I appreciate your response. Could you please clarify if the class .category slider will remain unchanged in my case, or do I need to modify it as well?

4

After implementing the code, I can see the arrows, but they are not functioning properly when clicked.