To place the Related Product Slider within the middle of your blog post is a very simple process.


  • First make sure you are using the latest version of the application by loading it. This will refresh and install new and existing assets.
  • Open the liquid file where you originally placed the {% include 'pro-blogger.snippet.related-products' %} snippet. 
  • Look for the {{ article.content }} code reference


For example

  • Replace with the following

{% comment %}

{{ article.content }}

{% endcomment %}

{% include 'pro-blogger.snippet.related-products-mid' %}


For example:

  • Make sure you also remove the original {% include 'pro-blogger.snippet.related-products' %} snippet.
  • Click Save

The Related Product Slider will now appear in middle of your Blog Post content. 


This position is determined by halving the number of paragraphs there are in your post and the placing after that rounded number.



To adjust its position from the default middle you can use a short code in the blog post's content.


  • Open the blog post in the Shopify editor and click on the Show HTML button

  • This will load the HTML content that makes up your blog post
  • Find a new location after or before the existing <p>..</p> tags and insert the following code

<!-- related products -->


  • Click Save.
  • The Slider will now render where you placed the short code between the paragraphs.