How to Display Bog Posts on a Page by its Tag? [Shopify]

Code mentioned in the video:

<section class="sj-blog-tagged-posts" id="sj-blog-tagged-posts-{{ section.id }}">
  {% liquid
    assign selected_blog = section.settings.blog
    assign required_tag = section.settings.tag | strip
    assign max_posts = section.settings.posts_to_show
  %}

  {% if selected_blog %}
    {% assign blog_obj = selected_blog %}
  {% else %}
    {% assign blog_obj = blog %}
  {% endif %}

  {% if blog_obj and required_tag != '' %}
    {% assign shown = 0 %}
    {% for article in blog_obj.articles %}
       
      {% if article.tags contains required_tag %}
        {% assign shown = shown | plus: 1 %}
      {% endif %}
    {% endfor %}

    {% if shown > 0 %}
      <header class="sj-blog-tagged-posts__header">
        <h2 class="sj-blog-tagged-posts__title">
          {{ section.settings.heading | default: required_tag | escape }}
        </h2>
        {% if section.settings.show_tag_badge %}
          <p class="sj-blog-tagged-posts__tag">
             {{ section.settings.description | default: required_tag | escape }}
          </p>
        {% endif %}
      </header>

      <div class="sj-blog-tagged-posts__grid sj-blog-tagged-posts__grid--columns-{{ section.settings.columns_desktop }}">
        {% assign rendered = 0 %}
        {% for article in blog_obj.articles %}
          {% if article.tags contains required_tag %}
            <article class="sj-blog-tagged-posts__item">
              <a href="{{ article.url }}" class="sj-blog-tagged-posts__link">
                {% if article.image %}
                      <div class="sj-blog-tagged-posts__image-wrap">
                  {{ article.image | image_url: width: 800 | image_tag: loading: 'lazy', class: 'sj-blog-tagged-posts__image' }}
                      </div>
                {% endif %}
                <div class="sj-blog-tagged-posts__content">
                  <h3 class="sj-blog-tagged-posts__item-title">{{ article.title | escape }}</h3>
                  {% if section.settings.show_date %}
                    <p class="sj-blog-tagged-posts__meta">
                      <time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">
                        {{ article.published_at | date: format: 'abbreviated_date' }}
                      </time>
                    </p>
                  {% endif %}
                  {% if section.settings.show_excerpt %}
                    <p class="sj-blog-tagged-posts__excerpt">
                      {{ article.excerpt_or_content | strip_html | truncatewords: 30 }}
                    </p>
                  {% endif %}
                </div>
              </a>
            </article>

            {% assign rendered = rendered | plus: 1 %}
            {% if rendered >= max_posts %}
              {% break %}
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>
    {% else %}
      <p class="sj-blog-tagged-posts__empty">
        No articles found for the tag "{{ required_tag | escape }}".
      </p>
    {% endif %}
  {% else %}
    <p class="sj-blog-tagged-posts__empty">
      Select a blog and enter a tag in the section settings to show filtered posts.
    </p>
  {% endif %}


  <div class="sj-blog-tagged-posts__footer">
  <a href="{{ blog_obj.url }}/tagged/{{ required_tag | handleize }}" class="sj-blog-tagged-posts__view-all">
    View All Posts
  </a>
</div>
</section>

{% stylesheet %}
  [id^="sj-blog-tagged-posts-"] {
    padding-block: 3rem;
    padding-inline: 1.5rem;
  }

  .sj-blog-tagged-posts__header {
    max-width: 60rem;
    margin-inline: auto;
    margin-bottom: 2rem;
    text-align: center;
  }

  .sj-blog-tagged-posts__title {
    margin: 0 0 0.5rem;
  }

  .sj-blog-tagged-posts__tag {
    margin: 0;
    opacity: 0.6;
  }

  .sj-blog-tagged-posts__tag-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: currentColor;
    color: inherit;
    opacity: 0.08;
  }

  .sj-blog-tagged-posts__grid {
    display: grid;
    gap: 1.5rem;
  }

  .sj-blog-tagged-posts__item {
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--color-background, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .sj-blog-tagged-posts__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

 .sj-blog-tagged-posts__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.sj-blog-tagged-posts__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
  .sj-blog-tagged-posts__content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
  }

  .sj-blog-tagged-posts__item-title {
    margin: 0;
  }

  .sj-blog-tagged-posts__meta {
    margin: 0;
    opacity: 0.5;
  }

  .sj-blog-tagged-posts__excerpt {
    margin: 0;
    opacity: 0.7;
  }

  .sj-blog-tagged-posts__empty {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
    opacity: 0.5;
  }

  .sj-blog-tagged-posts__footer {
  text-align: center;
  margin-top: 4rem;
}

.sj-blog-tagged-posts__view-all {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  opacity: 0.8;
}

.sj-blog-tagged-posts__view-all:hover {
  opacity: 1;
}

  @media (min-width: 768px) {
    [id^="sj-blog-tagged-posts-"] {
      padding-inline: 2.5rem;
    }

    .sj-blog-tagged-posts__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    [id^="sj-blog-tagged-posts-"] {
      padding-inline: 4rem;
    }

    .sj-blog-tagged-posts__grid--columns-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sj-blog-tagged-posts__grid--columns-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Blog posts by tag",
  "settings": [
    {
      "type": "header",
      "content": "Blog filtering"
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "Blog"
    },
    {
      "type": "text",
      "id": "tag",
      "label": "Tag to filter by",
      "info": "Enter a single tag. Only posts containing this tag will be shown.",
      "default": "featured"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading (optional)",
      "default": "Show Only Blogs with Matching Tag"
    },
    {
      "type": "text",
      "id": "description",
      "label": "Description",
      "default": "Display only blogs tagged with certain tag"
    },
    {
      "type": "range",
      "id": "posts_to_show",
      "label": "Number of posts to show",
      "min": 1,
      "max": 12,
      "step": 1,
      "default": 4
    },
    {
      "type": "select",
      "id": "columns_desktop",
      "label": "Columns on desktop",
      "options": [
        { "value": "2", "label": "2" },
        { "value": "3", "label": "3" },
        { "value": "4", "label": "4" }
      ],
      "default": "3"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "label": "Show article date",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_excerpt",
      "label": "Show article excerpt",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_tag_badge",
      "label": "Show tag label above grid",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Blog posts by tag",
      "category": "Blog"
    }
  ]
}
{% endschema %}