Custom Facets and Sorting Code Examples | Yext Hitchhikers Platform

Squaring Off Filter Button

Add the following to the answers.scss file:

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

Filter Button Color

Add the following to the answers.scss file:

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

To have SortOptions and Facets appear next to each other, add a div that wraps the sorting and facets components in the [[vertical]].html.hbs file. In the example below, the new div is called Answers-searchOptions:

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

Then format it using display: flex in the answers.scss file:

CopyCopied!
&-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 >

Squaring Off Filter Button

Filter Button Color

Custom Facets and Sorting Code Examples | Yext Hitchhikers Platform

Squaring Off Filter Button

Filter Button Color

SortOptions and Facets Side-by-Side