Search Results Page Elements¶
These elements build the Search Results Page (SRP) - the results grid, its controls, and the filters shoppers use to narrow inventory. They're available on SRP templates. Back to the element index.
Options vs Style
Elements with visual controls split their settings into two tabs: Options (what the element shows or does) and Style (typography, colours, borders, spacing). Elements with no styling show a single options table.
Results & controls¶
All Listings¶
[dms_srp_listings] · SRP - the results grid itself.
| Option | What it does |
|---|---|
| Default SRI | The Search Result Item template used for each result card. |
| Default Ordering Category | Which category results are sorted by initially. |
| Default Order | Ascending or descending to start. |
| Per Page | How many results per page. |
| Infinite Scrolling | Load more results as the shopper scrolls, instead of paged navigation. |
| Show Load Previous Button | Add a "load previous" button (with its own label and alignment). |
| Columns Per Row / Gap | Grid columns and spacing (overrides the SRI template default). |
| Style group | Controls |
|---|---|
| Load Previous Button | Background, Text Colour, Border (normal / hover), Border Radius, Padding |
| Load Previous Typography | Typography |
Pagination¶
[dms_srp_pagination] · SRP - page navigation for the results.
| Option | What it does |
|---|---|
| Pagination Type | The style of pager. |
| Pagination Alignment | Align the pager left, centre, or right. |
| Style group | Controls |
|---|---|
| Typography | Typography |
| Default / Hover / Disabled Button | Background Colour, Width, Height, Border Radius, Typography |
Orderby Dropdown¶
[dms_srp_orderby] · SRP - a sort/order dropdown.
| Option | What it does |
|---|---|
| Orderby Categories | The sort options: each is a Category with Ascending Text and Descending Text labels. |
| Default Order | The order selected by default. |
| Dropdown Alignment | Align the dropdown. |
View Selector¶
[dms_srp_view_selector] · SRP - switch between listing views (e.g. grid vs list), if you offer more than one.
| Option | What it does |
|---|---|
| Selector Alignment | Align the selector. |
| Views | Each view has a Name, Icon, Template, and optional Sidebar ID. |
| Style group | Controls |
|---|---|
| Buttons (normal / hover / active) | Background Colour, Border |
Search Input¶
[dms_srp_search_input] · SRP - a text search box.
| Option | What it does |
|---|---|
| Placeholder | The placeholder text shown in the box. |
| Style group | Controls |
|---|---|
| Input | Height, Typography, Padding, Border Radius, Border |
Matching Terms¶
[dms_srp_matching] · SRP - shows the filters currently applied, as removable pills.
| Option | What it does |
|---|---|
| Reset Filters Button | Show a button that clears all active filters. |
| Hide Matching Terms | Hide the individual term pills. |
| Style group | Controls |
|---|---|
| Container | Background Colour, Typography |
| Active Filter Pill | Background Colour, Pill Typography |
Compare Buttons¶
[dms_srp_compare_buttons] · SRP - comparison controls for the results.
| Option | What it does |
|---|---|
| Inline Buttons | Lay the buttons out inline. |
| Comparison Page | The page the comparison links to. |
| Button Alignment | Align the buttons. |
Filters¶
Most filters share a Category option - the category whose terms shoppers filter by.
Dropdown Filters¶
[dms_srp_dropdown_filters] · SRP - a set of dropdown filters.
| Option | What it does |
|---|---|
| Dropdown Text | Default label shown on each dropdown. |
| No Dropdown Options Text | Text shown when a dropdown has no options. |
| Fullwidth Dropdowns (Desktop / Mobile) | Make dropdowns span the full width. |
| Load All Terms | Load every term up front rather than on demand. |
| Show All Dropdowns (mobile) | Show all dropdowns on mobile instead of collapsing. |
| Categories | Which categories become dropdowns (Custom Dropdowns). |
Checkbox Filters¶
[dms_srp_checkboxes] · SRP - a checkbox list of terms.
| Option | What it does |
|---|---|
| Category | The category to filter by. |
| Number of Columns | Columns the checkbox list uses. Responsive: set a different number for desktop, tablet and mobile. |
| Term Order | Order the terms are listed in. |
| Terms to Show | Limit which terms appear. |
| Style group | Controls |
|---|---|
| List | List Style, List Padding |
| Typography | Label Typography |
Radio Filter¶
[dms_radio_filter] · SRP - a single-select list of terms.
| Option | What it does |
|---|---|
| Category | The category to filter by. |
| Show "All" Option + "All" Option Label | Add an "all / any" choice with a custom label. |
| Show Term Counts | Show how many listings match each term. |
| Direction / Gap / Alignment / Equal Width Items | Layout of the options. |
| Show Radio Indicator | Show the radio dot beside each option. |
| Style group | Controls |
|---|---|
| Container | Background, Border, Border Radius, Padding, Box Shadow |
| Item (normal / selected / hover) | Background, Border, Border Radius, Padding, Box Shadow |
| Typography (normal / selected / hover) | Text Alignment, Typography |
Color Filter¶
[dms_color_filter] · SRP - colour swatches to filter by a colour term.
| Option | What it does |
|---|---|
| Category | The colour category to filter by. |
| Display Mode | How the swatches are presented. |
| Multi-Select | Allow selecting more than one colour. |
| Show "All" Option + "All" Label | Add an "all" choice. |
| Show Term Counts + Count Position | Show and position match counts. |
| Swatch Shape / Size / Direction / Gap / Alignment | Layout of the swatches. |
| Style group | Controls |
|---|---|
| Swatch (normal / selected) | Border, Box Shadow |
| Typography | Label Typography, Count Typography |
Image Filter¶
[dms_image_filter] · SRP - filterable term image boxes (uses the term images set on a category).
| Option | What it does |
|---|---|
| Category | The category whose term images are shown. |
| Terms Per Row / Gap | Grid layout. |
| Responsive Columns | Column counts at set screen widths. |
| Style group | Controls |
|---|---|
| Box (normal / selected / hover) | Background, Border, Border Radius, Box Shadow, Padding |
| Term Typography | Text Alignment, Label Typography (normal / selected / hover) |
Range Filter¶
[dms_range_filter] · SRP, Form - a min/max range slider (e.g. price, year, mileage).
| Option | What it does |
|---|---|
| Category | The numeric category to filter by. |
| Increment | Step size of the slider. |
| Min Value / Max Value | The range bounds. |
| Disable Inputs | Hide the manual min/max input boxes. |
| Show Category Label | Show the category's label above the slider. |
| Show Histogram | Show a distribution histogram behind the slider. |
| Style group | Controls |
|---|---|
| Handle | Width, Height, Vertical Position, Border Radius, Border, Background, Inset Lines Colour |
| Bar | Height, Background, Border |
| Text | Typography |
| Histogram | Active/Inactive Bar Colour, Height, Bar Gap |
Term Toggle¶
[dms_term_toggle] · SRP - an on/off toggle for a term.
| Option | What it does |
|---|---|
| Category | The category the term belongs to. |
| Terms | The term(s) the toggle switches on. |
| Alignment | Align the toggle. |
| Hide Label | Hide the toggle's label. |
| Style group | Controls |
|---|---|
| Toggle | Circle Colour, Off Colour, On Colour |
| Label | Typography |
Reset Button¶
[dms_reset_button] · SRP - clears the active filters.
| Option | What it does |
|---|---|
| Text | The button label. |
| Fullwidth Button | Make the button span the full width. |
| Text Alignment | Align the label. |
| Icon (+ colour, size) | An optional icon. |
| Style group | Controls |
|---|---|
| Button | Typography, Background, Border, Border Radius, Padding |
| Hover | Background, Border, Border Radius, Typography |
Back to the element index.