Hoe maak je subcollecties in je collectie pagina in Shopify?

‍

‍

‍

Maak collectie list theme section

Maak collection metafield aan

• Name: Subcollection List
• Namespace and key: custom.subcollection_list
• Type: List of collections

Maak nieuw section collection-list-custom.liquid

‍

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

{%- style -%}
.section-{{ section.id }}-padding {
 padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
 padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
 .section-{{ section.id }}-padding {
   padding-top: {{ section.settings.padding_top }}px;
   padding-bottom: {{ section.settings.padding_bottom }}px;
 }
}
{%- endstyle -%}

{%- liquid
 assign subcollections_info = collection.metafields.custom.subcollection_list.value | parse_json
 assign columns_mobile_int = section.settings.columns_mobile | plus: 0
 assign show_mobile_slider = false
 if section.settings.swipe_on_mobile and subcollections_info.size > columns_mobile_int
   assign show_mobile_slider = true
 endif
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
 <div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
   <slider-component class="slider-mobile-gutter">
     <ul class="collection-list contains-card contains-card--collection grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %}">
       {%- for subcollection in subcollections_info -%}
         {%- assign current_collection = collections[subcollection.handle] -%}
         {%- if current_collection -%}
           <li class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}">
             {% render 'card-collection',
               card_collection: current_collection,
               media_aspect_ratio: section.settings.image_ratio,
               columns: section.settings.columns_desktop
             %}
           </li>
         {%- endif -%}
       {%- endfor -%}
     </ul>
   </slider-component>
 </div>
</div>

{% schema %}
{
 "name": "Collection List Custom",
 "tag": "section",
 "class": "section section-collection-list",
 "max_blocks": 15,
 "disabled_on": {
   "groups": ["header", "footer"]
 },
 "settings": [
   {
     "type": "select",
     "id": "image_ratio",
     "options": [
       {
         "value": "adapt",
         "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
       },
       {
         "value": "portrait",
         "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
       },
       {
         "value": "square",
         "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
       }
     ],
     "default": "square",
     "label": "t:sections.collection-list.settings.image_ratio.label",
     "info": "t:sections.collection-list.settings.image_ratio.info"
   },
   {
     "type": "range",
     "id": "columns_desktop",
     "min": 1,
     "max": 5,
     "step": 1,
     "default": 3,
     "label": "t:sections.collection-list.settings.columns_desktop.label"
   },
   {
     "type": "color_scheme",
     "id": "color_scheme",
     "label": "t:sections.all.colors.label",
     "info": "t:sections.all.colors.has_cards_info",
     "default": "background-1"
   },
   {
     "type": "checkbox",
     "id": "show_view_all",
     "default": false,
     "label": "t:sections.collection-list.settings.show_view_all.label"
   },
   {
     "type": "header",
     "content": "t:sections.collection-list.settings.header_mobile.content"
   },
   {
     "type": "select",
     "id": "columns_mobile",
     "options": [
       {
         "value": "1",
         "label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
       },
       {
         "value": "2",
         "label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
       }
     ],
     "default": "1",
     "label": "t:sections.collection-list.settings.columns_mobile.label"
   },
   {
     "type": "checkbox",
     "id": "swipe_on_mobile",
     "default": false,
     "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
   },
   {
     "type": "header",
     "content": "t:sections.all.padding.section_padding_heading"
   },
   {
     "type": "range",
     "id": "padding_top",
     "min": 0,
     "max": 100,
     "step": 4,
     "unit": "px",
     "label": "t:sections.all.padding.padding_top",
     "default": 36
   },
   {
     "type": "range",
     "id": "padding_bottom",
     "min": 0,
     "max": 100,
     "step": 4,
     "unit": "px",
     "label": "t:sections.all.padding.padding_bottom",
     "default": 36
   }
 ],
 "blocks": [
   {
     "type": "featured_collection",
     "name": "t:sections.collection-list.blocks.featured_collection.name",
     "settings": [
       {
         "type": "collection",
         "id": "collection",
         "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
       }
     ]
   }
 ],
 "presets": [
   {
     "name": "Collections List Custom"
   }
 ]
}
{% endschema %}


‍

Voeg code toe in main-collection-product-grid.liquid

Alleen producten grid laten zien wanneer er producten in de collectie zijn.

{% if collection.all_products_count > 0 %}

... rest of code...

{% endif %}

‍