Moving CTAs Between "Subtitle" & "Details" Fields on Product-Standard Card

Search
1

Hi!

I had a client ask me if it is possible to “have the subtitle text above the CTA buttons below, and then the longer description text below that?”

See image of how it is currently configured below:

Screen Shot 2020-11-19 at 11.14.00 AM

Essentially, they would like to make the CTAs aligned horizontally and have them appear in between the Subtitle and Details/Description Text.

Is it possible to configure the card in this way? Thanks for your help!

2

Hey Chris-

You will need to edit both the results card template and answers.scss file to get this result. Here are the steps:

1. Move the CTAs above the details section in template.hbs for the card you want to edit. It should look something like this:

<div class="HitchhikerProductStandard {{cardName}}">
  {{> image }}
  <div class="HitchhikerProductStandard-body">
    {{> title }}
    {{> subtitle }}
    <div class="HitchhikerProductStandard-contentWrapper">
      {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}}
      <div class="HitchhikerProductStandard-ctasWrapper">
        {{#with card.CTA1}}
        {{> CTA ctaName="primaryCTA" }}
        {{/with}}
        {{#with card.CTA2}}
        {{> CTA ctaName="secondaryCTA" }}
        {{/with}}
      </div>
      {{/if}}
      {{> details }}
    </div>
  </div>
</div>

2. Wrap the details and CTAs so they are stacked on top of each other rather than side by side by adding the following to the answers.scss file:

.HitchhikerProductStandard-contentWrapper {
    flex-direction: column;
  }

3. Edit the CTA objects so they appear side-by-side by editing the answers.scss file:

.HitchhikerProductStandard-primaryCTA, .HitchhikerProductStandard-secondaryCTA {
    display: inline-block;
  }

You may need to play around with the padding and margins for these objects to get the desired appearance you want, but this is what it will look like:

image

1 Like