I could use help fine tuning a client site. Presently, search on only displays products. They wish to show blog posts in results as well.
Step 1: modify search query/results
Step 2: format those results to look agreeable with differently formatted product pix.
Can someone at least help with step 1? Then we can hobble out step 2 
Iāve been all through forum and google. Not seeing correct answer to solve this. Thank you!
Hello Fabfd,
Please, read this Shopify help article to modify your search: https://help.shopify.com/manual/sell-online/online-store/storefront-search
Hope it helps!)
Best regards,
Arthur
{% if search.performed %}
<ul class="product-list list--reset">
{% for product in search.results %}{% include 'easylockdown_filter_search' with product %}
{% if product.available %}
{% include 'product-list-item' %}
{% endif %}
{% endfor %}
</ul>
<!--NEW-->
{% for article in search.results %}
{% if item.object_type == 'article' %} search-article{% endif %}
{% comment %}
'item' is an article
All article object properties can be accessed.
{% endcomment %}
{% if item.image %}
<div class="result-image">
<a href="{{ item.url }}" title="{{ item.title | escape }}">
{{ item | image_url: 'small' | img_tag: item.title }}
</a>
</div>
{% endif %}
{% endfor %}
<!--END NEW-->
Thank you. I see some assitance there. Now its about presenting the results. This does not seem to yeild blog articles. Products show. But for blog articles, no content at all displaying. Help appreciated! I feel Iām close!
Please, check your search form. This is the search code, that works for Article, Product and Pages. Your form needs to look like this one:
<form action="/search" method="get" role="search">
<div class="input-group--underline">
<input class="input-group__field" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
<div class="input-group__btn">
<button type="submit" class="btn btn--clear btn--square">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</div>
</div>
</form>
If you need a form only to return products, you can add this hidden field to the search form:
Only for Article:
<input type="hidden" name="type" value="article" />
For Article & Products:
<input type="hidden" name="type" value="product" />
<input type="hidden" name="type" value="article" />
This is a part of a Search result code from Narrative theme (for example). You need to implement this logic for this āforā loop and āifā statement:
<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}">
<div class="card-list__column grid__item {% if search.results.size == 1 %} card-list__column--center{% endif %} {{ gridClasses }}">
{% for item in search.results %}
{% if item.object_type == 'article' %}
{% include 'article-card', article: item %}
{% elsif item.object_type == 'page' %}
{% include 'page-card', page: item %}
{% else %}
{% include 'product-card', product: item %}
{% endif %}
{% endfor %}
</div>
</div>
Please, let me know if everything is clear and works for you.
Best,
Arthur
Hey Arthur, where exactly in the liquid are we supposed to add this? Is it in the theme liquid? Search? And in either one, where exactly should I put these things? My goal is to only have products show up in search and I am no good at any of this code stuff Thank you!
yugentribe dear
Look for programmers or programmers who will help you change these. Just a small error your website may be corrupted or run unexpectedly
Hi,
Add the below hidden field to search form. It will search for all.
<form action="/search" method="get" role="search">
<input type="hidden" name="type" value="product,article,page">
<input class="input-group__field" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
<button type="submit" class="btn btn--clear btn--square">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
Thank you so much for explaining the logic for the search form @Arthur_Korniyen .
For some reason in my scenario i couldnāt use the āelsifā condition for article type so i end up with a double iteration like this:
{% if search.performed and grid_results == true %}
<div class="container container-v2 my-3 my-lg-5">
<div class="row">
{% for item in search.results %}
{% if item.object_type == 'article' %}
{% include 'article-template' %}
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% if search.performed and grid_results == true %}
<div class="container container-v2 my-3 my-lg-5">
<div class="row">
{% for product in search.results %}
{% if product.object_type == 'product' %}
<div class="col-md-3 col-sm-6 col-6">
{% include 'product-item-v1' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
However, i couldn`t have done this without your insight. Thank you
Hi there,
So, im kind of al long-time-lurker on the help page of Shopifyā¦
Im not a programmer, but due to want to build a company with as little money as possible, ill try to do and learn things myself, first.
So if it is not too difficult I try some changing the code. I am from the Netherlands, so I hope my English is good enoughā¦ (laughs awkwardly)
That said:
We had the problem that our blogpost would not show up via the search-light. Thanks to this page, I tried some changing the code in a testpreview, and I got it as far as looking into products AND articles (YEAH!)
Now, 2 little āissuesā are still accuring, on which I hope I can get some help.
Issue 1:
If you use the search-light directly from the homepage, if says it doenāt find any articles. But, if you use the same search word on the page that it redirects too (after entering the word on the homepage search-light), then it will find the article. This issue is both on the desktop and mobile version.
Iāve made little video to show the problem, but I donāt know if I am aloud to share thatā¦?
Issue 2:
I would like it if the search items would be split up. In my vision the blogs/articles need to be viewed first, and then with a (for example) separation line you would see the products underneath that.
This is what my search.liquid looks like.
{% paginate search.results by 24 %}
<div class="section-title desktop-12 mobile-3">
<h1>{{ 'general.search.title' | t }}</h1>
<input type="hidden" name="type" value="product,article">
</div>
<div id="page" class="desktop-12 tablet-6 mobile-3">
<div id="search-bar">
<form action="/search" method="get">
<input type="text" name="q" id="q" placeholder="{{ 'general.search.placeholder' | t }}"/>
<input type="hidden" name="type" value="product,article">
<input value="{{ 'general.search.submit' | t }}" name="submit" id="search_button" class="button" type="submit">
{% if search.performed %}
{% if search.results_count == 0 %}
<p>{{ 'general.search.no_results_html' | t: terms: search.terms }}</p>
{% else %}
<p>{{ 'general.search.results_for_html' | t: terms: search.terms }}</p>
{% endif %}
{% endif %}
</form>
</div>
</div>
{% if search.performed %}
<div class="desktop-12 tablet-6 mobile-3" id="four-per-row">
<div class="grid_wrapper product-loop">
{% for item in search.results %}
<div class="product-index desktop-3 tablet-2 mobile-half span-3" id="prod-{{ product.id }}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
<div class="collection-image ci">
<!-- Article -->{% if item.object_type == 'article' %}
<!--'item' is an article All article object properties can be accessed. -->
{% if item.image %}
<a href="{{ item.url }}" title="{{ item.title | escape }}">
{%- include 'basic-responsive-image', type: item.image -%}
<noscript>
<img src="{{ item.image | img_url: '800x' }}" alt="{{ item.image.alt }}">
</noscript>
</a>
{% else %}
<div class="search-content prod-image">
{{ item.content | strip_html | trancate: 200 }}
</div>
{% endif %}
<!-- PAGE -->{% elsif item.object_type == 'page' %}
<!--'item' is a page. All page object properties can be accessed. -->
{% if item.content contains "img" %}
{% assign feat_image = item.content | split: 'src="' %}
{% assign feat_image = feat_image[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:' %}
<a href="{{ item.url }}" title="{{ item.title | escape }}">
<img src="{{ feat_image }}" alt="{{ item.title }}">
</a>
{% else %}
<div class="search-content prod-image">
{{ item.content | strip_html | trancate: 200 }}
</div>
{% endif %}
<!-- Product -->{% else %}
<!-- 'item' is a product. All product object properties can be accessed.-->
{% if item.available %}
{% for col in item.collections %}
{% if col.handle == 'new' %}
<div class="new icn">{{ 'products.general.new' | t }}</div>
{% endif %}
{% endfor %}
{% if item.price < item.compare_at_price %}
<div class="sale-item icn">{{ 'products.general.sale' | t }}</div>
{% endif %}
{% else %}
<div class="so icn">{{ 'products.general.sold' | t }}</div>
{% endif %}
{% if item.featured_image %}
<a href="{{ item.url }}" title="{{ item.title | escape }}">
<div class="reveal">
{% include "basic-responsive-image", type: item.featured_image %}
<noscript>
<img src="{{ item.featured_image | img_url: '1024x' }}" alt="{{ item.featured_image.alt | escape }}">
</noscript>
{% if settings.image_flip and item.images.size > 1 %}
<div class="hidden">
{% include "basic-responsive-image", type: item.images[1] %}
<noscript>
<img src="{{ item.images[1] | img_url: '1024x' }}" alt="{{ item.images[1].alt | escape }}">
</noscript>
</div>
{% endif %}
</div>
</a>
{%- else -%}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'item-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{% endif %}
</div>
<div class="product-details">
<a href="{{ item.url }}">
{% if item.object_type == 'product' %}
{% if settings.vendor %}
<h4>{{ item.vendor }}</h4>
{% endif %}
{% endif %}
<h3>{{ item.title }}</h3>
</a>
{% if item.object_type == 'product' %}
{% unless item.template_suffix == 'not-for-sale' %}
<div class="price">
{% if item.price < item.compare_at_price %}
<div class="onsale">{{ item.price | money }}</div>
<div class="was">{{ item.compare_at_price | money }}</div>
{% else %}
<div class="prod-price">
{% if item.price_varies %}
{{ 'products.general.from' | t }} {{ item.price_min | money }} - {{ item.price_max | money }}
{% else %}
{{ item.price | money }}
{% endif %}
</div>
{% endif %}
</div>
{% endunless %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
{% include 'pagination' %}
{% endif %}
{% endpaginate %}
If anybody can help me out with this, it would be super awesome!
Kind regards, greetings
Ronja
Hi Arthur,
I have tried using the code you provided and it is still not working for me.
This is what my form looks like:
{%- include āgrid-logicā -%}
{%- if search.performed -%}
{%- paginate search.results by 12 -%}
{%- if paginate.next -%}
{%- endif -%}Hi! Have you ever figured that out? Iām trying to add our blog posts to search query results on the website, and Iām going in circles. Nothing works. 