Pro Blogger: Install Liquid Code for Related Product Articles

Difficulty: Easy
Time to Implement: 20min

This article provides the step by step instructions for making the necessary changes to your Shopify theme to enable the Related Product Articles slider feature of the Pro Blogger Application.

This guide is demonstrated on the default Debut theme. Themes differ and if you require more customised assistance in installing to your theme, then please check in with us via the ‘Forums

The “General Install” section is the same for installing the Related Products, Related Articles, Pinterest and Image Captions features. So if you have already completed that – then go straight to the next section “Place the Slider“!

General Install

  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. Under the Layout folder you will see a file called ‘theme.liquid’. Click on it
  10. After the <head> tag and before the </head> tag paste the following text.
    {% include ‘pro-blogger-section-wrapper’ %}
  11. It should look like the following
  12. Click on the Save button in the right hand corner.
  13. Congratulations – you have finished “General Install

Placing the Slider

Where you decide to place the slider will ultimately depend on your themes layout and how you want it to look. For the purposes of this instruction we will be placing the slider under the main article content. In this example we will be using the Debut theme – if you need help with your own theme install then reach out to us via our Forums.

  1. A snapshot of what the Product looks like before we add the Related Articles slider. Note there is nothing between the product description of the green apple and the social sharing icons.
  2. Log on to you Shopify store (if you havent already) via https://<yourstorename>.myshopify.com/admin
  3. This will take you to your stores Dashboard.
  4. In the lower left hand side you will see an option called ‘Online Store’. Click on it
  5. It will expand to present further options. Click on the option titled ‘Theme’
  6. We recommend you Backup your Theme – if you are not sure how, then follow these instructions here
  7. From the ‘Actions’ menu, select the ‘Edit HTML/CSS’ option
  8.  This will load the Theme editor window
  9. In the left hand pane are all your assets and liquid files that are required to run your store
  10. For the Debut theme we will be editing the ‘product-template.liquid’ file under the ‘Sections’ folder . For older themes edit the ‘product.liquid’ file under the ‘Templates’ folder. Click on the file to open the editor
  11. Add the following line where you want the slider to be placed. In this case we are adding under the {{ product.description }} so that the articles are displayed under the product information {% include ‘pro-blogger.snippet.related-product-articles’ %}
  12. Click on the ‘Save’ button.
  13. The Related Product Articles slider has now been installed and assuming you actually have products related to your article then are officially good to go!
  14. To understand how to setup the relationships click here

Was this article helpful?

Related Articles