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

0 Likes
gina-gregory
Shopify Expert
663 37 142

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 %}

 

0 Likes
Noctis
Tourist
30 0 0

ok great! Where should I put the code to?

0 Likes
gina-gregory
Shopify Expert
663 37 142

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.

0 Likes
Noctis
Tourist
30 0 0

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

0 Likes
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!

0 Likes