Showing Blog posts AND products in search

New Member
2 0 0

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!

0 Likes

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

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
2 0 0
  {% 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!

 

0 Likes
Highlighted

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:

<input type="hidden" name="type" value="product" />

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

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
1 0 0

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!

0 Likes
Excursionist
57 0 6

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

0 Likes