css - Rendering Product in Shopify Blog Post Article using card-product.liquid

I'm trying to show products card inside blog posts / articles of shopify. I've edited main-article.liquid so that when the content of an article is rendered, it checks the content for a particular string and then splits the code. if a split has occurred than it isolates the handle of the product.

then it will need to render the product based on the product handle as a card-product. card-product is the element in which a product is show in a collection ( as in a catalog list )

though I cannot render the product but just a dummy element as in this

I've followed 2 tutorials to get this far: happypoint (https://happypoints.io/blog/shopify-add-products-to-blog-post-c2-stt-66/#:%7E:text=From%20your%20Shopify%20admin%2C%20go%20to%20Products%20%3E%20All%20products.,Copy%20the%20product%20handle.) thefunction (https://thefunction.works/how-to-add-product-blocks-inside-your-blog-using-nothing-but-liquid-shopify/)

the first one is using a snippet that is not present in my theme ( dawn ) but also adding it just to se some results brings out same missing content problem but in a different design.

Copy code

    {%- when 'content'-%}
          <div class="article-template__content page-width page-width--narrow rte" itemprop="articleBody" {{ block.shopify_attributes }}>

             {% assign divider = '[PROD]' %}
    {% assign dividerClose = '[/PROD]' %}
    {% assign text = article.content | split: divider %} 

    {{ text[0] }}

    {% for divider in text offset:1 %}
     {% assign x = forloop.index %}
    {% assign newtext = text[x] | split: dividerClose %}
    {% assign productHandle = newtext[0] %}                        
    {% assign product = all_products[productHandle] %}  
     <div class="product_item">
                       {% render 'card-product',
                  
                    media_aspect_ratio: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id

                  %}
                     </div>
    {{ newtext[1] }}

    {% endfor %}

            
          </div>
Copy code

Copy code

How can I render the product as a card-product.liquid?

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.