Related Product Articles has been renamed to Related Product Blog Posts
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 log a ticket with us
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.
- 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.
- Log on to you Shopify store (if you havent already) via https://<yourstorename>.myshopify.com/admin
- This will take you to your stores Dashboard.
- In the lower left hand side you will see an option called 'Online Store'. Click on it
- It will expand to present further options. Click on the option titled 'Theme'
- We recommend you Backup your Theme - if you are not sure how, then follow these instructions here
- From the 'Actions' menu, select the 'Edit HTML/CSS' option
- This will load the Theme editor window
- In the left hand pane are all your assets and liquid files that are required to run your store
- 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
- 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' %}
- Click on the 'Save' button.
- 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!
