First iteration of for loop products in metafield not running as intended in custom block help

Retired Boards Appdev Metafields
,

Topic summary

A developer is building a custom blog post block to display related products in a grid layout, similar to a featured collection section. The products are pulled from article metafields and should allow customers to add items to cart directly.

The Issue:

  • The first product in the for loop doesn’t render as a <li> element, causing inconsistent formatting
  • Product card sizes are not cohesive despite copying code from the official theme
  • The first item appears slimmer than subsequent products

Code Provided:
The developer shared their Liquid template code, which loops through article.metafields.product_info.related_products and renders product cards using the 'product-card' snippet.

Response:
A community member requested clearer troubleshooting information:

  • Clarify whether this is a Liquid logic error or CSS styling issue
  • Provide inspectable resources or live output examples
  • Create a reduced test case with minimal code to isolate the problem
  • Test the rendered HTML first, then address CSS issues
  • Use a layout-less page or custom liquid section for faster testing

The discussion remains open, awaiting additional details from the original poster to diagnose the root cause.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

So I have a recipes blog and I wanted each blogpost template to have a custom block under blog page section that is a grid card layout pretty much exactly how the featured collection section works. This is to link the products used in that recipe to the products page in my shop, and allow for customers to easily add the product (s) to cart without needing to back out and search for said product. It works, but the look of it is strange and for somereason the first iteration of the for loop does not classify the first product in the array as a

  • first so the format is off from every other item and it appears slimmer. I saw this through inspecting it and despite copying the code from the official theme which does not have the issue the sizes are also not cohesive and i would like to be able to have it look like typical product cards.

    Here is my code, any help is greatly appreciated!

    <article class="article-template">
  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when 'related_products' -%}
        {% if article.metafields.product_info.related_products %}
          {% assign relatedproducts = article.metafields.product_info.related_products.value %}
            <p
              class="related-products-heading" 
              style="font-size: {{block.settings.heading_font_size}}px; 
              color: {{block.settings.heading_color}};"
              >
              {{ block.settings.heading }}
            </p>        
            <div class= "product-grid-container"
            id="ProductGridContainer"
            >
              <div class="related-products page-width">
                <div class="loading-overlay gradient"></div>
                <ul
                  id="product-grid"
                  data-id="{{ section.id }}"
                  class="grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
                  grid--{{ section.settings.columns_desktop }}-col-desktop
                  {% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %}"
                  {% for prod in relatedproducts %}
                    <li
                      class="grid__item"
                    >
                      {% render 'card-product',
                        card_product: prod,
                        media_aspect_ratio: section.settings.image_ratio,
                        image_shape: section.settings.image_shape,
                        show_secondary_image: section.settings.show_secondary_image,
                        show_vendor: section.settings.show_vendor,
                        show_rating: section.settings.show_rating,
                        quick_add: block.settings.quick_add,
                        section_id: section.id
                      %}
                    </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
        {% endif %}
    • 2

    Hi @webdev100 :waving_hand: These steps can be abrasive but I guarantee they save TONS of time and even more sanity.

    Troubleshooting & communications 101 , don’t bury the lede, start with a clear sentence for the error or question.

    Then a description. As is , it’s not clear if there’s only some liquid logic error , or your asking for unseen CSS styling fixes, etc.

    On first glance nothing stands out as wrong about the code, so could be the website but you also haven’t provide any inspectable resources of the output for your specific setup to be able to evalute.

    READ: https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408 , or https://meta.stackexchange.com/questions/18584/how-to-ask-a-smart-question

    Code troubleshooting 101, make a reduced test case to check the logic and data is as expected.

    Get rid of as much cruft as possible like the outer conditions and html.

    Use in a layout-less page, or a oage with only a custom-liquid section for faster testing on live stores.

    Then test the rendered snippet, then build up the actual designs html , then find CSS issues.

    {% liquid
  if article.metafields.product_info.related_products
    assign relatedproducts = article.metafields.product_info.related_products.value
    for prod in relatedproducts
        prod | JSON
    endfor
  endif
%}

    Good Hunting.