How to add a blog description with metafields

This article might be outdated

Please follow the link below for the latest and up-to-date version of this guide.

Caution: This is an advanced tutorial and is not supported by Shopify. This tutorial has been verified to work with Debut theme only. You can try to implement this on your theme, but keep in mind that it may not function. Knowledge of technologies such as HTML, CSS, JavaScript, and Shopify Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Many Shopify themes, including the beloved default theme called Debut, do not provide the user with the ability to add a description to the blog. That's pretty sad, but don't worry, the metafields can help you to fix this issue :)

We've created a step-by-step instruction for you showing how to add the custom description to the blog using the metafields and some Shopiyf Liquid manipulations.

First of all, we need to create a metafield to store our custom description:

Once the metafiled is created, click the "Copy Liquid code" button and save the output - we'll need it for the future step.

Then, you need to find the blog page template file. Go to "Online Store" and select the theme to modify:

Next, you need to find your blog template file. Depending on the internal structure of your theme, this file is called either "Sections/blog-template.liquid" or "Templates/blog.liquid". The file you need to edit must contain the actual page code: header, posts list etc. In our case, with the default Shopify theme, this file is called "Sections/blog-template.liquid".

Go to the file, find the spot to place your custom description with this code and save your changes.

    <!-- code to display the custom blog description starts here -->
    <div class="custom-blog-description">
      {{ blog.metafields.custom-design.brief-description }}
    </div>
    <!-- code to display the custom blog description ends here -->

Important note: don't forget to replace "{{ blog.metafields.custom-design.brief-description }}" with the code you generated earlier for your own metafield (this code is key and namespace sensitive). Don't worry about the blogs without the description, their template won't be affected if the metafiled used in our custom code is not populated.

We decided to place this description right under the blog title:

And that's all :)

Now we can go to our blog and see the result:

And here is the link to our test store, if you want to see it in action: https://metafields-guru-demo-store.myshopify.com/blogs/blog-with-custom-description