Where you can achieve what your competitors can’t

Sub Collection Section for Shopify

This custom code is completely free to use, but please note it does not include 1-on-1 technical support. If you need a bespoke, done-for-you solution to customize your Shopify store, my team is here to help! Head to my channel homepage and use the link in the trailer to reach out.

{%- comment -%}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{%- endcomment -%}

{%- style -%}
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} {
    background-color: var(--onhow-studio-bg);
    color: var(--onhow-studio-text);
    padding-top: {{ section.settings.onhow_studio_padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.onhow_studio_padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} {
      padding-top: {{ section.settings.onhow_studio_padding_top }}px;
      padding-bottom: {{ section.settings.onhow_studio_padding_bottom }}px;
    }
  }

  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} * {
    box-sizing: border-box;
  }

  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} p,
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} h1,
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} h2,
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} h3,
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} ul {
    margin: 0;
    padding: 0;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-inner {
    --onhow-studio-nc-gap: {{ section.settings.onhow_studio_grid_gap }}px;
    --onhow-studio-nc-cols-desktop: {{ section.settings.onhow_studio_columns_desktop }};
    --onhow-studio-nc-cols-mobile: {{ section.settings.onhow_studio_columns_mobile }};
    --onhow-studio-nc-max-width: {{ section.settings.onhow_studio_container_width }}px;
    max-width: var(--onhow-studio-nc-max-width);
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-header {
    text-align: {{ section.settings.onhow_studio_text_alignment }};
    margin-bottom: 3rem;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-heading {
    margin: 0 0 1rem 0;
    color: var(--onhow-studio-text);
    font-size: {{ section.settings.onhow_studio_heading_size }}px;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-description {
    margin: 0;
    opacity: 0.8;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-grid {
    display: grid;
    grid-template-columns: repeat(var(--onhow-studio-nc-cols-mobile), 1fr);
    gap: var(--onhow-studio-nc-gap);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  @media screen and (min-width: 768px) {
    #shopify-section-{{ section.id }} .onhow-studio-nc-grid {
      grid-template-columns: repeat(var(--onhow-studio-nc-cols-desktop), 1fr);
    }
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: {{ section.settings.onhow_studio_border_radius }}px;
    overflow: hidden;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-card-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f4f4f4;
    aspect-ratio: {{ section.settings.onhow_studio_image_ratio }};
    border-radius: {{ section.settings.onhow_studio_border_radius }}px;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-card:hover .onhow-studio-nc-card-image {
    transform: scale(1.05);
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-placeholder-svg {
    width: 100%;
    height: 100%;
    fill: #ccc;
    background-color: #f8f8f8;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-card-content {
    padding-top: 1.5rem;
    text-align: {{ section.settings.onhow_studio_text_alignment }};
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-card-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--onhow-studio-text);
    transition: opacity 0.2s ease;
  }

  #shopify-section-{{ section.id }} .onhow-studio-nc-card:hover .onhow-studio-nc-card-title {
    opacity: 0.7;
  }
{%- endstyle -%}

<div class="onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }}" style="--onhow-studio-bg: {{ section.settings.onhow_studio_bg_color }}; --onhow-studio-text: {{ section.settings.onhow_studio_text_color }};">
  <div class="onhow-studio-nc-inner">

    {%- if section.settings.onhow_studio_heading != blank or section.settings.onhow_studio_description != blank -%}
      <div class="onhow-studio-nc-header">
        {%- if section.settings.onhow_studio_heading != blank -%}
          <h2 class="onhow-studio-nc-heading">{{ section.settings.onhow_studio_heading | escape }}</h2>
        {%- endif -%}
        {%- if section.settings.onhow_studio_description != blank -%}
          <div class="onhow-studio-nc-description">{{ section.settings.onhow_studio_description }}</div>
        {%- endif -%}
      </div>
    {%- endif -%}

    <div class="onhow-studio-nc-grid">
      {%- if section.settings.onhow_studio_collection_list != blank -%}
        {%- for collection in section.settings.onhow_studio_collection_list -%}
          <a href="{{ collection.url }}" class="onhow-studio-nc-card">
            <div class="onhow-studio-nc-card-image-wrapper">
              {%- if collection.featured_image != blank -%}
                {{ collection.featured_image | image_url: width: 800 | image_tag:
                  class: 'onhow-studio-nc-card-image',
                  loading: 'lazy',
                  alt: collection.title
                }}
              {%- else -%}
                {{ 'collection-1' | placeholder_svg_tag: 'onhow-studio-nc-placeholder-svg' }}
              {%- endif -%}
            </div>
            <div class="onhow-studio-nc-card-content">
              <h3 class="onhow-studio-nc-card-title">{{ collection.title }}</h3>
            </div>
          </a>
        {%- endfor -%}
      {%- else -%}
        {%- for i in (1..section.settings.onhow_studio_columns_desktop) -%}
          <div class="onhow-studio-nc-card">
            <div class="onhow-studio-nc-card-image-wrapper">
              {%- capture current -%}{%- cycle 1, 2, 3, 4, 5, 6 -%}{%- endcapture -%}
              {{ 'collection-' | append: current | placeholder_svg_tag: 'onhow-studio-nc-placeholder-svg' }}
            </div>
            <div class="onhow-studio-nc-card-content">
              <h3 class="onhow-studio-nc-card-title">Example Sub-Collection</h3>
            </div>
          </div>
        {%- endfor -%}
      {%- endif -%}
    </div>

  </div>
</div>

<script>
  (function(){
    const onhowStudioCredit = atob("RGVzaWduZWQgYnkgT05IT1cgU3R1ZGlvIC0gU3Vic2NyaWJlIQ==");
    console.log(`%c ${onhowStudioCredit}`, 'background: #222; color: #00ff00; padding: 4px; border-radius: 4px;');
  })();
</script>

{%- comment -%}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{%- endcomment -%}

{% schema %}
{
  "name": "Nested Collections",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "header",
      "content": "✨ Built by ONHOW Studio"
    },
    {
      "type": "paragraph",
      "content": "Get free sections & tutorials at youtube.com/@ONHOWStudio"
    },
    {
      "type": "text",
      "id": "onhow_studio_core_logic",
      "label": "Section Architecture (Do Not Edit)",
      "default": "built-by-onhow-studio",
      "info": "Modifying this will break the section's CSS layout."
    },
    {
      "type": "header",
      "content": "― Core Settings ―"
    },
    {
      "type": "color",
      "id": "onhow_studio_bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "onhow_studio_text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "onhow_studio_heading",
      "default": "Shop by Category",
      "label": "Heading"
    },
    {
      "type": "range",
      "id": "onhow_studio_heading_size",
      "min": 16,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Heading Font Size",
      "default": 32
    },
    {
      "type": "richtext",
      "id": "onhow_studio_description",
      "label": "Description"
    },
    {
      "type": "collection_list",
      "id": "onhow_studio_collection_list",
      "label": "Nested Collections",
      "info": "Select the sub-categories you want to display on this page."
    },
    {
      "type": "header",
      "content": "Layout & Grid"
    },
    {
      "type": "range",
      "id": "onhow_studio_container_width",
      "min": 800,
      "max": 1600,
      "step": 50,
      "unit": "px",
      "label": "Max Container Width",
      "default": 1200
    },
    {
      "type": "select",
      "id": "onhow_studio_text_alignment",
      "label": "Text Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "onhow_studio_columns_desktop",
      "min": 2,
      "max": 6,
      "step": 1,
      "label": "Columns on Desktop",
      "default": 4
    },
    {
      "type": "select",
      "id": "onhow_studio_columns_mobile",
      "label": "Columns on Mobile",
      "options": [
        { "value": "1", "label": "1 Column" },
        { "value": "2", "label": "2 Columns" }
      ],
      "default": "2"
    },
    {
      "type": "range",
      "id": "onhow_studio_grid_gap",
      "min": 8,
      "max": 40,
      "step": 4,
      "unit": "px",
      "label": "Spacing Between Cards",
      "default": 24
    },
    {
      "type": "select",
      "id": "onhow_studio_image_ratio",
      "label": "Image Aspect Ratio",
      "options": [
        { "value": "1 / 1", "label": "Square (1:1)" },
        { "value": "3 / 4", "label": "Portrait (3:4)" },
        { "value": "4 / 3", "label": "Landscape (4:3)" },
        { "value": "auto", "label": "Adapt to image" }
      ],
      "default": "3 / 4"
    },
    {
      "type": "range",
      "id": "onhow_studio_border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Card Border Radius",
      "default": 8
    },
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "range",
      "id": "onhow_studio_padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top Padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "onhow_studio_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom Padding",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "Nested Collections (By ONHOW Studio)"
    }
  ]
}
{% endschema %}