I have had a lot of clients that have wanted to display CTA’s between the posts on the blog listing page. In this post I will show you a quick and easy way to do it. The code might look a bit different on your page, therefore these steps requires some understanding of HTML/HubL – otherwise your page might break. If you would like to apply this to your blog but don’t have the knowledge to implement it yourself, feel free to reach out to me and I will help you.

Start by navigating to your blog listing template and click edit listing template. Click on the images for enlarged versions.

All the code for the blog listing will appear.  Find the code where the blog posts are declared (and find where the declaration ends). In my case it starts with 

<div class="post-item list-post-item">

so I will look for the

</div>

for that class.

On the next row you want to add the following code:

{% if loop.index == 5 %}
     <div class="blog-listing-cta">
 
     </div>
  {% endif %}

This means that there will appear a CTA after the 5^th blog post. I will go through different options later in this post. I also added a div class, that way you can style the CTA (margins, paddings, borders etc.)

Next, you want to navigate to the CTA button you want to add (Content -> Calls-to-Action). Once you find the right CTA, click the arrow to the right and choose Embed. A popup with code will show up – copy all of the code.

Then simply just add the code you just copied between the div declaration you added to the blog listing code . The code should look something similar to this:

Done! Save and check if it works.

 
As I mentioned, the code

{% if loop.index == 5 %} 

displays a CTA once after the 5^th post. As you probably have figured out, the 5 is how many posts there are before the CTA.
If you want to display the CTA e.g. after every third post, use

{% if loop.index % 3 == 0 %}

instead.
Instead of displaying the same CTA every X post, you might want to display different CTAs. You can do this by using pretty much the same code for both – just change the number after how many posts the CTA will be displayed, the div class (if you’re going to have different styling, otherwise you can use the same class) and the CTA code.

{% if loop.index == 3 %}

     <div class="blog-listing-cta">

Add code for the first CTA here

     </div>

  {% endif %}

 

{% if loop.index == 6 %}

     <div class="blog-listing-cta">

Add code for the second CTA here

     </div>

  {% endif %}

If you have any questions about this or if you have problems getting it to work, feel free to contact me.