Step 3: Add the Promotion Vertical to the Search Frontend

  1. Navigate to your Search frontend (Pages > Your Site). In your Pages code, add the following to your index.json file under the to verticalsToConfig object after “Universal”:

    "promotions": { // The vertical key from your search configuration
      "label": "", // The name of the vertical in the section header and the navigation bar
      "hideInNavigation": true, // hides navbar tab
      "universalLimit": 1, // ensures only one result
      "cardType": "promo-card" // forked card name
    }
  2. Fork a promo card from the card/standard template card folder. Name it “promo-card” per the above cardType configuration. Style it however you want!

  3. In the answers.scss file, hide the navigation bar and view all section for this vertical.

    .HitchhikerResultsStandard--promotions {
      .HitchhikerResultsStandard-title {
        display:none;
      }
      .HitchhikerResultsStandard-viewMore {
        display:none;
      }
        border-top: var(--yxt-border-default);
    }
  4. Optionally, add a light background brand color to highlight the promo cards. Add this to your answers.scss file:

    .HitchhikerStandard.promo-card{
      background-color: #bfe8f8;
    }

The result should look something like this:

Mt. Sanai Banner Example

Pizza Banner Example

Feedback