Ecommerce Shopify WordPress Discussion

How to change liquid code of Shopify blog post embed from H1 to blog post ID?

We have custom code on our Shopify Dawn theme website that allows us to embed a product or a blog post in another blog. This gives the reader of the blog a better experience as they can easily add the relevant products to their basket or click on a relevant blog to read more about that subject. Our developers chose to build this feature for the embedded products by using their product ID. However, for the embedded blog posts they linked it to the H1. Being linked to the H1 creates the following problem: when a blog post has been revamped and the H1 changed, the embed no longer works. Besides the H1 changes based on language, as our website is multilingual. Therefore I would like to change the unstable H1 value to the blog post ID that always remains unaltered and works in every language. I tried to find an answer online: I tried finding information about this subject, but I haven't really found an answer to what I'm looking for. I'm also not a pro and don't really know what I'm looking for. Get blog name from ID in Shopify https://shopify.dev/docs/api/liquid/objects#articles https://community.shopify.com/c/shopify-design/how-to-embed-a-specific-blog-post-on-a-product-page/m-p/1602579 https://community.shopify.com/c/technical-q-a/loop-through-all-articles-in-all-blogs/m-p/564893 https://community.shopify.com/c/technical-q-a/display-multiple-products-on-blog-post/m-p/1625950 EDIT: sorry I found more code: {% if article.content contains '<!-- blogpost1 -->' %} {%- paginate blogs[article.metafields.custom.blogpost1_category].articles by 500 -%} {% for articlee in blogs[article.metafields.custom.blogpost1_category].articles %} {% if articlee.title == article.metafields.custom.blogpost1_title %} {% assign art = articlee %} {% break %} {% endif %} {% endfor %} {% endpaginate %} {% capture blogpost1 %} {% render 'article-blogpost' , blog : art %} {% endcapture %} {% endif %} {% if article.content contains '<!-- upsell1 -->' %} {% assign product = article.metafields.custom.upsell_1.value %} {% capture firstUpsell %} {% render 'article-upsell' , product : product %} {% endcapture %} {% endif %} This is our embedded blog post liquid: <style> .blogpost_media img { width: 120px; height: 120px; object-fit: cover; } .date_and_author { font-size: 14px; letter-spacing: 1px; margin-top: 4px; } .date_and_author:nth-child(2) { text-transform: uppercase; } @media (max-width: 489px) { .blogpost_media img { width: 100px; height: 100px; } } </style> <div class="upsell-product"> <div class="hero-product flex-box"> <div class="hero-product-images-block"> <a href="{{ blog.url }}" class="blogpost_media"> <img src="{{ blog.image | img_url: "master" }}" alt="{{ blog.title }}" loading="lazy"> </a> </div> <div class="hero-product-text-block"> <div class="pro_name_price_wrap"> <div class="hero-row"> <div class="hero-col"> <a href="{{ blog.url }}" class="product-font product-title h3"> {{ blog.title }} </a> <div class="date_and_author"> <span>{{ blog.published_at | date: '%d/%m/%Y' }}</span> - <span>{{ blog.author }}</span> </div> </div> </div> </div> </div> </div> </div> This is our embedded product liquid: <style> .product__upsell__custom img { width: 120px; height: 120px; object-fit: cover; } @media (max-width: 489px) { .product__upsell__custom img { width: 100px; height: 100px; } } </style> <div class="upsell-product"> <div class="hero-product flex-box"> <div class="hero-product-images-block"> <a href="{{ product.url }}" class="product__upsell__custom"> <img src="{{ product.featured_image | img_url: "master" }}" alt="{{ product.title }}" loading="lazy"> </a> </div> <div class="hero-product-text-block"> <div class="pro_name_price_wrap"> <div class="hero-row"> <div class="hero-col"> <a href="{{ product.url }}" class="product-font product-title h2"> {{ product.title }} </a> </div> </div> <div class="hero-col product-prices"> {%- if product.compare_at_price != blank -%} <span class="product-compare-price save-money"> {{- product.compare_at_price | money_without_trailing_zeros | strip_html -}} </span> {%- endif -%} <span class="product-font product-price money"> {{ product.price | money_without_trailing_zeros | strip_html }} </span> </div> </div> <button class="add_blog_upsell button {% unless product.available %}no-avaliable{% endunless %}" data-variant="{{ product.selected_or_first_available_variant.id }}" > <span class=""> {%- if product.available %}{{ 'blogs.article.add_to_cart' | t }}{% else %}{{ 'blogs.article.sold_out' | t }}{% endif -%} </span> </button> <span id="success_message_{{product.selected_or_first_available_variant.id}}"></span> </div> </div> </div> This is how I have to enter the values in my blog post editor to insert these embeds: The upper line that says 'Blogpost ID embed' was added by me, but currently does nothing. To add an embedded blog post I have to enter the H1 and the blog catgory to get it to work. See screenshot and this one. Help? Does anyone know how I can relatively easily change the variable in the code to swap the H1 out for the blog post ID? How do I have to change this? How do I change my metafields to correctly work with the code?
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.