Shopify themes, liquid, logos, and UX
Problem | I am using the Prestige theme. On the sidebar they have an option for a group by filter. It is currently sorting alphabetically. I have two categories I would like to add custom sorting to. Size: S,M,L,XL Price: $0 to $40, $40 to $80, $80 to $100, $100 to $150, $150 to $200, $200+ You can see an example of price sorting here: https://themes.shopify.com/themes/prestige/styles/couture/preview |
My Url | https://thepenthousecloset.com/collections/ password:prettylolo |
{%- if section.settings.show_layout_switch -%}
{%- assign desktop_items_per_row = cart.attributes.collection_desktop_items_per_row | default: section.settings.grid_desktop_items_per_row | times: 1 -%}
{%- assign mobile_items_per_row = cart.attributes.collection_mobile_items_per_row | default: section.settings.grid_mobile_items_per_row | times: 1 -%}
{%- if desktop_items_per_row >= 3 and desktop_items_per_row != section.settings.grid_desktop_items_per_row -%}
{%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row -%}
{%- endif -%}
{%- else -%}
{%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row | times: 1 -%}
{%- assign mobile_items_per_row = section.settings.grid_mobile_items_per_row | times: 1 -%}
{%- endif -%}
{%- if desktop_items_per_row == 4 -%}
{%- assign tablet_items_per_row = 3 -%}
{%- else -%}
{%- assign tablet_items_per_row = 2 -%}
{%- endif -%}
{%- capture collection_inner -%}
{%- comment -%}This is the common part to both template{%- endcomment -%}
{%- if collection.products_count > 0 -%}
{%- paginate collection.products by section.settings.grid_items_per_page -%}
<div class="ProductListWrapper">
<div class="ProductList ProductList--grid {% if paginate.pages > 1 %}ProductList--removeMargin{% endif %} Grid" data-mobile-count="{{ mobile_items_per_row }}" data-desktop-count="{{ desktop_items_per_row }}">
{%- for product in collection.products -%}
<div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}">
{%- render 'product-item', product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
</div>
{%- endfor -%}
</div>
</div>
{%- render 'pagination', paginate: paginate -%}
{%- endpaginate -%}
{%- else -%}
<div class="EmptyState">
<div class="Container">
<h1 class="EmptyState__Title Heading u-h5">{{ 'collection.general.no_products' | t }}</h1>
<button class="EmptyState__Action Button Button--primary" data-action="reset-tags">{{ 'collection.general.reset' | t }}</button>
</div>
</div>
{%- endif -%}
{%- endcapture -%}
{%- if template == 'collection.ajax' -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
CONTENT FOR AJAX ALTERNATE TEMPLATE
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{{- collection_inner -}}
{%- else -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
CONTENT FOR NORMAL TEMPLATE
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- assign active_tags = '' -%}
{%- for tag in current_tags -%}
{%- assign tag_as_handle = tag | replace: ''', '' | replace: '"', '' | handle -%}
{%- assign active_tags = active_tags | append: tag_as_handle -%}
{%- unless forloop.last -%}
{%- assign active_tags = active_tags | append: '+' -%}
{%- endunless -%}
{%- endfor -%}
{%- capture section_settings -%}
{
"collectionUrl": {{ collection.url | default: '/collections/all' | json }},
"currentTags": {% if active_tags != blank %}{{ active_tags | split: '+' | json }}{% else %}[]{% endif %},
"sortBy": {{ collection.sort_by | default: collection.default_sort_by | json }},
"filterPosition": {{ section.settings.filter_position | json }}
}
{%- endcapture -%}
<section data-section-id="{{ section.id }}" data-section-type="collection" data-section-settings='{{ section_settings }}'>
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION INFO
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if section.settings.show_collection_info and collection.all_products_count > 0 -%}
{%- if section.settings.show_collection_image and collection.image and collection.template_suffix != 'no-image' -%}
<div class="FlexboxIeFix">
<header class="PageHeader PageHeader--withBackground {% if section.settings.collection_image_size != 'normal' %}PageHeader--{{ section.settings.collection_image_size }}{% endif %}" style="background: url({{ collection.image | img_url: '1x1', format: 'jpg' }})">
<div class="PageHeader__ImageWrapper Image--lazyLoad Image--fadeIn {% if section.settings.apply_overlay %}Image--contrast{% endif %}"
data-optimumx="1.2"
data-bgset="{{ collection.image | img_url: 'x600' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1400x' }} 1400w, {{ collection.image | img_url: '1600x' }} 1600w">
</div>
<noscript>
<div class="PageHeader__ImageWrapper {% if section.settings.apply_overlay %}Image--contrast{% endif %}" style="background-image: url({{ collection.image | img_url: '800x' }})"></div>
</noscript>
<div class="Container">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ collection.title }}</h1>
{%- if collection.description != blank -%}
<div class="SectionHeader__Description Rte">
{{- collection.description -}}
</div>
{%- endif -%}
</div>
</div>
</header>
</div>
{%- else -%}
<header class="PageHeader">
<div class="Container">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ collection.title }}</h1>
{%- if collection.description != blank -%}
<div class="SectionHeader__Description Rte">
{{- collection.description -}}
</div>
{%- endif -%}
</div>
</div>
</header>
{%- endif -%}
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION TOOLBAR
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if collection.all_products_count > 0 -%}
{%- comment -%}
In order to provide more predictable results (for instance not showing filters by tag even if the option is checked in settings,
but that there are no tags for the given collection to show), we are doing some more logic here. Basically, we try to check if there
are tags to show by stripping internal tags (those that start by "__")
{%- endcomment -%}
{%- assign has_visible_tags = false -%}
{%- case section.settings.filter_mode -%}
{%- when 'tag' -%}
{%- for tag in collection.all_tags -%}
{%- unless tag contains '__' -%}
{%- assign has_visible_tags = true -%}
{%- break -%}
{%- endunless -%}
{%- endfor -%}
{%- when 'group' -%}
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- if tag_parts.size >= 2 -%}
{%- assign has_visible_tags = true -%}
{%- endif -%}
{%- endfor -%}
{%- endcase -%}
{%- assign show_filters = false -%}
{%- assign quick_links = linklists[section.settings.filter_menu] -%}
{%- if quick_links != blank or has_visible_tags -%}
{%- assign show_filters = true -%}
{%- endif -%}
{%- capture collection_toolbar -%}
{%- if show_filters or section.settings.show_sort_by or section.settings.show_layout_switch -%}
<div class="CollectionToolbar CollectionToolbar--{{ section.settings.toolbar_position }} {% unless section.settings.show_layout_switch and show_filters == false and section.settings.show_sort_by == false %}CollectionToolbar--reverse{% endunless %}">
{%- if show_filters or section.settings.show_sort_by -%}
<div class="CollectionToolbar__Group">
{%- if show_filters -%}
<button class="CollectionToolbar__Item CollectionToolbar__Item--filter Heading {% unless current_tags %}Text--subdued{% endunless %} u-h6 {% if section.settings.filter_position != 'drawer' %}hidden-lap-and-up{% endif %}"
data-action="open-drawer"
data-drawer-id="collection-filter-drawer"
aria-label="{{ 'collection.filter.show_filter' | t }}">
{{ 'collection.filter.title' | t }} {% if current_tags %}<span class="Text--subdued">({{ current_tags.size }})</span>{% endif %}
</button>
{%- endif -%}
{%- if section.settings.show_sort_by -%}
<button class="CollectionToolbar__Item CollectionToolbar__Item--sort Heading Text--subdued u-h6"
aria-label="{{ 'collection.sorting.show_sort' | t }}"
aria-haspopup="true"
aria-expanded="false"
aria-controls="collection-sort-popover">
{{ 'collection.sorting.title' | t }} {% render 'icon' with 'select-arrow' %}
</button>
{%- endif -%}
</div>
{%- endif -%}
{%- if section.settings.show_layout_switch -%}
<div class="CollectionToolbar__Item CollectionToolbar__Item--layout">
<div class="CollectionToolbar__LayoutSwitch hidden-tablet-and-up">
<button aria-label="{{ 'collection.layout.show_one_per_row' | t }}" class="CollectionToolbar__LayoutType {% if mobile_items_per_row == 1 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="mobile" data-count="1">{% render 'icon' with 'wall-1' %}</button>
<button aria-label="{{ 'collection.layout.show_two_per_row' | t }}" class="CollectionToolbar__LayoutType {% if mobile_items_per_row == 2 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="mobile" data-count="2">{% render 'icon' with 'wall-2' %}</button>
</div>
<div class="CollectionToolbar__LayoutSwitch hidden-phone">
<button aria-label="{{ 'collection.layout.show_two_per_row' | t }}" class="CollectionToolbar__LayoutType {% if desktop_items_per_row == 2 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="desktop" data-count="2">{% render 'icon' with 'wall-2' %}</button>
<button aria-label="{{ 'collection.layout.show_four_per_row' | t }}" class="CollectionToolbar__LayoutType {% if desktop_items_per_row >= 3 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="desktop" data-count="{{ section.settings.grid_desktop_items_per_row }}">{% render 'icon' with 'wall-4' %}</button>
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}
{%- endcapture -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
FILTERS AND SORT BY POPOVER
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if show_filters -%}
{%- comment -%}
Implementation note: the filters can be displayed in two different ways: in a sidebar menu, always visible, or in a drawer. Due to that, we are
setting the general code here, and then we will output it twice.
{%- endcomment -%}
{%- assign quick_links = linklists[section.settings.filter_menu] -%}
{%- capture filters_content -%}
{%- if quick_links != empty -%}
<div class="Collapsible Collapsible--padded Collapsible--autoExpand">
<button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
{{- quick_links.title | escape -}} <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<ul class="Linklist">
{%- for link in quick_links.links -%}
<li class="Linklist__Item {% if link.active %}is-selected{% endif %}">
<a href="{{ link.url }}" class="Link Link--primary Text--subdued {% if link.active %}is-active{% endif %}">{{ link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
{%- endif -%}
{%- if has_visible_tags -%}
{%- if section.settings.filter_mode == 'tag' -%}
<div class="Collapsible Collapsible--padded Collapsible--autoExpand">
<button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
{{- 'collection.filter.all' | t -}} <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<ul class="Linklist">
{%- for tag in collection.all_tags -%}
{%- if tag contains '__' -%}
{%- continue -%}
{%- endif -%}
<li class="Linklist__Item {% if current_tags contains tag %}is-selected{% endif %}">
<button type="button" class="Link Link--primary Text--subdued {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag">
{{- tag -}}
</button>
</li>
{%- endfor -%}
{% if available %}
{% if product.price_varies and template == 'collection-template' %}
<p>From {{ product.price_min | money }} to {{ product.price_max | money }}</p>
{% else %}
<p>{{ product.price | money }}</p>
{% endif %}
{% else %}
<p>Sold out</p>
{% endif %}
</ul>
</div>
</div>
</div>
{%- else -%}
{%- assign groups = '' -%}
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- if tag_parts.size < 2 or tag contains '__' -%}
{%- continue -%}
{%- endif -%}
{%- assign groups = groups | append: tag_parts.first | append: ',' -%}
{% endfor %}
{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
{%- assign groups = groups | split: ',' | compact | uniq -%}
{%- for group in groups -%}
{%- assign group_downcase = group | downcase -%}
{%- if color_label contains group_downcase and section.settings.show_filter_color_swatch -%}
{%- assign show_color_swatch = true -%}
{%- else -%}
{%- assign show_color_swatch = false -%}
{%- endif -%}
<div class="Collapsible Collapsible--padded Collapsible--autoExpand">
<button type="button" class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
{{- group | escape -}} <span class="Collapsible__Plus"></span>
</button>
<div class="Collapsible__Inner">
<div class="Collapsible__Content">
<ul class="{% if show_color_swatch %}ColorSwatchList HorizontalList HorizontalList--spacingTight{% else %}Linklist{% endif %}">
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- if tag_parts.size < 2 or tag_parts.first != group or tag contains '__' -%}
{%- continue -%}
{%- endif -%}
{%- if show_color_swatch -%}
<li class="HorizontalList__Item">
{%- assign color_swatch_name = tag_parts.last | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
<button type="button" class="ColorSwatch {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag" data-tooltip="{{ tag_parts.last | escape }}" style="background-color: {{ tag_parts.last | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}">
<span class="u-visually-hidden">{{ tag_parts.last }}</span>
</button>
</li>
{%- else -%}
<li class="Linklist__Item {% if current_tags contains tag %}is-selected{% endif %}">
<button type="button" class="Text--subdued Link Link--primary {% if current_tags contains tag %}is-active{% endif %}" data-tag="{{ tag | handle }}" data-action="toggle-tag">
{{- tag_parts.last -}}
</button>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
</div>
</div>
{%- endfor -%}
{%- endif -%}
{%- endif -%}
{%- endcapture -%}
<div id="collection-filter-drawer" class="CollectionFilters Drawer Drawer--secondary Drawer--fromRight" aria-hidden="true">
<header class="Drawer__Header Drawer__Header--bordered Drawer__Header--center Drawer__Container">
<span class="Drawer__Title Heading u-h4">{{ 'collection.filter.all' | t }}</span>
<button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="collection-filter-drawer" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
{%- render 'icon' with 'close' -%}
</button>
</header>
<div class="Drawer__Content">
<div class="Drawer__Main" data-scrollable>
{{ filters_content }}
</div>
<div class="Drawer__Footer Drawer__Footer--padded" data-drawer-animated-bottom>
<div class="ButtonGroup">
<button type="button" class="ButtonGroup__Item Button Button--secondary" data-action="reset-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.reset' | t }}</button>
<button type="button" class="ButtonGroup__Item ButtonGroup__Item--expand Button Button--primary" data-action="apply-tags">{{ 'collection.filter.apply' | t }}</button>
</div>
</div>
</div>
</div>
{%- endif -%}
{%- if section.settings.show_sort_by -%}
<div id="collection-sort-popover" class="Popover" aria-hidden="true">
<header class="Popover__Header">
<button class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover" aria-label="{{ 'general.popup.close' | t }}">{% render 'icon' with 'close' %}</button>
<span class="Popover__Title Heading u-h4">{{ 'collection.sorting.title' | t }}</span>
</header>
<div class="Popover__Content">
<div class="Popover__ValueList" data-scrollable>
{% assign collection_sort_by = collection.sort_by | default: collection.default_sort_by %}
{%- for option in collection.sort_options -%}
<button class="Popover__Value {% if option.value == collection_sort_by %}is-selected{% endif %} Heading Link Link--primary u-h6" data-value="{{ option.value }}" data-action="select-value">
{{ option.name }}
</button>
{%- endfor -%}
</div>
</div>
</div>
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION PRODUCTS
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<div class="CollectionMain">
{%- if section.settings.toolbar_position == 'top' -%}
{{- collection_toolbar -}}
{%- endif -%}
<div class="CollectionInner">
{%- if show_filters and section.settings.filter_position == 'sidebar' -%}
<div class="CollectionInner__Sidebar {% if collection_toolbar != blank and section.settings.toolbar_position == 'top' %}CollectionInner__Sidebar--withTopToolbar{% endif %} hidden-pocket">
<div class="CollectionFilters">
{{ filters_content }}
<button type="button" class="Button Button--secondary" data-action="reset-tags" {% if current_tags == blank %}style="display: none"{% endif %}>{{ 'collection.filter.reset' | t }}</button>
</div>
</div>
{%- endif -%}
<div class="CollectionInner__Products">
{{ collection_inner }}
</div>
</div>
{%- if section.settings.toolbar_position == 'bottom' -%}
{{- collection_toolbar -}}
{%- endif -%}
</div>
{%- else -%}
<div class="EmptyState">
<div class="Container">
<h3 class="EmptyState__Title Heading u-h5">{{ 'collection.general.empty' | t: collection_title: collection.title }}</h3>
<a href="{{ routes.root_url }}" class="EmptyState__Action Button Button--primary">{{ 'collection.general.empty_button' | t }}</a>
</div>
</div>
{%- endif -%}
</section>
{%- endif -%}
{%- capture hack -%}
{%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%}
{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}
{%- endcapture -%}
{% schema %}
{
"name": "Collection page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_collection_info",
"label": "Show collection info",
"default": true
},
{
"type": "checkbox",
"id": "show_collection_image",
"label": "Show collection image",
"default": false
},
{
"type": "checkbox",
"id": "apply_overlay",
"label": "Apply overlay on image",
"info": "This can improve text visibility.",
"default": true
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch).",
"default": false
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "select",
"id": "collection_image_size",
"label": "Collection image size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "normal"
},
{
"type": "header",
"content": "Toolbar"
},
{
"type": "checkbox",
"id": "show_sort_by",
"label": "Show sort by",
"default": true
},
{
"type": "checkbox",
"id": "show_layout_switch",
"label": "Show layout switch"
},
{
"type": "select",
"id": "toolbar_position",
"label": "Position",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "bottom",
"label": "Bottom"
}
],
"default": "top"
},
{
"type": "header",
"content": "Filters"
},
{
"type": "select",
"id": "filter_position",
"label": "Desktop position",
"options": [
{
"value": "sidebar",
"label": "Sidebar"
},
{
"value": "drawer",
"label": "Drawer"
}
],
"default": "sidebar"
},
{
"type": "select",
"id": "filter_mode",
"label": "Mode",
"info": "Filters by group requires specific tag formatting. [Learn more](https://help.shopify.com/manual/using-themes/themes-by-shopify/supply#product-tips-tips-specific)",
"options": [
{
"value": "hidden",
"label": "Hidden"
},
{
"value": "tag",
"label": "By tag"
},
{
"value": "group",
"label": "By group"
}
],
"default": "tag"
},
{
"type": "checkbox",
"id": "show_filter_color_swatch",
"label": "Show filter color swatch",
"info": "This is only used if filters by group is enabled.",
"default": true
},
{
"type": "link_list",
"id": "filter_menu",
"label": "Quick links",
"info": "This menu won't show dropdown items."
},
{
"type": "header",
"content": "Grid"
},
{
"type": "range",
"id": "grid_items_per_page",
"label": "Products per page",
"min": 4,
"max": 48,
"step": 4,
"default": 16
},
{
"type": "select",
"id": "grid_mobile_items_per_row",
"label": "Products per row (mobile)",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
],
"default": "2"
},
{
"type": "range",
"min": 2,
"max": 4,
"id": "grid_desktop_items_per_row",
"label": "Products per row (desktop)",
"default": 4
}
]
}
{% endschema %}
Did you ever find a solution to this?
Sir i'm Checking Your Website And You get Sort Order As S.m.l.xl,xxl, I Am Not Understand That where I Have To put this Code?
Plase Share brief detail sir i Am Bigginer So
How did you solve the problem?
This code is not correct, i can solve it if you show the correct code
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024