Hero
CASE:Intro

Un diseño abierto desde el primer momento, siguiendo las tendencias del mercado en el mundo del Ecommerce, largas sesiones en directo en las que tratábamos directamente con el cliente y mano a mano íbamos trabajando el diseño de la página.

CASE:Details

Business

Kauchy

Expertise

Drawer Cart, App integration, Rotative Banner, Custom Articles Templates, Dynamic Product Collection Filter, Newsletter PopUp, Page Collections Order Alphabetically, ...

Developed

2019

CASE:TextFull

Page Collections Order Alphabetically

CASE:TextFull

Conseguimos realizar una programación específica para mostrar o todas las colecciones de la tienda o las que queramos mostrar mediante un ¨radio button¨ en el customizador.

Para el funcionamiento del orden alfabético, lo que haremos será crear una variable con todas las letras del abecedario, posteriormente haremos un buclé de esta variable, pasando letra por letra, haremos dentro de este bucle otro con las colecciones de las que cogeremos la primera letra y la compararemos con la letra del abecedario hasta que coincidan.

FirstImage
CASE:Code

 <div class="page-width">
<header class="section-header text-center">
{% if section.settings.title == blank %}
<h1>{{ page_title }}</h1>
{% else %}
<h1>{{ section.settings.title }}</h1>
{% endif %}
</header>

<style>
.list-collections{
-webkit-column-count: {{ section.settings.grid }};
-moz-column-count: {{ section.settings.grid }};
column-count: {{ section.settings.grid }};
}
</style>


{%- assign blocks = section.blocks | sort: 'collection.all_products_count' -%}

<ul class="list-collections">
{% if section.settings.display_type == 'all' %}

{% assign letters = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,ñ,o,p,q,r,s,t,u,v,w,x,y,z' | split: ',' %}
{% for letter in letters %}
<li class="letter letter-{{ letter | downcase }}">

{% assign counter = 0 %}

{% for collection in collections %}
{% assign first_letter = collection.title | strip_html | upcase | truncate: 1, '' | downcase %}
{% if letter == first_letter %}
{% if counter == 0 %}
<h3>{{ letter | upcase }}</h3>
{% endif %}
{% include 'collection-grid-item' %}
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
</li>

{% endfor %}

{% else %}

{% assign letters = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,ñ,o,p,q,r,s,t,u,v,w,x,y,z' | split: ',' %}
{% for letter in letters %}
<li class="letter letter-{{ letter | downcase }}">

{% assign counter = 0 %}

{% for block in section.blocks %}
{%- assign collection = collections[block.settings.collection] -%}
{% assign first_letter = collection.title | strip_html | upcase | truncate: 1, '' | downcase %}
{% if letter == first_letter %}
{% if counter == 0 %}
<h3>{{ letter | upcase }}</h3>
{% endif %}
{% include 'collection-grid-item' %}
{% assign counter = counter | plus: 1 %}
{% endif %}
{% endfor %}
</li>

{% endfor %}

{% endif %}
</ul>
</div>



{% schema %}
{
"name": {
"de": "Kategorien-Liste Seite",
"en": "Collections list page",
"es": "Lista de colecciones",
"fr": "Liste des collections",
"it": "Elenco collezioni",
"ja": "コレクションリストのページ",
"nl": "Pagina Collectielijst",
"pt-BR": "Lista de coleções",
"zh-CN": "产品系列列表页面",
"zh-TW": "商品系列清單頁面"
},
"settings": [
{
"type": "text",
"id": "title",
"label": {
"de": "Titel",
"en": "Heading",
"es": "Título",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"nl": "Kop",
"pt-BR": "Título",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"de": "Erzählen Sie von Ihrer Marke",
"en": "Talk about your brand",
"es": "Habla de tu marca",
"fr": "Parlez de votre marque",
"it": "Parla del tuo brand",
"ja": "あなたのブランドについて語る",
"nl": "Vertel over uw merk",
"pt-BR": "Fale sobre a sua marca",
"zh-CN": "谈论您的品牌",
"zh-TW": "描述您的品牌"
}
},
{
"type": "paragraph",
"content": {
"de": "Alle kategorien sind automatisch gelistet. Zum Ändern der Liste wählen Sie 'Ausgewählt' und fügen Sie Kategorien hinzu.",
"en": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections.",
"es": "Todas tus colecciones están enlistadas por defecto. Para personalizar tu lista, elige 'Seleccionadas' y agrega colecciones.",
"fr": "Toutes vos collections sont listées par défaut. Pour personaliser votre liste, cliquez sur « Sélection » et ajoutez des collections.",
"it": "Tutte le tue collezioni vengono elencate per impostazione predefinita. Per personalizzare il tuo elenco, scegli \"Selezionato\" e aggiungi delle collezioni.",
"ja": "すべてのコレクションがデフォルトで一覧表示されます。一覧をカスタマイズするには、「選択済み」を選択してコレクションを追加します。",
"nl": "Standaard worden al uw collecties weergegeven. Kies Geselecteerd en voeg collecties toe om de lijst aan te passen.",
"pt-BR": "Todas as suas coleções são listadas por padrão. Para personalizar sua lista, escolha \"Selecionado\" e adicione coleções.",
"zh-CN": "默认情况下列出您的所有产品系列。若要自定义列表,请选择“已选择”并添加产品系列。",
"zh-TW": "系統預設會將您所有的商品系列都列入清單。如果想自訂清單,請點選「已選取」並新增商品系列。"
}
},
{
"type": "radio",
"id": "display_type",
"label": {
"de": "Kategorien auswählen, die angezeigt werden sollen",
"en": "Select collections to show",
"es": "Selecciona colecciones para mostrar",
"fr": "Sélectionner les collections à afficher",
"it": "Seleziona le collezioni da mostrare",
"ja": "表示するコレクションを選択する",
"nl": "Collecties selecteren om weer te geven",
"pt-BR": "Selecione coleções para exibir",
"zh-CN": "选择要显示的产品系列",
"zh-TW": "選取欲顯示的商品系列"
},
"default": "all",
"options": [
{
"value": "all",
"label": {
"de": "Alle",
"en": "All",
"es": "Todas",
"fr": "Toutes",
"it": "Tutte",
"ja": "すべて",
"nl": "Alle",
"pt-BR": "Tudo",
"zh-CN": "所有",
"zh-TW": "全部"
}
},
{
"value": "selected",
"label": {
"de": "Ausgewählt",
"en": "Selected",
"es": "Seleccionadas",
"fr": "Sélection",
"it": "Selezionato",
"ja": "選択済み",
"nl": "Geselecteerd",
"pt-BR": "Selecionado",
"zh-CN": "已选",
"zh-TW": "已選取"
}
}
]
},
{
"type": "range",
"id": "grid",
"label": {
"de": "Kategorien per Reihe",
"en": "Collections per row",
"es": "Colecciones por fila",
"fr": "Collections par rangée",
"it": "Collezioni per riga",
"ja": "行あたりのコレクション数",
"nl": "Collecties per rij",
"pt-BR": "Coleções por linha",
"zh-CN": "每行产品系列数",
"zh-TW": "每列商品系列數"
},
"default": 3,
"min": 2,
"max": 5,
"step": 1
}
],
"blocks": [
{
"type": "collection",
"name": {
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"nl": "Collectie",
"pt-BR": "Coleção",
"zh-CN": "收藏",
"zh-TW": "商品系列"
},
"settings": [
{
"label": {
"de": "Kategorie",
"en": "Collection",
"es": "Colección",
"fr": "Collection",
"it": "Collezione",
"ja": "コレクション",
"nl": "Collectie",
"pt-BR": "Coleção",
"zh-CN": "收藏",
"zh-TW": "商品系列"
},
"id": "collection",
"type": "collection"
}
]
}
]
}
{% endschema %}

Discover now the different options available

And start upgrading your Shopify store today

See pricing

Submit now your design and get a UX Review for Free

Flexible payment options

Submit Project Proposal