How can I remove product slide arrows on mobile format?

Start a Business

Topic summary

Primary Issue (Post 1):
A user wants to hide product slide navigation arrows specifically on mobile devices. The arrows appear on product image galleries, as shown in an attached screenshot.

Solution Provided:
Another user shared CSS code to hide the arrows by adding a display rule targeting the Flickity carousel buttons to the theme.css file.

Unrelated Follow-up (Post 3):
A different user posted about a separate issue with the Savor Shopify theme. After customizing collection card links in _collection-card.liquid to point to specific products instead of collection pages, mysterious <<< arrow symbols appeared above the cards. The user suspects stray characters or markup errors but hasn’t identified the cause.

Status:
The original mobile arrow question appears answered with a CSS solution. The second issue about the <<< symbols remains unresolved and awaits troubleshooting assistance.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hello, I would like to remove the product slide arrow just on mobile format.

This are the slide arrows:

Captura de pantalla 2022-07-07 a las 17.47.54.png
Captura de pantalla 2022-07-07 a las 17.47.54.png746×1090 343 KB

Website: https://innovamaxx.co/products/pm

Thank you for your help on advance!

2

Hi!

Add this to the bottom of your theme.css file:

button.flickityt4s-button.flickityt4s-prev-next-button.previous, button.flickityt4s-button.flickityt4s-prev-next-button.next {
    display: none;
}
1 Like
3

Hi!

I’m using the Savor Shopify theme.
I recently edited the _collection-card.liquid snippet to make each collection card link directly to a specific product instead of the default collection page.

Here’s what I changed:

  • I replaced the original <a> tag (which contained href="{{ collection.url }}") with a custom Liquid case statement.

  • Each collection title now links to a different product page, for example:

    • Forever Sweatshirts → product URL

    • Forever T-shirts → product URL

    • Forever Caps → product URL

The functionality works correctly — the links go to the right products — but after saving, a few arrow-like symbols (<<<) started appearing on top of the collection cards in the storefront.

I checked for stray characters, Liquid syntax errors, and extra spaces, but the arrows still appear. It seems like some markup or invisible characters might be leaking into the rendered HTML after the edit.

Could you please take a look and help identify what’s causing those <<< symbols to appear, and how to remove them?

Thanks in advance for your help!

Best,
Edmar