Shopify themes, liquid, logos, and UX
Hi, my website is sneakersafe.co.uk
Search result grid is too big, how do I make it so that it is the same as collection grid?
Currently it looks like this (very big):
I want it to look like this:
Thank you!
First check your theme settings for that template for possibly related settings.
If that's not an option then to customize the elements on search pages look in search.liquid and will want to track down the code that puts out each product and add the CSS class one-fifth to it.
Your looking for something like the following
<li class="grid__item grid__item--collection-template">
to then become
<li class="grid__item grid__item--collection-template one-fifth">
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
my code doesn't have anything remotely similar, I tried adding one-fifth too a lot of lines but nothing worked. Code is below:
{% paginate search.results by 10 %}
<div class="page-width">
<div class="text-center">
<h1 class="h2">{{ :empty | t }}</h1>
<div class="grid">
<div class="grid__item medium-up--six-tenths medium-up--push-two-tenths">
<form action="{{ routes.search_url }}" method="get" role="search" class="search-form search-page-form">
<div class="input-group input-group--nowrap">
<div class="input-group__field input-group__field--connected search-form__input-wrapper">
<input
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.placeholder' | t }}"
role="combobox"
aria-autocomplete="list"
aria-owns="predictive-search-results"
aria-expanded="false"
aria-label="{{ 'general.search.placeholder' | t }}"
aria-haspopup="listbox"
class="search-form__input"
data-search-page-predictive-search-input
/>
<input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />
<button type="reset" class="search-form__clear-action" aria-label="{{ 'general.search.clear_search_term' | t }}" data-search-page-predictive-search-clear>
{% include 'icon-close' %}
</button>
<div class="predictive-search-wrapper" data-predictive-search-mount="default"></div>
</div>
<button type="submit" class="search-form__connected-submit" aria-label="{{ 'general.search.submit' | t }}" data-search-page-predictive-search-submit>
{% include 'icon-search' %}
</button>
</div>
</form>
</div>
</div>
</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 data-sectionId="{% if section.id %}{{section.id}}{% endif %}" data-settings='{% if section.settings %}{{section.settings | json}}{% endif %}' id="gf-products" class="page-width list-view-items">
{% for item in search.results %}
<li class="list-view-item">
{% if item.object_type == 'product' %}
{% include 'product-card-list', product: item %}
{% else %}
<div class="product-card product-card--list">
<a href="{{ item.url }}" class="full-width-link">
<span class="visually-hidden">{{ item.title }}</span>
</a>
<div class="list-view-item__link">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper product-card__image-wrapper">
{% unless item.image == null %}
<img class="list-view-item__image" src="{{ item.image.src | img_url: '600x600' }}" alt="{{ item.image.alt | escape }}">
{% endunless %}
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-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', paginate: paginate %}
{%- endif -%}
{% endif %}
{% if search.results_count < 2 %}
<div class="search--less-than-2-results"></div>
{% endif %}
{% endpaginate %}
Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Templates > search.liquid and find "grid__item" .
Add code: small--one-half medium-up--one-fifth
Refer: https://i.imgur.com/Puef8iK.png
Hope it helps!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024