How can I make a collection unclickable on my Dawn themed website?

How can I make a collection unclickable on my Dawn themed website?

jakegrieveson
Explorer
123 0 16

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

Screenshot (91).png

Replies 3 (3)

PaulNewton
Shopify Partner
6350 582 1356

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 .

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


INA_MSWEB
Shopify Partner
1228 142 156

Hi @jakegrieveson 


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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

PageFly-Richard
Shopify Partner
4400 1006 1657

Hi @jakegrieveson 

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.