How to build a call to action button in blog posts

Noctis
Tourist
30 0 0

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.pngup next.png

Replies 5 (5)

gina-gregory
Shopify Expert
742 51 211

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 %}
  <a href="{{ blog.next_article.url }}">
    <img src="{{ blog.next_article.image | img_url: '250x250' }}" alt="{{ blog.next_article.image.alt | escape }}">
    <h3>{{ blog.next_article.title }}</h3>
    {{ blog.next_article.excerpt }}
  </a>
{% endif %}

{% if blog.previous_article != nil %}
  <a href="{{ blog.previous_article.url }}">
    <img src="{{ blog.previous_article.image | img_url: '250x250' }}" alt="{{ blog.previous_article.image.alt | escape }}">
    <h3>{{ blog.previous_article.title }}</h3>
    {{ blog.previous_article.excerpt }}
  </a>
{% endif %}

 

Noctis
Tourist
30 0 0

ok great! Where should I put the code to?

gina-gregory
Shopify Expert
742 51 211

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.

Noctis
Tourist
30 0 0

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

Noctis
Tourist
30 0 0

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!