Instant Search
All of Sledge's themes use of several kinds of classes. To assist you in customizing CSS to your needs, the most frequently used element selectors and classes are listed below.
Search Field
| Class | Description |
|---|---|
| sledge-instant-search__widget-search-form-wrapper | Search field wrapper |
| sledge-instant-search__widget-search-form-result | Search field form result |
| sledge__scroll-area-root | Search field scroll area |
| sledge__scroll-area-viewport | Search field viewport area |
| sledge-instant-search__widget-search-form-result-flex-item-other | Search field item wrapper (except product items) |
| sledge-instant-search__icon-widget-search-form-result-title | Search field item title |
| sledge-instant-search__icon-widget-search-form-result-list | Search field item list |
| sledge-instant-search__icon-widget-search-form-result-list-link | Search field item list link |
| sledge-instant-search__icon-widget-search-form-result-item-disabled | Search field item list (if No items were found) |
| sledge-instant-search__widget-search-form-result-flex-item-product | Search field item wrapper (only products item) |
| sledge-instant-search__widget-search-form-result-title-product | Search field product item title |
| sledge-instant-search__widget-search-form-result-product | Search field product wrapper |
For Search Input Field, you can check out
here.
For Product Card, you can check out
here.
Search Icon Popup
| Class | Description |
|---|---|
| sledge-instant-search__icon-widget-search-form-result | Search wrapper |
| sledge__scroll-area-root | Search scroll area |
| sledge__scroll-area-viewport | Search viewport area |
| sledge-instant-search__icon-widget-search-form-result-wrapper | Search form wrapper |
| sledge-instant-search__icon-widget-search-form-result-flex-item-other | Search item wrapper (except product items) |
| sledge-instant-search__icon-widget-search-form-result-title | Search item title |
| sledge-instant-search__icon-widget-search-form-result-list | Search item list |
| sledge-instant-search__icon-widget-search-form-result-list-link | Search item list link |
| sledge-instant-search__icon-widget-search-form-result-list-link-suggestion | Suggestions list link |
| sledge-instant-search__icon-widget-search-form-result-flex-item-product | Search item wrapper (only products item) |
| sledge-instant-search__icon-widget-search-form-result-product | Product card wrapper |
| sledge-instant-search__widget-button-more-wrapper | View More Result button wrapper |
| sledge-instant-search__icon-widget-button-more | View More Result button |
For Search Input Field, you can check out
here.
For Product Card, you can check out
here.
Using Selector
| Selector | Description |
|---|---|
| .sledge-instant-search__icon-widget-search-form-result-list-link-suggestion ,sledge-icon__search | Search icon on suggestions section |
Search Result
| Class | Description |
|---|---|
| sledge-instant-search__result-container | Search result wrapper |
For Search Input Field, you can check out
here.
For Product Card, you can check out
here.
For Pagination component, you can check out
here.
Tab Index
| Class | Description |
|---|---|
| sledge-instant-search__result-tab | Search result tab wrapper |
| sledge-instant-search__result-tab-list-item-active | Search result item active class |
| sledge-instant-search__result-tab-total | Search result item total |
Using Selector
| Selector | Description |
|---|---|
| .sledge-instant-search__result-tab-list li::before | Border line on bottom when item is active or hovered |
Filter Horizontal
| Class | Description |
|---|---|
| sledge-instant-search__result-filter-horizontal-wrapper | Filter wrapper |
| sledge-instant-search__result-filter-horizontal-refine-item-clear-all | Clear all button |
| sledge-instant-search__result-filter-item-refine-selected | Selected filters wrapper |
| sledge-instant-search__result-filter-item-title-refine-list | Selected filters text |
| sledge-instant-search__result-filter-item-refine-title-clear | Selected filters clear icon |
| sledge-instant-search__filter-horizontal-facet-content | Popover wrapper |
| sledge-instant-search__result-filter-item-list | Popover items wrapper |
Using Selector
| Selector | Description |
|---|---|
| .sledge-instant-search__result-filter-horizontal-wrapper .sledge__button | Filter button |
| .sledge-instant-search__result-filter-horizontal-wrapper .sledge__button .sledge-icon__arrow-down | Arrow down icon |
| .sledge-instant-search__result-filter-horizontal-facet .sledge__checkbox-wrapper | Popover items checkbox wrapper |
| .sledge-instant-search__result-filter-horizontal-facet .sledge__checkbox-root | checkbox input |
| .sledge-instant-search__result-filter-horizontal-facet .sledge__checkbox-label | checkbox label |
Filter Vertical
| Class | Description |
|---|---|
| sledge-instant-search__result-filter | Filter wrapper |
| sledge-instant-search__result-filter-item-title-refine | Filter title |
| sledge-instant-search__result-filter-horizontal-refine-item-clear-all | Clear all button |
| sledge-instant-search__result-filter-item-refine-selected | Selected filters wrapper |
| sledge-instant-search__result-filter-item-title-refine-list | Selected filters text |
| sledge-instant-search__result-filter-item-refine-title-clear | Selected filters clear icon |
| sledge-instant-search__result-filter-item | Filter items wrapper |
| sledge-instant-search__result-filter-item-title | Filter items title |
| sledge-instant-search__result-filter-item-list | Filter items list |
| sledge-instant-search__result-filter-item-list-slider | Filter slider wrapper |
| sledge-instant-search__result-filter-item-color-swatches | Filter color swatches container |
You can edit Title of Filters text with Using Backend in Title of Filters section, check out
here.
You can edit Options of Filter text with Using Backend in Options of Filter section, check out
here.
You can edit Filter Button with Using Backend in Filter Button section,
check out here.
Using Selector
| Selector | Description |
|---|---|
| .sledge-instant-search__result-filter-item .sledge-icon__arrow-down | Arrow down icon |
| .sledge-instant-search__result-filter-item-list .sledge__checkbox-wrapper | checkbox and label wrapper |
| .sledge-instant-search__result-filter-item-list .sledge__checkbox-root | checkbox input |
| .sledge-instant-search__result-filter-item-list .sledge__checkbox-label | checkbox label |
| .sledge-instant-search__result-filter-item-list .sledge__checkbox-label | checkbox label |
| .sledge-instant-search__result-filter-item-list-slider .sledge__SliderRoot | Filter slider |
| .sledge-instant-search__result-filter-item-list-slider .sledge-instant-search__result-filter-minmax-field | Filter slider min max text |
| .sledge-instant-search__result-filter-item-color-swatches .sledge__color-swatch-root | Filter color swatches button |
Collection Card
| Class | Description |
|---|---|
| sledge-instant-search__result-data-summary-text | Total data found |
| sledge__collection-grid-card | Collection card |
| sledge__collection-grid-card-image | Collection card image |
| sledge__collection-grid-card-content-title | Collection card title |
| sledge__collection-grid-card-content-description | Collection card description |
For Pagination component, you can check out
here.
Page Card
| Class | Description |
|---|---|
| sledge-instant-search__result-data-summary-text | Total data found |
| sledge__page-grid-card | Page card |
| sledge__page-grid-card-image | Page card image |
| sledge__page-grid-card-content-title | Page card title |
| sledge__page-grid-card-content-description | Page card description |
For Pagination component, you can check out
here.
Blog Card
| Class | Description |
|---|---|
| sledge-instant-search__result-data-summary-text | Total data found |
| sledge__blog-grid-card | Blog card |
| sledge__blog-grid-card-image | Blog card image |
| sledge__blog-grid-card-content-title | Blog card title |
| sledge__blog-grid-badge-vendor | Blog card date |
| sledge__blog-grid-button-wrapper | View Blog Button wrapper |
For Pagination component, you can check out
here.
Using Selector
| Selector | Description |
|---|---|
| .sledge__blog-grid-button-wrapper .sledge__button | View blog button |
| .sledge__blog-grid-button-wrapper .sledge__button .sledge-icon__note | View blog button icon |
Article Card
| Class | Description |
|---|---|
| sledge-instant-search__result-data-summary-text | Total data found |
| sledge__article-grid-card | Article card |
| sledge__article-grid-card-image | Article card image |
| sledge__article-grid-card-content-title | Article card title |
| sledge__article-grid-badge-vendor | Article card date |
| sledge__article-grid-button-wrapper | View Blog Button wrapper |
For Pagination component, you can check out
here.
Using Selector
| Selector | Description |
|---|---|
| .sledge__article-grid-button-wrapper .sledge__button | View Article button |
| .sledge__article-grid-button-wrapper .sledge__button .sledge-icon__note | View Article button icon |