Liquid, JavaScript, themes, sales channels
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!
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 %}
ok great! Where should I put the code to?
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.
It works! But the image is too small, how to make it larger?
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024