Debut Theme Search Result Grid

[CristianDuca95]

Hello,

I'm trying to change my search results on the website from list view to a grid view. I found a few solutions but the images don't load at all. Can anyone help please?

Solution I followed: https://community.shopify.com/c/Shopify-Design/Grid-View-Search-Results-for-Deb...

Website link: https://www.fresh-cart.co.uk

Password: cartcart

[FreshNarrative]

Hi CristianDuca95,

The images are "there", however they are hidden due to styling. There is a <style> tag before each product card image that is hiding the images. When removed the images appear.

Share your search.liquid file and I can look into it further.

Best,

Kyle 

[CristianDuca95]

Hello Kyle,

Thank you very much!

Code is below:

{% 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 %}

[FreshNarrative]

I'd assume your issue is coming about because you're using Pagefly or LayoutHub. This app is causing this particular page to break because of some override in styling.

My best advice would be to find another solution without this app. The way your website is styled can be achieved without it and fairly simply by using the default debut theme. 

Another thing to note is that your search page is not displaying properly in mobile devices. 

[CristianDuca95]

I'm using PageFly, however not for the search page. I only use it for home page and collections page, everything else is Debut default theme.

[FreshNarrative]

Yes, I understand.  Try this as a workaround:

{% 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 style="max-width: none !important" class="grid-view-item__image-wrapper product-card__image-wrapper">
                      <img style="max-width: none !important" 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 %}

This will override the styling that is being applied by the plugin.

[CristianDuca95]

Hey,

I applied it but still images aren't being shown :(

Any other tips?

[FreshNarrative · Accepted solution]

I'm not seeing the styles applied to the page which makes me think it's being overwritten. 

Try editing your "theme.scss.liquid" file and add the following to the last line and make sure you save the file.

.grid-view-item__image-wrapper{
max-width: none !important;
}

.grid-view-item__image{
max-width: none !important;
}

[CristianDuca95]

This actually did work! Thank you very much for the help.

There's one more thing that I just noticed when the images appear. If you hover the "Add to Cart" of the products on the right column (peppers/potatoes), the page reacts weirdly. See attached gif:

https://gyazo.com/bd8327f7ca96fd381e1ed7190527ebfc

Thank you again in advance for the help. 

[FreshNarrative]

I'm glad it worked for you! To fix the other issue, search your theme.scss.liquid file for:

.product-card:hover

it should be around line #8559 in your file and change display: block to display: relative; and save the file.