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

Timito
Pathfinder
91 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!

 

0 Likes
PaulNewton
Shopify Partner
2775 155 513

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">

 

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Timito
Pathfinder
91 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 %}
0 Likes

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes