Adding CTA on Prominent Image Clickable Card

Search
1

Hello,

Noticed this Yext client leverages image clickable cards with CTA and wanted to ask how we can go about doing that? My initial thought was to update the config.js and template.hbs files but I wasn’t able to figure it out. Any help will be appreciated :slight_smile:

Screen Shot 2021-05-12 at 3.57.19 PM
Screen Shot 2021-05-12 at 3.57.19 PM2030×1206 254 KB

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.

3

Thank you so much Kristy! I will definitely try that instead.