Product listing after search

Solved
Lijuj
Explorer
42 0 22

Hello,

 

Hoping that some one can help me here!

If I give a search in search field the product display is quite horrendous. Any idea how do I fix this?

I have attached a screen shot of when I searched for pink 

Questions: - 

1) is there any way I can change number of products to be be displayed per row to 3

2) and also to avoid overwriting the pricing on top of product description

 

Screenshot 2021-04-29 at 20.40.58.pngthan

thanks for your help

 

regards

Liju

 

KetanKumar
Shopify Partner
16953 1838 6344

@Lijuj 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lijuj
Explorer
42 0 22

lcouturedesigns.com

KetanKumar
Shopify Partner
16953 1838 6344

This is an accepted solution.

@Lijuj 

the issue was generated your product name height now is 20px need to required to 72px so i will update this code only this page please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-section-search-template .grid-item .product-grid-item > p {
    min-height: 72px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lijuj
Explorer
42 0 22

thanks

that works now thank you.

How do I make the number of products per row to display as 3 with bigger size images?

 

Regards

Liju

KetanKumar
Shopify Partner
16953 1838 6344

@Lijuj 

can you please check your theme customization option may allow how many product show on a per row

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lijuj
Explorer
42 0 22

 

@KetanKumar 

Yes this allows for collection pages and for some reason it does not apply to the search pages, not sure why?

The current setting is to 3 per row for collection pages, how ever for search it shows 5 per row.

How would you change that to align with collection pages?

thanks

Liju 

KetanKumar
Shopify Partner
16953 1838 6344

@Lijuj oh i see 

no rush can you pleas share your search page code so i will check and upate

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lijuj
Explorer
42 0 22

Here is code from search-template.liquid

{% assign grid_results = true %}

<div data-section-id="{{ section.id }}" data-section-type="search-template">
<div class="grid">
<div data-sectionId="{% if section.id %}{{section.id}}{% endif %}" data-settings='{% if section.settings %}{{section.settings | json}}{% endif %}' id="gf-products" class="grid-item">

<hr class="hr--clear hr--small">

{% if search.performed %}

{% paginate search.results by 20 %}

{% if search.results_count == 0 %}

<h1 class="h2 text-center">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
{% include 'search-bar' %}

{% else %}

<h1 class="h2 text-center">{{ 'general.search.results_for_html' | t: terms: search.terms }}</h1>
{% include 'search-bar' %}
<hr class="hr--clear">

{% if grid_results == false %}

{% for item in search.results %}
{% include 'search-result' %}
{% endfor %}

{% else %}

<div data-sectionId="{% if section.id %}{{section.id}}{% endif %}" data-settings='{% if section.settings %}{{section.settings | json}}{% endif %}' id="gf-products" class="grid-uniform">
{% for item in search.results %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
{% include 'search-result-grid' %}
{% endfor %}
</div>

{% endif %}

{% endif %}

{% if paginate.pages > 1 %}
<div class="text-center">
{% include 'pagination-custom' %}
</div>
{% endif %}

{% endpaginate %}

{% else %}

{% comment %}
If search.performed is false, someone either accessed the page without the q parameter, or it was blank.
{% endcomment %}
<h1 class="text-center h2">{{ 'general.search.title' | t }}</h1>
{% include 'search-bar' %}

{% endif %}

</div>
</div>
</div>

{% schema %}
{
"name": {
"cs": "Hledat",
"da": "Søg",
"de": "Suchen",
"en": "Search",
"es": "Buscar",
"fi": "Hae",
"fr": "Rechercher",
"hi": "खोजें",
"it": "Cerca",
"ja": "検索",
"ko": "검색",
"nb": "Søk",
"nl": "Zoeken",
"pl": "Szukaj",
"pt-BR": "Pesquisar",
"pt-PT": "Pesquisar",
"sv": "Sök",
"th": "ค้นหา",
"tr": "Ara",
"vi": "Tìm kiếm",
"zh-CN": "搜索",
"zh-TW": "搜尋"
},
"settings": [
{
"type": "checkbox",
"id": "product_show_compare_at_price",
"label": {
"cs": "Zobrazit původní cenu",
"da": "Vis sammenligningspris",
"de": "Vergleichspreis anzeigen",
"en": "Show compare at price",
"es": "Mostrar precio de comparación",
"fi": "Näytä vertailuhinta",
"fr": "Afficher le prix normal",
"hi": "मूल्य पर तुलना दिखाएं",
"it": "Mostra Prezzo di confronto",
"ja": "割引前価格を表示する",
"ko": "비교가 표시",
"nb": "Vis prissammenligning",
"nl": "Prijsvergelijking weergeven",
"pl": "Pokaż cenę do porównania",
"pt-BR": "Exibir Comparação de preços",
"pt-PT": "Mostrar preço comparado",
"sv": "Visa ursprungspris",
"th": "แสดงราคาเปรียบเทียบ",
"tr": "Karşılaştırma fiyatını göster",
"vi": "Hiển thị giá gốc",
"zh-CN": "显示原价",
"zh-TW": "顯示售價"
},
"default": false
},
{
"type": "checkbox",
"id": "product_show_saved_amount",
"label": {
"cs": "Zobrazit uloženou částku",
"da": "Vis besparelse",
"de": "Gesparten Betrag anzeigen",
"en": "Show saved amount",
"es": "Mostrar monto ahorrado",
"fi": "Näytä säästetty summa",
"fr": "Afficher le montant économisé",
"hi": "सहेजी गई राशि दिखाएं",
"it": "Mostra importo risparmiato",
"ja": "保存された金額を表示",
"ko": "저장 금액 표시",
"nb": "Vis spart beløp",
"nl": "Bespaard bedrag weergeven",
"pl": "Pokaż zaoszczędzoną kwotę",
"pt-BR": "Exibir valor salvo",
"pt-PT": "Mostrar valor poupado",
"sv": "Visa sparade belopp",
"th": "แสดงจำนวนที่บันทึกไว้",
"tr": "Tasarruf edilen tutarı göster",
"vi": "Hiển thị số tiền đã lưu",
"zh-CN": "显示已保存的金额",
"zh-TW": "顯示省下金額"
},
"default": true
}
]
}
{% endschema %}

 

KetanKumar
Shopify Partner
16953 1838 6344

@Lijuj 

thanks for code can you please try this 

{% assign grid_results = true %}

<div data-section-id="{{ section.id }}" data-section-type="search-template">
<div class="grid">
<div data-sectionId="{% if section.id %}{{section.id}}{% endif %}" data-settings='{% if section.settings %}{{section.settings | json}}{% endif %}' id="gf-products" class="grid-item">

<hr class="hr--clear hr--small">

{% if search.performed %}

{% paginate search.results by 20 %}

{% if search.results_count == 0 %}

<h1 class="h2 text-center">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
{% include 'search-bar' %}

{% else %}

<h1 class="h2 text-center">{{ 'general.search.results_for_html' | t: terms: search.terms }}</h1>
{% include 'search-bar' %}
<hr class="hr--clear">

{% if grid_results == false %}

{% for item in search.results %}
{% include 'search-result' %}
{% endfor %}

{% else %}

<div data-sectionId="{% if section.id %}{{section.id}}{% endif %}" data-settings='{% if section.settings %}{{section.settings | json}}{% endif %}' id="gf-products" class="grid-uniform">
{% for item in search.results %}
{% assign grid_item_width = 'large--one-third medium--one-third small--one-half' %}
{% include 'search-result-grid' %}
{% endfor %}
</div>

{% endif %}

{% endif %}

{% if paginate.pages > 1 %}
<div class="text-center">
{% include 'pagination-custom' %}
</div>
{% endif %}

{% endpaginate %}

{% else %}

{% comment %}
If search.performed is false, someone either accessed the page without the q parameter, or it was blank.
{% endcomment %}
<h1 class="text-center h2">{{ 'general.search.title' | t }}</h1>
{% include 'search-bar' %}

{% endif %}

</div>
</div>
</div>

{% schema %}
{
"name": {
"cs": "Hledat",
"da": "Søg",
"de": "Suchen",
"en": "Search",
"es": "Buscar",
"fi": "Hae",
"fr": "Rechercher",
"hi": "खोजें",
"it": "Cerca",
"ja": "検索",
"ko": "검색",
"nb": "Søk",
"nl": "Zoeken",
"pl": "Szukaj",
"pt-BR": "Pesquisar",
"pt-PT": "Pesquisar",
"sv": "Sök",
"th": "ค้นหา",
"tr": "Ara",
"vi": "Tìm kiếm",
"zh-CN": "搜索",
"zh-TW": "搜尋"
},
"settings": [
{
"type": "checkbox",
"id": "product_show_compare_at_price",
"label": {
"cs": "Zobrazit původní cenu",
"da": "Vis sammenligningspris",
"de": "Vergleichspreis anzeigen",
"en": "Show compare at price",
"es": "Mostrar precio de comparación",
"fi": "Näytä vertailuhinta",
"fr": "Afficher le prix normal",
"hi": "मूल्य पर तुलना दिखाएं",
"it": "Mostra Prezzo di confronto",
"ja": "割引前価格を表示する",
"ko": "비교가 표시",
"nb": "Vis prissammenligning",
"nl": "Prijsvergelijking weergeven",
"pl": "Pokaż cenę do porównania",
"pt-BR": "Exibir Comparação de preços",
"pt-PT": "Mostrar preço comparado",
"sv": "Visa ursprungspris",
"th": "แสดงราคาเปรียบเทียบ",
"tr": "Karşılaştırma fiyatını göster",
"vi": "Hiển thị giá gốc",
"zh-CN": "显示原价",
"zh-TW": "顯示售價"
},
"default": false
},
{
"type": "checkbox",
"id": "product_show_saved_amount",
"label": {
"cs": "Zobrazit uloženou částku",
"da": "Vis besparelse",
"de": "Gesparten Betrag anzeigen",
"en": "Show saved amount",
"es": "Mostrar monto ahorrado",
"fi": "Näytä säästetty summa",
"fr": "Afficher le montant économisé",
"hi": "सहेजी गई राशि दिखाएं",
"it": "Mostra importo risparmiato",
"ja": "保存された金額を表示",
"ko": "저장 금액 표시",
"nb": "Vis spart beløp",
"nl": "Bespaard bedrag weergeven",
"pl": "Pokaż zaoszczędzoną kwotę",
"pt-BR": "Exibir valor salvo",
"pt-PT": "Mostrar valor poupado",
"sv": "Visa sparade belopp",
"th": "แสดงจำนวนที่บันทึกไว้",
"tr": "Tasarruf edilen tutarı göster",
"vi": "Hiển thị số tiền đã lưu",
"zh-CN": "显示已保存的金额",
"zh-TW": "顯示省下金額"
},
"default": true
}
]
}
{% endschema %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing