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

Shop1fries · ‎10-04-2023

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.

1. https://stackoverflow.com/questions/68777222/get-blog-name-from-id-in-shopify

2. https://shopify.dev/docs/api/liquid/objects#articles

3. https://community.shopify.com/c/shopify-design/how-to-embed-a-specific-blog-post-on-a-product-page/m...

4. https://community.shopify.com/c/technical-q-a/loop-through-all-articles-in-all-blogs/m-p/564893

5. https://community.shopify.com/c/technical-q-a/display-multiple-products-on-blog-post/m-p/1625950

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 screenshots:

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?