Pro Blogger: Install Liquid Code for Author Features

Difficulty: Intermediate
Time to Implement: 45min

This article provides the step by step instructions for making the necessary changes to your Shopify theme to enable Author Features of the Pro Blogger Application.

This guide is demonstrated on the default Debut theme. The reason for this Article being ranked as ‘Intermediate’ is because themes differ and you may need to make more or less changes in a number of places to support this feature. If you require more customised assistance in installing to your theme, then please check in with us via the forums.

Updating your Article Page

This will be so the your substituted Author is displayed on your blog page.

  1. Log on to you Shopify store (if you havent already) via https://<yourstorename>.myshopify.com/admin
  2. This will take you to your stores Dashboard.
  3. In the lower left hand side you will see an option called ‘Online Store’. Click on it
  4. It will expand to present further options. Click on the option titled ‘Theme’
  5. We recommend you Backup your Theme – if you are not sure how, then follow these instructions here
  6. From the ‘Actions’ menu, select the ‘Edit HTML/CSS’ option
  7.  This will load the Theme editor window
  8. In the left hand pane are all your assets and liquid files that are required to run your store
  9. For the Debut theme we will be editing the ‘article-template.liquid’ file under the ‘Sections’ . For older themes edit the ‘article.liquid’ file under the ‘Templates’ folder. Click on the file to open the editor
  10. At the top of the file before any other text – add the following line of code as demonstrated below.
    {% include ‘pro-blogger.shortcode-wrapper’ %}
  11. The next step is to replace all instances of {{ article.content }} with {{ article_contents }} as per below.
  12. Now replace all instances of of {{ article.author }} with {{ newauthor }} as per below.
  13. Click on the Save button in the right hand corner.
  14. You have completed updating your Articles template!

To replace your Author section with a feature rich Authorbox.

  1. Locate where your original author details are by searching for {{ article.author }} or {{ newauthor }} then insert the following lines of code. As per the image below
    {% if authorupdate %}
    {% include ‘pro-blogger.snippet.authorbox’ %}
    {% else %}
    …existing author code…
    {% endif %}

Updating your Blogs

This is so when you display a grid of your blogs it shows the substituted Author.

  1. Repeat steps 1-8 from the previous section
  2. For the Debut theme we will be editing the ‘blog-template.liquid’ file under the ‘Sections’ . For older themes edit the ‘blog.liquid’ file under the ‘Templates’ folder.
  3. After each line that contains {% for article.blog.articles %} – add the following line of code as demonstrated below. (In the Debut theme – there are two locations at lines 21 and 102)
    {% include ‘pro-blogger.shortcode-wrapper’ %}
  4. Scroll down and replace each instance of {{ article.author }} with {{ newauthor }} as per below.
  5. Scroll down and replace each instance article.content  with article_contents as per below.
  6. Click the ‘Save’ button to commit your changes.

Updating your Feature Blog Section

This is particular to new themes such as the Debut default theme where this section is used to display a featured Blog on the home page.

  1. Repeat steps 1-8 from the previous section
  2. For the Debut theme we will be editing the ‘featured-blog.liquid’ file under the ‘Sections’ folder. Click on that file.
  3. After the line that contains {% for article.blog.articles %} – add the following line of code as demonstrated below.
    {% include ‘pro-blogger.shortcode-wrapper’ %}
  4. Scroll down and – you guessed it – replace the each instance of {{ article.author }} with {{ newauthor }} . Then replace each instance of article.content  with article_contents as per below. 
  5. Click the ‘Save’ button and you are done!!

Was this article helpful?

Related Articles