I would like to make the entire element clickable

[SantosBaez]

Hello!

I'm using PageFly for my landing page and would like to make an entire element clickable. I have three product cards that only the text is clickable. How can I make the entire element/card clickable?

The page URL is coffeeinboxes.com

Any help is appreciated, thanks!  

[namphan · Accepted solution]

Hi @SantosBaez,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

h3.sc-jlGhtx.sc-fscnvs.eUrsGH.hLuCZM.pf-27_.pf-heading-1-h3:after {
    content: '';
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

[SantosBaez]

Awesome, thanks so much!

Can we do this for mobile as well? I duplicated the element for mobile (only visible on mobile) because I need to make some edit designs specific to mobile.

The one we edited is only visible on desktop.

Thanks!

[namphan]

Hi @SantosBaez,

Please add code:

@media (max-width: 767.5px) {
    h3.sc-jlGhtx.sc-fscnvs.eUrsGH.hLuCZM.pf-399_.pf-heading-1-h3:after {
    content: "";
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
}

[SantosBaez]

Awesome, this worked! Thanks again!!

[SantosBaez]

Hello! I'm made some slight changes in PageFly and the code stopped working on both desktop and mobile view. Did the class name change with the edits I made? If you don't mind looking into it I would greatly appreciate it!

I also made a copy of the element in a separate page (for both desktop and mobile) . Could we also make the entire card clickable? The URL is https://coffeeinboxes.com/pages/coffee-boxes

Thanks so much!

[BSSCommerce-B2B]

@SantosBaez ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.pf-slide h3[data-product-type="title"]:after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0!important;
}
<style>

[PaulNewton]

You either need to actually modify the template to have an anchor tag, it's html or use some CSS kludge to position it absolutely:

[data-pf-type="Column"] h3[data-product-type="title"] {
  line-height: 758px;
  position: absolute;
  top: 2px;
  bottom: -18px;
  left: 0;
  right: 0;
  align-self: end;
}

The problem is making the clickable text element cover the card makes the actual text go to the head of the card.

So you have to push it down using line-height.

Of course the real problem is the product cards use an H3 heading element as a fake link instead of using an actual anchor tag.

[PaulNewton]

If possible because this a theme integration and-or you can't edit the css in pagefly directly...

, try to use a custom css setting instead of having to directly edit theme code limiting the change of breaking files.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css