Pro Blogger: Install Liquid Code for Related Products

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 Products 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 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 our article looks like before we add the Related Products slider. Note there is nothing between the last image 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 ‘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
  11. Add the following line where you want the slider to be placed. In this case we are adding under the article.content
    {% include ‘pro-blogger.snippet.related-products’ %}
  12. Click on the ‘Save‘ button.
  13. The Related Articles slider has now been installed and assuming you actually have articles related to your article then are officially good to go!  To understand how to setup the relationships click here or if you need guidance on the settings for the Related Products click here.

Was this article helpful?

Related Articles