Debut Theme - Change search results to grid view

Highlighted
New Member
1 0 1

Hi,

I'm setting up my store on the Debut Theme. An issue I'm having is that search results are list view by default and the images are not large enough for proper viewing. I need the search results in grid view similar to the collection pages.

Have not yet found a solution for this on here yet, so any help would be appreciated.

1 Like
Highlighted
Tourist
5 0 0

Same Problem, these are basics that are needed to be default


@DA_2019 wrote:

Hi,

I'm setting up my store on the Debut Theme. An issue I'm having is that search results are list view by default and the images are not large enough for proper viewing. I need the search results in grid view similar to the collection pages.

Have not yet found a solution for this on here yet, so any help would be appreciated.


 

0 Likes
Highlighted
New Member
2 0 0

I could not agree more. I sincerely think that Shopify theme support should listen!

0 Likes
Highlighted
Shopify Partner
42 2 8

@IanYahoo 

I saw many unanswered questions regarding how to change search result in Debut theme to grid view, here is how to do it :


  1. online store => actions => edit code 
  2. open search.liquid and remove all the codes in it and replace it with the following one
{% paginate search.results by 10 %}
<div class="page-width">
  {% if search.performed == false %}
    <div class="text-center">
      <h1 class="h2">{{ 'general.search.title' | t }}</h1>
  {% else %}
    <div class="section-header text-center">
      <h1 class="h2">
        <span class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}:</span>
        {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
      </h1>
  {% endif %}
      <div class="grid">
        <div class="grid__item medium-up--two-fifths medium-up--push-three-tenths">
          <form action="{{ routes.search_url }}" method="get" role="search" class="search">
            <div aria-live="polite" class="form-message form-message--error search-result-error-message hide" data-search-error-message>
              <ul id="error-search-form">
                <li>{{ 'general.search.empty_search_message' | t }}</li>
              </ul>
            </div>
            <div class="input-group">
              <input type="search"
                id="SearchInput"
                class="input-group__field search__input"
                name="q"
                value="{{ search.terms | escape }}"
                placeholder="{{ 'general.search.placeholder' | t }}"
                aria-label="{{ 'general.search.placeholder' | t }}"
                >
              <span class="input-group__btn">
                <button id="SearchResultSubmit" class="btn search__submit" type="submit">{{ 'general.search.submit' | t }}</button>
              </span>
            </div>
          </form>
        </div>
      </div>
      {% if search.performed and search.results_count == 0 %}
        <hr class="hr--small hr--invisible" aria-hidden="true" />
        <div class="rte">
          <p>{{ 'general.search.no_results_html' | t: link: routes.root_url }}</p>
        </div>
      {% endif %}
  </div>
</div>
{% if search.performed %}
  {% if search.results_count > 0 %}
    <hr aria-hidden="true" />
  {% endif %}
  <h2 class="visually-hidden">{{ 'general.search.heading' | t: count: search.results_count }}</h2>
  <ul class="page-width grid">
    {% for item in search.results %}
      <li class="grid__item one-quarter">
          {% if item.object_type == 'product' %}
            {% include 'product-card-grid', product: item %}
          {% else %}
            <div class="product-card product-card--grid">
              <a href="{{ item.url }}" class="full-width-link">
                <span class="visually-hidden">{{ item.title }}</span>
              </a>
              <div class="grid-view-item__link">
                {% if item.image %}
                  <div class="grid-view-item">
                    <div class="grid-view-item__image-wrapper product-card__image-wrapper">
                      <img class="grid-view-item__image" src="{{ item.image.src | img_url: '600x600' }}" alt="{{ item.image.alt | escape }}">
                    </div>
                  </div>
                {% endif %}
                <div class="grid-view-item__title-column">
                  <div class="grid-view-item__title" aria-hidden="true">
                    <span class="product-card__title">{{ item.title }}</span>
                  </div>
                  <div>
                    {% if item.published_at %}{{ item.published_at | date: format: "date" }} &#8212; {% endif %}
                    {{ item.content | strip_html | truncate: 200 }}
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
      </li>
    {% endfor %}
  </ul>
  {% if paginate.pages > 1 %}
    {% include 'pagination' %}
  {% endif %}
{% endif %}
{% endpaginate %}


I hope this help

0 Likes
Highlighted
Tourist
5 0 3

Hi, I have added the new code, the search results now show in grid view but there are no pictures. Is it possible to show pictures? Thank you

1 Like
Highlighted
New Member
1 0 1

I too have put in the replacement code and I have the grid but no images.   I have been comparing code between the different liquid files but it is beyond my skill level at the moment!   Any help would be appreciated.

1 Like
Highlighted
New Member
2 0 0

Did you get any answer about this issue?

0 Likes
Highlighted
Tourist
6 0 4

Any solution?

 

0 Likes