Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Disable clickable link on PDP

Disable clickable link on PDP

Tanvi5
Visitor
1 0 0

Hi, I am currently using the Sense theme on shopify and I want to feature a collection that can't be clicked on (only name, image, and price is available). How do I remove the link underneath the PDP so that customers can't click on it?

Reply 1 (1)

AcidPi
Shopify Partner
61 14 16

Hi,

Without editing any liquid files you can do it this way...

Theme Editor > Home page
Template > Add section > Custom Liquid
Click Custom Liquid

Set Custom Liquid Section Padding to 0px for Top and Bottom
Add the following Script to Liquid Code

Save

 

<script>
var link = document.getElementsByClassName('full-unstyled-link');
for (var i = 0; i < link.length; ++i) {
    var link_item = link[i];  
    link_item.addEventListener('click', function(event) {
    event.preventDefault();
    });
}
</script>

 

Click Featured Collection
Add the following CSS to Custom CSS

Save

 

.full-unstyled-link {
  color: currentColor !important;
  cursor: default !important;
  text-decoration: none !important;
}

 

Note: If you add more sections to home page that use the class full-unstyled-link they could also be disabled...

Should also go on record saying that a link that doesn't link is just text and this should probably be done by changing the anchor to something else via the Liquid file in-use on the home page for featured collection. I'm sure someone will suggest that change 🙂

Regards