Search result grid too big, how do I make it so that it is the same as collection grid? debut theme

Timito
Pathfinder
93 1 37

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):

Timito_0-1627580307768.png

I want it to look like this:

Timito_1-1627580334195.png

Thank you!

 

Replies 3 (3)

PaulNewton
Shopify Partner
6274 573 1319

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


Timito
Pathfinder
93 1 37

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" }} &#8212; {% 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 %}

LitExtension
Shopify Partner
4860 1001 1133

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify