Adding CTA on Prominent Image Clickable Card

Search
2

Hi Sarah,

The client in the screenshot you provided actually uses the built-in product prominent image card, no the clickable card. Only the title and CTAs are clickable and you can use the card how you normally would - the CTAs are built in. One unique thing they do is add a box shadow when you hover over the card so it looks like the entire card is clickable. To do this, you can add the following to your answers.scss file. Feel free to adjust the transition effect, as well as the thickness and color of the box shadow.

. HitchhikerProductProminentImage {
  transition: box-shadow .3s;

  &:hover {
    box-shadow: 0 0 11px rgba(33,33,33,.2); 
  }
}

This would give the following effect on hover (check out the right most product):

image
image2118×1228 237 KB

To your question about how to add a CTA to the product prominent image clickable card - since the whole card is clickable, you are not able to add a separate CTA.