Changing CTAs to Side by Side Layout and Hiding Vertical from Navigation

Search Best Practices - Search Front-End
1

Hello,

  1. How do I get the Services CTA to be in a row instead of a column? I tried below and it didn’t work
    .HitchhikerProductProminentImage-ctasWrapper {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    }

  2. How do I hide the links tab in the nav? I still want links to surface as results but the client didn’t want the user to search in the links vertical

Thanks,
Carl

image
image874×859 224 KB

2

Hi Carl,

For your first question, you just need to set the display property display: flex for this to work. I would recommend you test this on mobile though, and make sure it’s appearing as desired. You might want to make sure the CTAs are flex-direction: column on smaller breakpoints.

On the second question, do you want to only surface links on Universal results and remove the Links page entirely, or just hide it from the nav bar on universal and leave the links vertical page accessible?

Option 1
Remove your links.html.hbs and links.json files, and place the configuration for your links vertical in your index.json file, under verticalsToConfig.

    "links": { // The vertical key from your search configuration
      // "label": "", // The name of the vertical in the section header and the navigation bar
      // "verticalLimit": 15, // The result count limit for vertical search
      // "universalLimit": 5, // The result count limit for universal search
      "cardType": "link-standard", // The name of the card to use - e.g. accordion, location, customcard 
      "icon": "link", // The icon to use on the card for this vertical
      "universalSectionTemplate": "standard"
    }

image
image2096×1382 271 KB

You likely would also want to hide the View All button in the Links vertical, so that users aren’t directed to a dead page. You can use the following css as an example.

.HitchhikerResultsStandard--links .HitchhikerResultsStandard-viewMore {
    display: none;
}

Impact: Links would only show in Universal search, and there would be no vertical page for Links.

Option 2
Keep your links.html.hbs and links.json files to maintain the page for the Links vertical. Add the following object to your index.json file.

  "excludedVerticals": [
    "links"
 ]

image
image2108×1302 233 KB

Impact: This will hide the Links tab in the navigation bar, but users will still be able to navigate to view more than 10 links in the vertical by clicking “View More”

1 Like