Hi,
Currently, when viewing a blog post, one must navigate back to the blog grid in order to view the next blog post. This seems like a lot of trouble.
I’d really like to have navigation below the article that allows the visitor to go to the next or previous blog. Is this possible?
Thanks for any help!
Sorry for facing this issue, it’s my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 
Please share your site URL,
So I will check and provide a solution here.
@Smeelah - hello, I checked your blog pages, your articles have the option to navigate to next or previous articles
@KetanKumar @suyash1 Oh right;) I am setting up Dawn but it’s still only on preview. Here is a link:
@Smeelah - can you edit the code? or I can check it for you, but this code needs to be added to blog article template in dawn theme
Previous Post
Next Post
@suyash1 Thank you!
I can, through some guesswork but I’m not sure that I put it in the right place. I tried a few things.
I added the code to the top and near bottom of main-article.liquid
I tried to add padding but it messes up the formatting. I’m not sure if I am editing the right page since I can’t get the code above the featured image.
At the bottom, I would like it to be in the centre as with the original navigation.
For the top links, I’d prefer they be above the image and then padded away from the edges or in the centre.
This was my padding attempt:
###I figured out the padding issue - I have messed up the text or code.
And, so now I am just trying to figure out how to make the ‘previous’ and ‘next’ links look like the ‘back to blog’ link. The ‘back to blog’ link has a nice arrow instead of changing colour to blue or purple like a link. Is that possible?
If not, I’d really like to have the previous and next buttons more centered below the article.
Thanks!
@Smeelah - can you please add custom class to the links for previous and next buttons? after that if you set this css for that button and it should look like screenshot below
{
padding: 30px;
float: right;
cursor: pointer;
display: inline-block;
border: none;
box-shadow: none;
text-decoration: underline;
text-underline-offset: 0.3rem;
color: rgb(var(--color-link));
background-color: transparent;
font-size: 1.8rem;
font-family: inherit;
}
Thank you! It looks good.
I decided to leave it on the sides. It was too close to the comments section but I wanted to remove that anyway. It doesn’t have the arrow but I’m ok with the current look. Perhaps I can add the arrow icons…I want to figure out how to add icons anyway.
One issue is that if one is on the last blog page, it just refreshes the page. Ideally the Next Post link would not be there for the most recent blog post but for now this is what I was looking for.
This is the code I am currently using:
Previous Post Next Post
Thank you for your time!
@Smeelah - please use this updated code and check, I added if conditions to it
{% if blog.previous_article %}Previous Post{% endif %}
{% if blog.next_article %}Next Post {% endif %}
@suyash1 That works perfectly. Thank you!