Grid View Search Results for Debut Theme

[LauraOMGRL]

I really want to change the search results from list view, to grid view to make it a little better looking and easier for customers to see, but there doesn't seem to be an option for this. Does anyone know how to do it? I feel like the list view is really messy and doesn't catch your eye enough to notice there are actually results from the search. 

[Helen]

Hey, @LauraOMGRL! 

I’m Helen from Shopify Support. I agree with you; A grid view will make it easier to view the search results. Therefore, I have checked with our Theme department, and they advised that they are able to implement this customization on your theme for you! 

Since you are using Debut, a Shopify-made theme, you have 60 minutes of complimentary design time available to you. If you would like to use some of this time and move forward with the customization, please reply back in this thread, and we can proceed with the next steps to make it happen.

[Jasoliya]

Hi @LauraOMGRL 

Yes, in debut theme we have only list view available but if you want to change it to grid then we have to make changes in Section->product-card-list.liquid file.

[LauraOMGRL]

Hi Helen, 
That would be great - thanks! 

[Helen]

Fantastic @LauraOMGRL! I am going to reach out to you via email to confirm the details so that we can get this escalated for you as soon as possible. 

Keep an eye out for that.

[AmyS]

@Helen 

Is this something that can be done with my Debut theme, too? I don't think I've used any design time on my theme yet. Kindly let me know! The grid search results would be fantastic!

~ Amy

[Helen]

Hey, @AmyS! 

Thanks for reaching out.

Yes! We can do this on your Debut theme as well. I am sending you an email to confirm the details, and I will get this escalated for you too.

Let me know if I can help with anything else.

[CodingLover]

@LauraOMGRL 

Here is how to change the search on Debut theme from list to grid view

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

[OliveRoute]

@Helen Can you this for me??

Thanks

[Helen]

Hey, @OliveRoute! 

Thanks for reaching out. I am happy to take a look into this for you.

Are you using the Debut theme as well?