A store owner using the Dawn theme wants to temporarily disable clicking on a clothing collection page while still keeping it visible to customers during product development.
Proposed Solutions:
Multiple CSS-based approaches were suggested to disable pointer events:
Target specific collection URL: Add [href="/collections/clothing"] { pointer-events: none; } to prevent clicks on that particular collection link
Disable collection list items: Apply pointer-events: none to .collection-list-wrapper .collection-list .collection__list-item .full-unstyled-link
Disable collection card wrappers: Use .card-wrapper.animate-arrow.collection-card-wrapper { pointer-events: none !important; }
Implementation:
All solutions involve adding custom CSS to the theme’s base.css file via the theme editor (Online Store → Theme → Edit code → Assets).
Important Note:
One responder emphasized creating a visible reminder that this CSS has been applied, making it easier to re-enable the collection later when ready to launch.
I have made a collection page for my 2 types of products, and i am still working on my clothing section and products. So how do i make this section unclickable? I still want the collection there just for customers not be able to click it. I will undo this when i am ready for it to be active. What code can do this?
Theme: Dawn
Website: desire-online.net
Fortunately , at least for modern browsers, you can disable clicking with CSS.
First make a very obvious obnoxious unlosable note somewhere that you have done this.
In the theme editor go to the collection templates and add the following custom-css
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
[href="/collections/clothing"] {
pointer-events: none;
}
FYI: /collections/room-decor has no products in it .
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the base.css file:
.collection-list-wrapper .collection-list .collection-list__item .full-unstyled-link {pointer-events: none;}
Regards,
San
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css
.card-wrapper.animate-arrow.collection-card-wrapper {
pointer-events: none !important;
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly