Añadir artículos personalizados en collections Shopify

Veamos paso a paso cómo añadir artículos personalizados en collections:

1. Crear section: collection-blog-posts.liquid

<section class="Section Section--spacingNormal" id="section-{{ section.id }}" data-section-type="article-list" data-section-id="{{ section.id }}">
  <div class="Container">
    {%- if section.settings.subheading != blank or section.settings.title != blank -%}
      <header class="SectionHeader SectionHeader--center">
        {%- if section.settings.subheading != blank -%}
          <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3>
        {%- endif -%}

        {%- if section.settings.title != blank -%}
          <h2 class="SectionHeader__Heading Heading u-h1">{{ section.settings.title | escape }}</h2>
        {%- endif -%}
      </header>
    {%- endif -%}

    {%- assign show_placeholders = true -%}

    <div class="ArticleListWrapper">
      <div class="ArticleList Grid Grid--m Grid--center">
        {%- assign block = section.blocks.first -%}

        {%- case block.type -%}
          {%- when 'article' -%}
            {%- for i in (1..3) -%}
              {%- assign article_option = 'article_' | append: i -%}
              {% if collection.metafields.custom_blog[article_option] != blank %}
                {%- assign article = articles[collection.metafields.custom_blog[article_option]] -%}
              {% else %}
                {%- assign article = articles[block.settings[article_option]] -%}
              {% endif %}

              {%- unless article == empty -%}
                <div class="Grid__Cell 1/2--tablet 1/3--lap-and-up {% if forloop.index == 3 %}hidden-tablet{% endif %}">
                  {%- render 'article-item', block: block, article: article -%}
                </div>

                {%- assign show_placeholders = false -%}
              {%- endunless -%}
            {%- endfor -%}

          {%- when 'blog' -%}
            {% if blog.metafields.custom_blog.blog != blank %}
              {%- assign blog = blogs[blog.metafields.custom_blog.blog] -%}
            {% else %}
              {%- assign blog = blogs[block.settings.blog] -%}
            {% endif %}
              
            {%- for article in blog.articles limit: 3 -%}
              <div class="Grid__Cell 1/2--tablet 1/3--lap-and-up {% if forloop.index == 3 %}hidden-tablet{% endif %}">
                {%- render 'article-item', block: block, article: article -%}
              </div>

              {%- assign show_placeholders = false -%}
            {%- endfor -%}
        {%- endcase -%}

        {%- if show_placeholders -%}
          {%- for i in (1..3) -%}
            <div class="Grid__Cell 1/2--tablet 1/3--lap-and-up {% if forloop.index == 3 %}hidden-tablet{% endif %}">
              <article class="ArticleItem">
                {%- capture placeholder -%}{% cycle 'lifestyle-1', 'lifestyle-2' %}{%- endcapture -%}

                <div class="ArticleItem__ImageWrapper AspectRatio" style="--aspect-ratio: 1.7">
                  {{ placeholder | placeholder_svg_tag: 'ArticleItem__Image PlaceholderBackground PlaceholderSvg--dark' }}
                </div>

                <div class="ArticleItem__Content">
                  {%- if section.settings.show_category -%}
                    <span class="ArticleItem__Category Heading u-h6 Text--subdued">{{ 'home_page.onboarding.article_category' | t }}</span>
                  {%- endif -%}

                  <h2 class="ArticleItem__Title Heading u-h2">
                    <a href="#">{{ 'home_page.onboarding.article_name' | t }}</a>
                  </h2>

                  <p class="ArticleItem__Excerpt">{{ 'home_page.onboarding.article_excerpt' | t }}</p>

                  <a href="#" class="ArticleItem__Link Link Link--underline">{{ 'blog.article.read_more' | t }}</a>
                </div>
              </article>
            </div>
          {%- endfor -%}
        {%- endif -%}
      </div>
    </div>

    {%- if section.settings.button_text != blank -%}
      <div class="SectionFooter">
        <a href="{{ section.settings.button_link }}" class="Button Button--primary">{{ section.settings.button_text | escape }}</a>
      </div>
    {%- endif -%}
  </div>
</section>

{% schema %}
{
  "name": "Collection Blog posts",
  "class": "shopify-section--bordered",
  "max_blocks": 3,
  "settings": [
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub-heading"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Blog posts"
    },
    {
      "type": "checkbox",
      "id": "show_category",
      "label": "Show article category",
      "info": "The first article's tag is used as the main category.",
      "default": false
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text",
      "default": "View all articles"
    }
  ],
  "blocks": [
    {
      "type": "article",
      "name": "Article",
      "settings": [
        {
          "type": "article",
          "id": "article_1",
          "label": "Article 1"
        },
        {
          "type": "article",
          "id": "article_2",
          "label": "Article 2"
        },
        {
          "type": "article",
          "id": "article_3",
          "label": "Article 3"
        }
      ]
    },
    {
      "type": "blog",
      "name": "Blog",
      "settings": [
        {
          "type": "blog",
          "id": "blog",
          "label": "Collection Blog"
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Blog",
      "name": "Blog posts",
      "settings": {},
      "blocks": [
        {
          "type": "blog",
          "settings": {
            "blog": "news"
          }
        }
      ]
    }
  ]
}
{% endschema %}

2. Añadir Section a collection.liquid
{% section ‘collection-blog-posts.liquid’ %}

3. En el Customizer de la plantilla collections ya se mostrara la nueva sección. Ahora solo tendremos que:

Add block > Article (sin seleccionar articulos)

*Para mostrar simplemente los últimos artículos > Add block > Blog (seleccionar categoría blog a mostrar)

4. Crear Metafields desde Settings

NAMESPACE AND KEY

custom_blog.article_1

custom_blog.article_2

custom_blog.article_3

Single line text > One value

5. Añadir handle posts en cada collection

Importante escribir handle desde categoria-blog/nombre-articulo sin / al principio