Debut Theme Search Result Grid

Solved
Highlighted
Excursionist
15 0 5

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

 

0 Likes
Highlighted

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.

 

Capture.PNG

 

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

 

Best,

Kyle 

1 Like
Highlighted
Excursionist
15 0 5

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 %}
1 Like
Highlighted

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. 

0 Likes
Highlighted
Excursionist
15 0 5

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.

0 Likes
Highlighted

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.

1 Like
Excursionist
15 0 5

Hey,

 

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

 

Any other tips?

1 Like
Highlighted

This is an 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;
}
1 Like
Highlighted
Excursionist
15 0 5

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. 

1 Like
Highlighted

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. 

0 Likes