search bar for blog only

medusasmakeup · ‎05-03-2025

I found this code from a youtube tutorial. I added it to the section custom liquid. I would like this search bar to only search the blog.

{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}

{%- endif -%}

<style>

.template-search__header {

margin-bottom: 3rem;

}

.template-search__search {

margin: 0 auto 3.5rem;

max-width: 74.1rem;

}

.template-search__search .search {

margin-top: 3rem;

}

.template-search--empty {

padding-bottom: 18rem;

}

@media screen and (min-width: 750px) {

.template-search__header {

margin-bottom: 5rem;

}

.search__button .icon {

height: 1.8rem;

}

</style>

{%- liquid

assign sort_by = search.sort_by | default: search.default_sort_by

assign terms = search.terms | escape

assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by

-%}

{%- style -%}

.section-{{ section.id }}-padding {

padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;

padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;

}

@media screen and (min-width: 750px) {

.section-{{ section.id }}-padding {

padding-top: {{ section.settings.padding_top }}px;

padding-bottom: {{ section.settings.padding_bottom }}px;

}

{%- endstyle -%}

<div class="template-search{% unless search.performed and search.results_count > 0 %} template-search--empty{% endunless %} section-{{ section.id }}-padding">

{%- if search.performed -%}

{%- else -%}

{%- endif -%}

</h1>

{%- if settings.predictive_search_enabled -%}

<predictive-search data-loading-text="{{ 'accessibility.loading' | t }}">

{%- endif -%}

<main-search>

<input

class="search__input field__input"

id="Search-In-Template"

type="search"

name="q"

value="{{ search.terms | escape }}"

placeholder="{{ 'general.search.search' | t }}"

{%- if settings.predictive_search_enabled -%}

role="combobox"

aria-expanded="false"

aria-owns="predictive-search-results"

aria-controls="predictive-search-results"

aria-haspopup="listbox"

aria-autocomplete="list"

autocorrect="off"

autocomplete="off"

autocapitalize="off"

spellcheck="false"

{%- endif -%}

>

<label class="field__label" for="Search-In-Template">{{ 'general.search.search' | t }}</label>

{%- if settings.predictive_search_enabled -%}

</svg>

</div>

{%- endif -%}

</svg>

</button>

</svg>

</button>

</div>

</form>

</main-search>

{%- if settings.predictive_search_enabled -%}

</predictive-search>

{%- endif -%}

</div>

{%- if search.performed -%}

{%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}

{%- if search.results_count > 0 -%}

<p role="status">{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}</p>

{%- endif -%}

{%- endunless -%}

{%- if search.results_count == 0 and search.filters == empty -%}

<p role="status">{{ 'templates.search.no_results' | t: terms: search.terms }}</p>

{%- endif -%}

</div>

{%- if search.performed -%}

{%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' and search.filters != empty -%}

<facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">

<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>

</h2>

{%- assign sort_by = search.sort_by | default: search.default_sort_by -%}

{%- for option in search.sort_options -%}

<option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>

{%- endfor -%}

</select>

{% render 'icon-caret' %}

</div>

<button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>

</noscript>

</div>

{%- if search.results_count -%}

{{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }}

{%- elsif search.products_count == search.all_products_count -%}

{{ 'products.facets.product_count_simple' | t: count: search.products_count }}

{%- else -%}

{{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }}

{%- endif -%}

</span>

</h2>

</svg>

</div>

</form>

</facet-filters-form>

{%- endif -%}

<div{% if section.settings.filter_type == 'vertical' %} class="facets-vertical page-width"{% endif %}>

{%- if search.filters != empty -%}

{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}

{% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}

</aside>

{%- endif -%}

{%- if search.results.size == 0 and search.filters != empty -%}

{{ 'sections.collection_template.empty' | t }}<br>

{{ 'sections.collection_template.use_fewer_filters_html' | t: link: search_url, class: "underlined-link link" }}

</h2>

</div>

{%- else -%}

{%- for item in search.results -%}

{% assign lazy_load = false %}

{%- if forloop.index > 2 -%}

{%- assign lazy_load = true -%}

{%- endif -%}

{%- case item.object_type -%}

{%- when 'product' -%}

{%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}

{% render 'card-product',

card_product: item,

media_aspect_ratio: section.settings.image_ratio,

show_secondary_image: section.settings.show_secondary_image,

show_vendor: section.settings.show_vendor,

show_rating: section.settings.show_rating,

lazy_load: lazy_load

%}

{%- when 'article' -%}

{% render 'article-card',

article: item,

show_image: true,

show_date: section.settings.article_show_date,

show_author: section.settings.article_show_author,

show_badge: true,

media_aspect_ratio: 1,

lazy_load: lazy_load

%}

{%- when 'page' -%}

</a>

</h3>

</div>

<span class="badge color-background-1">{{ 'templates.search.page' | t }}</span>

</div>

{%- endcase -%}

</li>

{%- endfor -%}

</ul>

</div>

{%- endif -%}

</div>

{%- endif -%}

</div>

Ninthony · ‎05-03-2025

You can have your search display blog articles only by adding a hidden input to your search form. You'll need to identify where the form occurs in your code and add a couple of hidden inputs, where the input with the name attribute is "type" with a value set to "article", additionally you can add another hidden input for a specific blog if you only want to display results from a certain blog:

<form action="{{ routes.search_url }}" class="search-form">
      <input type="text" placeholder="Search" name="q" value="{{ search.terms | escape }}" />
      <input type="hidden" name="type" value="article" />
      <input type="hidden" name="blog" value="YourBlogName" /> <!-- Replace with your blog name -->
      <input type="submit" value="Search" />
</form>

See this thread as well:

https://community.shopify.com/c/shopify-design/how-can-i-make-a-search-bar-specifically-for-blog-pos...

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

search bar for blog only

search bar for blog only

Community Blog Articles