How can I hide arrows on product pages using CSS?

148 6 10

Hi, in all my product pages I have two collections at the bottom of the page. Can you help me with a CSS code that will hide all arrows (the one next to the title too) and only display the scrolling arrow on mobile if there are more than two products and on desktop if there are more than three products. 


Thank you



password: biangu


Reply 1 (1)

Shopify Partner
7720 1502 1505

Hi @MT27 

You can do that by adding this code to your theme.liquid file to remove arrows of into products.

.swiper-button-disabled {
display: none;

Related to arrows next to collection titles, you may check and disable the option View all of featured collection on your product template setting


- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now