Bootstrap5 Search Documentation

A simple site search for your MPSS1 Bootstrap5 site.

Templates

This package includes the following templates:

  • /marketpath/bs5-search/SearchPage.liquid
    • The main search page template.
  • /marketpath/bs5-search/_search_results.liquid
    • The template used to displaying the items returned by the search.
  • /marketpath/bs5-search/_search_result.liquid
    • The default template used to display each item returned by the search.
  • /marketpath/bs5-search/_search_form.minimal.liquid
    • The template used for displaying the minimal search form - useful for including in your site header.
  • /marketpath/bs5-search/_search_form.full.liquid
    • The template used for the displaying the full search form (eg: on the search page)
  • /marketpath/bs5-search/overrides/_search_config.liquid
    • Used for configuring the rest of the search components. Edit as you see fit.

Additionally, it also includes a simple search page using your site's header, footer, and styling (look for the "Search" page after installing this package).

Configure

You can override the default configuration options by modifying the /marketpath/bs5-search/overrides/_search_config.liquid template. The following variables change the way the search templates work:

  • search_param
    • The parameter to use for the search term (eg: /search?search_param=searchterm)
  • page_param
    • The parameter to use for pagination (eg: /search?page_param=2)
  • limit_param
    • The parameter to use for the number of results to display per page (eg: /search?limit_param=25)
  • search_page
    • The location of the search page. If you would like to customize the location of the search page, you have multiple searches, or if you have a multi-domain site then you will want to edit this.
  • search_item_template
    • The template to use for displaying each item in your search results. See more about this below.
  • search_item_preset
    • The image preset to use for displaying the images in your search results. Only applicable if you use the default search_item_template or if the template you use supports it.
  • search_item_tagname
    • The HTML tag to use for search item headings. Defaults to h3, but you can change it here if needed (only if your search_item_template supports it).

Customize the display of search items

To cutomize the display of search items beyond the simple options in this package:

  1. Copy /marketpath/bs5-search/_search_result.liquid to another location (eg: /marketpath/bs5-search/overrides/_search_result.liquid)
  2. Edit your copy as desired
  3. Update the search_item_template variable in /marketpath/bs5-search/overrides/_search_config.liquid. Set it to your new template
Example search item template customization for blog posts

Show Full

{% if item.object_type == 'blog_post' %}
    {%- var image = item.image | default:site.placeholder_image -%}
    <div class="search-result-item row">
        <div class="d-none d-md-block col-3 col-lg-2">
            {% img image link:item.full_url class:'img-fluid' preset:search_item_preset %}
        </div>
        <div class="col-12 col-md-9 col-lg-10">
            <{{search_item_tagname | default: 'h3'}}><a href="{{item.full_url}}">{{item.title}}</a></{{search_item_tagname | default: 'h3'}}>
            <p class="blogsource">From the <a href="{{item.blog.full_url}}"><strong>{{item.blog.title}}</strong></a> Blog</p>
            {{item.summary_html}}
        </div>
    </div>
{% else %}
    {% include '/marketpath/bs5-search/_search_result.liquid' %}
{% endif %}
Setting the custom search result item template

Show Full

{% comment %}
    Place this code in /marketpath/bs5-search/overrides/_search_config.liquid
{% endcomment %}
{%- set search_param = 'query' -%}
{%- set page_param = 'p' -%}
{%- set limit_param = 'count' -%}
{%- set search_page = '/searchresults' -%}
{%- set search_item_template = '/marketpath/bs5-search/overrides/_custom_blogpost_result.liquid' -%}
{%- set search_item_preset = 'summary-img' -%}
{%- set search_item_tagname = 'h3' -%}

Add the search form to your site

To include the search form on your site, simply add the following code to your header - or wherever else you would like for it to be included:

Including the search form in your template

Show Full

{% include '/marketpath/bs5-search/_search_form.minimal.liquid' %}