Custom Facets and Sorting Code Examples | Yext Hitchhikers Platform

Squaring Off Filter Button

  .yxt-FilterOptions-optionLabel:before {
    border-radius: 0;
}

Filter Button Color

.yxt-FilterOptions-optionLabel:after {
    border-right: .0625rem solid var(--yxt-color-brand-primary);
    border-bottom: .0625rem solid var(--yxt-color-brand-primary);
  }

To have SortOptions and Facets eappear next to each other, you can add a div that wraps the sorting and facets components in your ‘[[vertical]].html.hbs’ file and. For example I’ve called it Answers-searchOptions in the example below:

<div class="Answers-resultsWrapper">
        <div class="Answers-resultsColumn">
          {{> templates/vertical-map/markup/spellcheck }}
          <div class="Answers-searchOptions">
            {{> templates/vertical-map/markup/sortoptions }} --}}
            {{> templates/vertical-map/markup/facets }}
          </div>

Then you need to format it using display:flex. If you are using the Code Editor, you would add this to the answers.scss file:

&-searchOptions {
    display: flex;
  }

You’ll probably want to tweak the padding on the components so they’re more aligned, and you can use width or flex-basis to make the components take up different amounts of space if you want.

Back

< Custom Background Code Examples

Custom Results Page Code Examples >

Feedback

<% elem.innerText %>

Custom Facets and Sorting Code Examples | Yext Hitchhikers Platform

Squaring Off Filter Button

Filter Button Color

SortOptions and Facets Side-by-Side