Remove the Add to Cart button from the Collection List

Technical Q&A
,

Topic summary

A Shopify store owner using the Flow Queenstown theme needed to remove the “Add to Cart” button from their collection list pages.

Problem:

  • Multiple CSS attempts failed to hide the button
  • Tried various selectors targeting cart-related elements without success

Solution Provided:
A PageFly representative suggested adding custom CSS to the theme’s theme.min.css file:

.quick-add-wrapper {
  display: none !important;
}

Outcome:

  • The solution successfully removed the button
  • Issue marked as resolved with the original poster confirming it works
Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hello community,

This is Jocoya with Treats for Chickens.

What is the most effective custom CSS code to use in order to remove the Add to Cart button from the Collection List?

Info

Url: https://treatsforchickens.com/

Theme: Flow Queenstown

Page in Question: https://treatsforchickens.myshopify.com/admin/themes/122142654523/editor?previewPath=%2Fcollections

Page in Question CSS:

https://treatsforchickens.myshopify.com/admin/themes/122142654523/editor?previewPath=%2Fcollections&section=template–14518048686138__main&customCss=true

Buttons verbiage are: “Add to cart” and “View options”

Layout style: Preview

Tried using the following CSS codes with no luck.

.collection-list-template .product-grid .quick-add-to-cart-wrapper { display: none !important; }

And

.btn–add-to-cart {

display: none;

visibility: hidden;

}

And

button#AddToCart–collection-list {

display: none;

visibility: hidden;

}

And

button#AddToCart–collections-template {

display: none;

}

And

button#Add-To-Cart–collections-template {

display: none;

}

And

A.btn.btn_add-to-cart {

display: none;

}

And

.collection-template-section .grid-uniform .grid-item form {

display: none!important;

}

And

.product-add_to_cart-submit {

display: none;

}

See the image below

Jocoya_0-1680450668143.png
Jocoya_0-1680450668143.png1897×876 388 KB

Thank you in advance for your assistance.

Jocoya

2

Hi @Jocoya

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets → Theme.min.css

.quick-add-wrapper {
    display: none !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

3

Hi Victor, PageFly!

It works!

Thank you so much for providing the code as well as providing concise instructions.

Jocoya