How to add arrows to featured collection grid on mobile?

Store Design
, ,

Topic summary

A user wants to add navigation arrows to their featured collection grids on mobile devices because some mobile users cannot see that additional products exist to the right.

Current Issue:

  • 5 featured collection grids lack visible navigation on mobile
  • Products extend beyond viewport without clear indication

Proposed Solution:
A PageFly representative suggests:

  • Switch to the Featured Collection Slider section, which includes built-in arrow navigation
  • Override the theme’s CSS that currently hides arrows on mobile devices

CSS Fix Provided:

@media only screen and (max-width: 767px) {
  .carousel__navigation-buttons {
    display: block !important;
  }
}

This code forces the carousel navigation buttons to display on mobile viewports (767px and below). The user is running the Stiletto theme on their Shopify store.

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

Hello!

I have 5 featured collection grids and I want them to have an arrow on the mobile version because on some mobiles we can not see that there is other products to the right. (see the image)

Is it possible to have nices arrows to go to the right and left for the mobile version?

Theme: Stiletto

URL:

https://toroeatstreats.com/collections/all

Question 18.jpg
Question 18.jpg1298×1467 75 KB

2

This is Amelia from PageFly - Landing Page Builder App

After reviewing your theme, I recommend using the Featured Collection Slider section to display your products. This section includes an arrow button for navigation, but I noticed that the arrows are hidden on mobile devices.

@media only screen and (max-width: 767px) {
  .carousel__navigation-buttons {
    display: block !important;
  }
}

Hope that my solution works for you.

Best regards,

Amelia | PageFly