Related Product Articles has been renamed to Related product Blog posts
Transcription
Hi, this is Russell from Low Fruit Solutions and today we gonna be talking about the Related Product Articles feature of the Pro Blogger application. The purpose of this particular feature is to display articles that are related to your products on your product pages. And the reason you will do this is obviously to provide more information to your buyer or potential shopper. On things like such as reviews, articles related to the subject that involves their product. Which in turn will give you the appearance of authority and a little more reason or backing to your shopper for them to ultimately commit to that sale. So, what does this particular feature look like?
Well let's, as tradition look at what it doesn't look like. So I'm once gonna go into my demo store here which you should be seeing and I'm gonna click on the catalog and go into a product here. I'm going to look at the product Calypso Mango in this case, and as we can see, its just your standard product page. So we are gonna move over to implementation.
To see what that looks like, here is the dashboard for my demo store. First thing were going to do, I'm just going to go into the app. So, here we have the pro blogger app, this is the UAT version because we are on a demo store. Production doesn't have the UAT brackets, anyways I click on that ... I wait for it to load and just scroll down here.
First things first, we go to enable the Related Product Article by expanding the accordion clicking the enable product articles and hitting save. We'll come back to the relative settings in here in a minute. Cause that's turned green, we are good to go, I'm gonna go to the install tab. Now the first portion of the install is common to all the pro blogger feature so. If you have already done the general install section that I'm about to demonstrate. Then you don't need to do it again, it's a one off install. You can move straight to the next section, but for the point of this article and this video, we are going to be doing it again.
So, I'm just gonna scroll down here to line 10 and I'm just gonna copy this include pro blogger section wrapper piece of code, and then what I like to do is, I like to create a duplicate tab just to give myself a little bit of space to work in while I refer back to the install instructions and also making changes to the code. Just gonna hit duplicate here and then I'm going to go and click on online store. This will load up the themes section, as you can see I'm on the debut theme ... This particular change is universal to all themes. I'm going to hit actions and then edit code. If you look on the left hand side are all the relevant assets and files that are in your theme and under the layout folder we are going to click on "theme.liquid", and I'm going to be look for this little piece here that says <Head> in these little brackets. I'm going to do a carriage return and them I'm going to paste the "{% include pro-blogger-section-wrapper %}" and click on save.
So that is the general installation portion done. Now I'm going to go back to the app, just collapse the general install accordion, scroll down to "Related Product Articles", we're gonna scroll down a little further and copy this piece of code that is on line ten which is the "{% include ‘pro-blogger.snippet.related-product-articles’ %}". Copy that ... Then I'm going to go back to my code editing window and I'm going to go down to ... in older themes you'd make this change to a file under templates, "product.liquid". But in newer themes, newer themes use sections and an easy way to tell is that you would have a reference like this particular line here which says "section" and then a name of a file.
In this case it's "product-template", so what we're gonna do is, we're actually going to edit the sections then. Sections are found in the "sections" folder here so we're going to click on sections, scroll down and find "product-template", here we go. Where you put this piece of code will come down to some aesthetic where you'd like it placed in relation to you're theme. Now in this particular example we're going to scroll down and look for "product description" which is "product.description" you can do "Control F" and actually look for that. Here we go. What we're going to do is just after it we're going to paste our little snippet. Now if you wanted to move it around, make it after the Sharing buttons you'd put it here and like wise you can experiment by placing it in different locations depending on your theme. So I'm going to hit save. I'm going to go back to the product and I'm going to hit refresh
There we go. So what I have here is a number of product articles. Which will just scroll along depending on the number that are in the slider in relation to them. Now let's go back to the app because we're going to change some of settings here because it's kind of busy with the little text underneath it. Suit it to your theme. In this case we're going to make it a little more stream-lined and we're going to change some of the logic. If we look here, the first item we have is review, then we have other articles about, fruit pears, mangos, an orange, and another mango.
We're going to go back to the application. Go back to the setup tab. Expand "Related Product Articles". What we have here is the first option, this is the where you want to find blogs for your particular product to be shown on your product pages. So if you had multiple blogs, for instance if you had one just called "review", you may want to just single down on reviews. Or if you have a very large store for instance and you run multiple product categories like for instance you had something like "garden products" and you had a blog specifically dedicated to garden products called "lawn care" you'd only select "lawn care" cause you don't want to show blogging items from your kitchenware blog for instance. In this case we've only got one, we can choose all or just the existing one which is called "know your fruit".
Title relevancy, what this means is how important is that the title of the article matches out of the product name. So if we look here, we go back to the calypso mango the product is called "calypso mango". The first one here in the list contains the word "calypso mango", which is why it has that title relevance in there. We're gonna say that at the moment it's mildly important. Not important means just ignore it. So what we're going to do for interest sake we're going to say not important. Now we're going to change tags, which is the tags that the product has and the article has. So the number of matches between them. We're gonna say that tags are the most important. It will change the scoring a little bit.
We'll move over to "slider display". The header is that little bubble of text that was showing above. This is the little "H4" on each side, this is standard HTML markup. You can change it however you wish including a little bit of styling if you want. We're gonna just make the text a little bit smaller by changing "H4" to "H5". We're gonna change that piece of text because "related to product articles" means what it says on the tin, but its really not that engaging is it? Let's change it to "find out more".
Now, the "article content length" is the number of words that appear under the slider. The slider items, should I say. Here looks a little bit busy cause we have long article titles. What we're going to do is we're going to change it to "0", make it a little more stream-lined. "Slider size" will be the number of results returned and kept in the slider, not those just displayed. It will be the entire amount of items. These will be the best matches according to the criteria you have and then "items to display" are the number of article to display. So we're going to actually increase that as we want to show five articles in that little slider. Click on save.
Back to "Related Product Articles", and there we go. So what we have now is we have five articles in the slider. You'll see the ordering has changed because we've actually made tags as relevant, or more relevant than the title. So you'll find that the review of the calypso mango here, even though it has the name "calypso mango" in it, it has actually gone down the ordering. Where if you wanted to be more targeted, you could create a article carrying the product name in it and it will be matched to the tag as well.
So we would go back, let's just make that the most relevant. Most important, tag relevance, change that to "mildly important" just to change the ordering around again. If you had an article, in this case, in fact exactly like this case where you wanted your review to pop up first, that's how you would do it. Give it an associated title, make sure the the tags exist between the article and the products, and you sort the relevancy so that it pops up first.
That is related product articles for you. Pretty straight forward to implement and use. Now naturally the slider looks better with more articles that are related to it than less because the slider will grow into the space so it starts to get a little bit bigger otherwise. A very useful tool if you have multiple sets of reviews and associated informational articles to that product that will help push the sale. Thank you very much for watching.