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.
Solved! Go to the solution
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? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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.
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? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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
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? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
@LauraOMGRL
Here is how to change the search on Debut theme from list to grid view
{% 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" }} — {% 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
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?
Helen | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
User | Count |
---|---|
498 | |
208 | |
130 | |
80 | |
44 |