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 log a ticket and we will help you. 


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'
  7. We recommend you Backup your Theme - if you are not sure how, then follow these instructions here
  8. From the 'Actions' menu, select the 'Edit HTML/CSS' option
  10.  This will load the Theme editor window
  11. In the left hand pane are all your assets and liquid files that are required to run your store
  12. 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
  14. 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' %}
  15. Click on the 'Save' button.
  16. The Related Articles slider has now been installed and assuming you actually have articles related to your article then are officially good to go!