Removing "Sort by" feature on Handy Theme

Solved
Highlighted
Tourist
4 1 0

hi there--I'm wondering if anyone using the Handy theme can tell me how I can remove the "Sort By" feature on the collections pages, please. Thank you very much!

0 Likes

hello, 

Hope you are doing well.

 

use this that's help

.cata-toolbar .sort-by {
display: none;
Thanks & Regards
Perennial Solution

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
Tourist
4 1 0

hi there--thank you!

Would you mind giving me more specific instructions, please? (I am not very familiar with coding.) Am I supposed to insert this: 

.cata-toolbar .sort-by {
display: none;
0 Likes

Oh, my bad! Please add this code at the bottom in style.css file and check again.

Please let me know if the issue persists. 

Thanks & Regards
Perennial Solution

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
Tourist
4 1 0

hi there--sorry, I am really unexperienced with both Shopify and coding, so could you be even more specific, please? I know how to get to "Edit Code." Then, there are several sections: Layout, Template, Sections, Snippets, Assets, Config. Within those, there are things that mostly end in .liquid. My best guess is that this needs to be addressed in the static-collection.liquid area (just because I see things about "sort by" in the code).Given this additional info., do you have any specific suggestion, please?

Thank you very much!

 

0 Likes

Success.

Tourist
4 1 0

hello anyone who has also been trying to remove this built-in "sort by" feature--I've been noodling around with the code, and I think I have successfully removed the "sort by" feature without messing anything else up. This is what I did:

 

1.) Go to "Edit Code" for your online store (and Duplicate it first so that you have a back-up copy if something goes awry. I found I didn't need to use this because there is a button at the top of the code to go back to the Original Code, but it was helpful to know I had a backup.)

 

2.) Scroll down to the "Sections" section.

 

3.) Click on "static-collection.liquid"

 

4.) Delete all the code there and replace it with the code below (basically the same except for some parts pertaining to the "sort by" feature removed). This resolved the issue for me, and I hope it does for you as well!

 

{%- assign paginate_by = section.settings.products-per-page -%}
{% assign pagination_method = section.settings.products_pagination_method %}
{% paginate collection.products by paginate_by %}
{% assign total_products = paginate.items %}
{% endpaginate %}

<script
type="application/json"
data-section-type="static-collection"
data-section-id="{{ section.id }}"
data-section-data>
{
"shop_url": {{ shop.url | replace_first: 'http:' | json }},
"collection_handle": {{ collection.handle | json }},
"sort_by": {{ collection.sort_by | default: collection.default_sort_by | json }},
"pagination_method": {{ pagination_method | json }},
"products_per_page": {{ section.settings.products-per-page | json }},
"total_products": {{ total_products | json }},
"current_tags": [
{% for tag in current_tags %}
{{ tag | handleize | json }}
{% if forloop.last == false %},{% endif %}
{% endfor %}
],
"text": {
"refine": {{ 'collection.refine.button_title' | t | json }},
"apply": {{ 'general.form.apply' | t | json }},
"cancel": {{ 'general.form.cancel' | t | json }}
}
}
</script>

{% capture collection_filter_sortby %}
{% unless section.settings.enable_menu_form %}
<div class="collection-filter-sortby">
<div class="collection-filter">
<div
class="collection-filter-select-wrapper"
data-select-wrapper
data-select-wrapper-filter
>
<span class="collection-filter-title">
{{ 'collection.refine.title' | t }}
</span>
<label
class="collection-filter-label"
for="collection-filter"
data-select-label
>
{% capture current_tag %}
{%- for tag in collection.all_tags -%}
{% if current_tags contains tag %}
{{ tag }}
{% endif %}
{%- endfor -%}
{% endcapture %}

{% if current_tag == blank %}
{{ 'collection.refine.all' | t }}
{% else %}
{{ current_tag }}
{% endif %}
</label>

<select
class="collection-filter-select"
id="collection-filter"
data-select
>
<option value="">
{{ 'collection.refine.all' | t }}
</option>

{%- for tag in collection.all_tags -%}
<option
value="{{ tag | handle }}"
{% if current_tags contains tag %}
selected
{% endif %}
>
{{ tag }}
</option>
{%- endfor -%}
</select>

<span
class="collection-filter-select-arrow"
>
{%- include 'icon', id: 'arrow' -%}
</span>
</div>
</div>

{% if collection.image %}
{% include 'breadcrumbs' %}
{% endif %}

<div class="collection-sortby">
<div
class="collection-sortby-select-wrapper"
data-select-wrapper
data-select-wrapper-sortby
>

 

 

<select
class="collection-sortby-select"
id="collection-sortby"
data-select
>

</select>

<span
class="collection-sortby-select-arrow"
>

</span>
</div>
</div>
</div>
{% endunless %}
{% endcapture %}

{%- paginate collection.products by paginate_by -%}
<div
class="collection-grid
collection-grid-uninit
product-item-style-{{ section.settings.product_item_style }}
rows-of-{{ section.settings.products-per-row }}"
data-collection-grid>

<header
class="
collection-header
{% unless collection.image %}collection-header-no-image{% endunless %}
"
data-collection-header>
{%- if collection.image -%}
<figure
class="collection-image"
{%
include 'rimg',
img: collection.image,
size: '600x',
background: true,
lazy: true
%}
>
{%
include 'rimg',
img: collection.image,
size: '600x',
lazy: true
%}
</figure>
{%- endif -%}
<div class="collection-header-info">
{% unless collection.image %}
{% include 'breadcrumbs' %}
{% endunless %}

<h1 class="collection-title">{{ collection.title }}</h1>
{%- if collection.description != blank -%}
<div class="collection-header-description">{{ collection.description }}</div>
{%- endif -%}
</div>

{% unless collection.image %}
{{ collection_filter_sortby }}
{% endunless %}
</header>

{%- if collection.products.size == 0 -%}
<p class="collection-empty">
{%- if collection.all_products_count == 0 -%}
{{ 'collection.empty' | t }}
{%- else -%}
{{ 'collection.tags_empty' | t }}
{%- endif -%}
</p>
{%- endif -%}

{%- for product in collection.products -%}
{%- assign index_based_on_page = paginate.current_offset | plus: forloop.index -%}

<div
class="collection-grid-item"
data-collection-grid-item>
{%-
include 'product-item',
product_style: section.settings.product_item_style,
product_cropped: section.settings.product_item_crop,
use_quickshop: section.settings.enable_product_quickshop,
show_vendors: section.settings.show_product_vendors
-%}
</div>

{%- for block in section.blocks -%}
{%- assign block_index = block.settings.index | times: 1 -%}
{%- if block.settings.collection == blank or block.settings.collection == collection.handle -%}
{%- if block_index == index_based_on_page -%}
{%- assign advertisement = block -%}
<div class="collection-grid-item collection-grid-item-advertisement" {{ block.shopify_attributes }} data-collection-grid-item>
<p class="collection-grid-item-advertisement-text">{{ advertisement.settings.text | escape }}</p>
<a class="collection-grid-item-advertisement-link" href="{{ advertisement.settings.link }}">
<span class="collection-grid-item-advertisement-link-text">{{ advertisement.settings.link_text | escape }}</span>
<span class="collection-grid-item-advertisement-link-arrow">{%- include 'icon', id: 'arrow' -%}</span>
</a>
</div>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}

{%- unless paginate.next -%}
{%- for block in section.blocks -%}
{%- assign block_index = block.settings.index | times: 1 -%}
{%- if block.settings.collection == collection.handle and block_index > index_based_on_page -%}
{%- assign advertisement = block -%}
<div class="collection-grid-item collection-grid-item-advertisement" {{ block.shopify_attributes }} data-collection-grid-item>
<p class="collection-grid-item-advertisement-text">{{ advertisement.settings.text }}</p>
<a class="collection-grid-item-advertisement-link" href="{{ advertisement.settings.link }}">
<span class="collection-grid-item-advertisement-link-text">{{ advertisement.settings.link_text | escape }}</span>
<span class="collection-grid-item-advertisement-link-arrow">{%- include 'icon', id: 'arrow' -%}</span>
</a>
</div>
{%- endif -%}
{%- endfor -%}
{%- endunless -%}
</div>
{% if pagination_method contains "infinite_scroll" %}
<div class="infinite-scroll" data-infinite-scroll-target>
<button class="infinite-scroll-show-more"
data-infinite-scroll-show-more="{{ 'collection.show_more' | t }}"
data-infinite-scroll-loading="{{ 'collection.loading' | t }}"
>
{{ 'collection.show_more' | t }}
</button>
</div>
{% endif %}
{%- include 'pagination' -%}
{%- endpaginate -%}

{% if section.settings.enable_menu_form %}
{%- include 'collection-menu' -%}
{% endif %}

{% schema %}
{
"name": "Collection pages",
"class": "section-collection",
"settings": [
{
"type": "checkbox",
"id": "enable_menu_form",
"label": "Enable bottom menu",
"default": true,
"info": "Displays tag filtering and sorting in a sticky bottom menu."
},
{
"type": "select",
"id": "products_pagination_method",
"label": "Pagination method",
"options": [
{
"value": "infinite_scroll_click_to_load",
"label": "Click to load more"
},
{
"value": "infinite_scroll",
"label": "Infinite scroll"
},
{
"value": "traditional_pagination",
"label": "Traditional pagination"
}
],
"default": "traditional_pagination"
},
{
"type": "range",
"id": "products-per-page",
"label": "Products per page",
"min": 12,
"max": 50,
"step": 1,
"default": 12
},
{
"type": "range",
"id": "products-per-row",
"label": "Products per row",
"min": 3,
"max": 5,
"step": 1,
"default": 4
},
{
"id": "product_item_style",
"type": "select",
"label": "Product aspect ratio",
"info": "Using an uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.",
"options": [
{ "group": "Uncropped", "value": "natural", "label": "Natural" },
{ "group": "Uncropped", "value": "small", "label": "Short (4:3)" },
{ "group": "Uncropped", "value": "medium", "label": "Square (1:1)" },
{ "group": "Uncropped", "value": "large", "label": "Tall (2:3)" },
{ "group": "Cropped", "value": "cropped-small", "label": "Short (4:3)" },
{ "group": "Cropped", "value": "cropped-medium", "label": "Square (1:1)" },
{ "group": "Cropped", "value": "cropped-large", "label": "Tall (2:3)" }
],
"default": "natural"
},
{
"type": "checkbox",
"id": "product_grid_show_second_image",
"label": "Show second product image on hover",
"default": false
},
{
"id": "enable_product_quickshop",
"type": "checkbox",
"label": "Enable product quickshop",
"default": false
},
{
"id": "show_product_vendors",
"type": "checkbox",
"label": "Show product vendors",
"default": false
}
],
"blocks": [
{
"type": "ad",
"name": "Promotion",
"settings": [
{
"id": "collection",
"type": "collection",
"label": "Collection",
"info": "Unless specified, promotion will appear on all collection pages"
},
{
"id": "index",
"type": "text",
"label": "Display after X products",
"default": "10"
},
{
"id": "text",
"type": "textarea",
"label": "Text",
"default": "Promotion text"
},
{
"id": "link",
"type": "url",
"label": "Link"
},
{
"id": "link_text",
"type": "text",
"label": "Link text",
"default": "More info here"
}
]
}
]
}

{% endschema %}

0 Likes