How can I remove the Quick View icon from mobile view using CSS?

Store Design
, , , ,

Topic summary

A user seeks to remove the Quick View icon from mobile view on their Shopify store’s product pages.

Proposed Solution:
A PageFly representative provides CSS code to hide the Quick View button on mobile devices:

  • Navigate to: Online Store → Theme → Edit Code
  • Locate the theme.css file
  • Add the following media query at the bottom of the file:
@media (max-width: 767px) {
  .product__item-hoverless .quick-view-button.btn.btn--rounded.show-product-quickview button {
    display: none !important;
  }
}

This targets screens 767px wide or smaller (typical mobile breakpoint) and hides the Quick View button using display: none. The solution remains pending confirmation from the original poster.

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

I want to remove the Quick View product icon altogether from mobile view if anyone can assist in targeting that with css!

https://afca7f-2.myshopify.com, pw: outdoors

2

Hi @blakelyhi

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

button.product-item__hoverless-quick-view-button.btn.btn–rounded.show-product-quickview {

display: none !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like