shopify show article above products or below

hello everyone and welcome today I will,answer a question from mr. Sasso mezco,he initially saw my video on how to ask,your customers for permission to use,cookies so Sasso thank you for the,comment and thank you for the question,let's see the question so Sasso asked,how can i display the last five articles,on my blog page with images only so,that's what we're gonna do displaying,only five articles no text just images,this is what the end result will look,like we will only have the name of the,blog the title of it posts the date and,images no no text below and I made also,the image clickable so it's gonna direct,to your post okay so this is what my,blog page looks like I am using let's go,back I'm using Launchpad so basic team,so we have we have the title of the blog,we have the title of the of the post of,the article we have we have the date we,have picture text again same thing what,I personally don't like is on the blog,post to have so much text so much,content where it should be just just a,teaser,so let's first shrink the text let's may,be limited to 15 words or maybe some,some few characters let's see how we,would do that,so go in your in your store in your,admin panel click on online store themes,and the three dots over here edit HTML,CSS and we're actually looking in,templates we'll be looking for the file,blonde just click on it so this is what,renders your blog page what I'm,interested in is this over here,article that excerpt or content so it's,looking or for the content or for the,excerpt of the article itself but,there's no limit on how much wording,there is there's display so what we will,do I have here my Shopify cheat sheet,which I'll put a link in in the,description so you can so you can access,it so what we want to try first is,truncate words which is gonna use,truncate words the way we're doing it,let's go back over here is adding this,just put a bar,and put fifteen let me see if we have to,so no it looks it looks okay let's try,it out if i refresh over here you'll see,now the text it's all shrink so it's,good it's not perfect because what,happened because this in in in the post,itself we have the image and we have the,text but if you look at the code just,the coding the truncate word is looking,for everything so even this and this it,considerated as words so that's why the,end result what we have here this is,obviously not fifteen words so in that,case I will bring it up maybe to let's,say 35 let's just save it so now it,makes a little bit more sense so maybe,you notice that we're missing the recent,articles on the side and that's because,we have a small bug you see that at the,bottom what's happening again you have,to be really careful with this is the,code when it looks in in the article,because it's taking everything that it's,HTML we will be missing a closing div,and a closing paragraph because we're,only taking so many words let's say this,well we didn't close the paragraph and,we didn't close the div so in that case,what I will do is just at the end of of,this liquid code I will add a closing,paragraph and a closing div,save let's see,refresh and voila so be careful with,those and now let's see how to remove,the text completely if you go back over,here it's actually fairly easy you will,just need to remove this so no more,content from from the article we don't,we don't want nothing,maybe you guess that the issue is that,we really won't have nothing not even,not even a picture so let's just refresh,and here we go,so no more text but no more picture,let's see how how we can easily add just,the picture personally what I will do is,just add the image to the excerpt of of,the block so let's see this one this is,my fifth which is the last one I posted,so my fifth this is the image I have,click over here add an excerpt and here,add your image so I already have it here,let's see if we put it a little bit,bigger if it was so nice so save it,still won't show nothing because we,didn't tell the code where to look for,the image so what we want to do let's go,back to our cheat sheet and we're,looking over here for article that,excerpt so that's what we want to do go,back here and add it where we had our,that content so don't forget brackets I,recall that it is sure yes looks good,save and voila now we have the image,what I will do just an extra tip because,your visitor will most probably have the,tendency to click on the image and it,doesn't do nothing right now so we want,to put a link to the image let's go back,in the code you already have the link,for the title the title it's an h1 so we,just want to copy this and you can see,inside article that URL so we're just,copying it pasting it here and don't,forget to close it again,copy paste let's save it refresh and now,my image is clickable so if I click on,it it gonna go it will go to the post,and finally what I would like to do for,myself but also to answer the question,to Sasso we want to limit it to six,articles so right now over to five I,mean right now I have six so there's a,simple way to do that go back to the,code in the code look or find this line,here for articles and blog articles,basically a four it's a loop so it's,looking for each article article in and,in blog so whatever articles you have in,the blog,it will show it to you so if you have 20,it will show 20 well in this case we,have pagination by 10 so I'll show you,up to 10 either you modify the,pagination or you can put a limit to the,loop so you just need to type limit 5,and that should do the trick,and let's refresh 5 okay and we have,only 5 but just to be sure let's limit,it to 2 and we have only the last 2 so,the limit basically for for it to not,loop for forever you can set it a limit,it can be any any number your what so,that's it I think we covered everything,so so asked if you do have any questions,please ask them in the comments below it,will be my pleasure to answer them and,also subscribe because I'm releasing new,videos each week so you don't want to,miss it,thank you have a good

Congratulation! You bave finally finished reading shopify show article above products or below and believe you bave enougb understending shopify show article above products or below

Come on and read the rest of the article!