Custom Collection List Using Navigation links - Shopify 2.0 FREE themes

See Other Products

I encounter a question about adding custom collections in the Shopify 2.0 FREE themes. We will utilize the navigation links so we can add whatever collection we want. This can be done easily by following the instructions below. 

You need to create the links.

1. From your Admin Page, click Online Store > Navigation > Add menu
2. Make sure to SAVE your work after you added the collections you want.

 

You need to customize the code.

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, open the main-lists-collections.liquid
3. Replace the code with the code below.

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}

<div class="page-width">
<h1 class="title title--primary">{{ section.settings.title | escape }}</h1>
{%- liquid
case section.settings.sort
when 'products_high' or 'products_low'
assign collections = collections | sort: 'all_products_count'
when 'date' or 'date_reversed'
assign collections = collections | sort: 'published_at'
endcase

if section.settings.sort == 'products_high' or section.settings.sort == 'date_reversed' or section.settings.sort == 'alphabetical_reversed'
assign collections = collections | reverse
endif
-%}

<ul class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down" role="list">
{% for link in section.settings.all_collections.links %}
{% assign collection = link.object %}
<li class="collection-list__item grid__item">
{% render 'card-collection', card_collection: collection, media_aspect_ratio: section.settings.image_ratio, columns: 3 %}
</li>
{%- endfor -%}
</ul>

</div>
{% schema %}
{
"name": "t:sections.main-list-collections.name",
"class": "section",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.main-list-collections.settings.title.label",
"default": "Collections"
},
{
"type": "link_list",
"id": "all_collections",
"default": "main-menu",
"label": "t:sections.header.settings.menu.label"
},
{
"type": "select",
"id": "sort",
"options": [
{
"value": "alphabetical",
"label": "t:sections.main-list-collections.settings.sort.options__1.label"
},
{
"value": "alphabetical_reversed",
"label": "t:sections.main-list-collections.settings.sort.options__2.label"
},
{
"value": "date_reversed",
"label": "t:sections.main-list-collections.settings.sort.options__3.label"
},
{
"value": "date",
"label": "t:sections.main-list-collections.settings.sort.options__4.label"
},
{
"value": "products_high",
"label": "t:sections.main-list-collections.settings.sort.options__5.label"
},
{
"value": "products_low",
"label": "t:sections.main-list-collections.settings.sort.options__6.label"
}
],
"default": "alphabetical",
"label": "t:sections.main-list-collections.settings.sort.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.main-list-collections.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.main-list-collections.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.main-list-collections.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.main-list-collections.settings.image_ratio.label",
"info": "t:sections.main-list-collections.settings.image_ratio.info"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 3,
"label": "t:sections.main-list-collections.settings.columns_desktop.label"
},
{
"type": "header",
"content": "t:sections.main-list-collections.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.main-list-collections.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.main-list-collections.settings.columns_mobile.options__2.label"
}
],
"default": "2",
"label": "t:sections.main-list-collections.settings.columns_mobile.label"
}
]
}
{% endschema %}

 

To assign the link, just go to the theme editor, you should see the settings for collection list

 

Copied!
Voltar para o blogue

Deixe um comentário