Grid View Search Results for Debut Theme

New Member
5 0 0

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. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
96 14 15

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.

Helen | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Shopify Expert
2136 356 446

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.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
5 0 0
Hi Helen, 
That would be great - thanks! 
0 Likes
Shopify Staff
Shopify Staff
96 14 15

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.

Helen | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
New Member
1 0 0

 

@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

 

 

0 Likes
Shopify Staff
Shopify Staff
96 14 15

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.

Helen | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

1 Like
Shopify Partner
39 2 5

@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

The best and fastest Shopify theme www.plaktheme.com
0 Likes