How to build a call to action button in blog posts

Technical Q&A
1

I am using debut theme.

By default, there is a “back to blogs” button at the bottom of the page as shown in the first photo.

But I want to add a section above the “back to blogs” button and below the social media icons that will direct people to the next post, like the one shown in the second photo.

The section should include a call to action button “up next” and a picture of the next blog and the excerpt.

Please help!

CTA button.png
CTA button.png6380×3622 262 KB

up next.png
up next.png1834×817 215 KB

2

You can do that use the {{ blog.next_article }} and {{ blog.previous_article }}. https://shopify.dev/docs/themes/liquid/reference/objects/blog#blog-next_article

{% if blog.next_article != nil %}
  
    
    ### {{ blog.next_article.title }}
    {{ blog.next_article.excerpt }}
  
{% endif %}

{% if blog.previous_article != nil %}
  
    
    ### {{ blog.previous_article.title }}
    {{ blog.previous_article.excerpt }}
  
{% endif %}
3

ok great! Where should I put the code to?

4

This isn’t exactly copy/paste code. It’s just an example.

You can put in in the ‘article-template.liquid’ Section between the social sharing code and the {% schema %} tag.

5

It works! But the image is too small, how to make it larger?

6

Also, how to make them show up next to each other on desktop? They are now above and below each other, which is fine in mobile, but doesn’t look good on desktop.

Thanks a lot!