Hi this is Russel, from Low Fruit Solutions, and today we’re going to be talking about the Related Product feature for the Pro Blogger application.
The purpose of related products, is essentially to be able to display products within your blog that are directly related to the content that is in that particular article. The reason you would have this, is that obviously if someone, or a browser is currently invested in your blog, then it’s most likely that the products most related to them, or that would be most interesting to them, would also be related to that article.
As an example, if you had an article that was about improving your swimming, you would also then display products related to swim training as a classic example, like kick boards, hand paddles and fins etc
So that’s what we’re going to implement today. First, let’s have a look and see what a blog article looks like, which doesn’t have the feature we’re about to implement. Let’s go look at my development store here, scroll down to this article, Pineapple for Your Health, click on it, and it’s your standard article. Nothing special, got a couple of images in it, and a bunch of text. If I was reading this now, if I come to this first, I would click on here and then eventually I would have to click out, go into catalogue, search, try to find products most related to what I’m looking for, etc. There’s already too many steps if you know what I mean. So your opportunities for losing someone, losing their interest are a lot higher than if we implement a related products feature within the blog.
Let’s go to the store dashboard, and what we’re going to do is we’re going to click on apps, and obviously we have Pro Blogger here. This is the UAT version, because we’re in a demo store. Production version will not include the UAT brackets. We’re going to scroll down to Related Products, enable this feature. Hit save. We will discuss these little settings in a short while, what they mean. It’s green, it’s now enabled.
Let’s give ourselves a bit of room. What we’re going to do is we’re going to duplicate this tab, because I want to keep the app portion open while we’re editing code. We’re just going to duplicate it. It then gives you the ability to then reference the code, installation, instructions in one tab and do the implementation in another.
We’re going to click on online store. Now, we always recommend before making changes to your theme, you back it up. To simply do that, you just click actions, and hit duplicate and that will make a copy of your current theme and all the settings, which you can then … Well, settings that will maintain, obviously some of them are transient. You will be able to republish that later if you need to rollback.
Let’s go back to the app, and go into the installation instructions. Now, as per every other feature within Pro Blogger, there is the general installation section. If you’ve already done this for a particular feature that you enabled, then you don’t need to do it again. It’s a one off install.
What we’re going to do is just scroll down to this line 10 here, and copy this include Pro Blogger section wrapper. Just copy that, and we’re going to go back to our theme. I’m going to choose edit code. This is on the debut theme, but this is the same across everything. You look underneath the layout folder for theme.liquid, click on that. You’re going to see, starting at the top, scrolling down, that there is a section here called <head>. Right there. We’re just do a carriage return and copy paste, that has now put the section wrapper into your theme.
So you want to make sure you hit save. Also, make sure that if you typed this in manually that it displays as green, if you have the wrong quote in it, it will be black. We want to make sure that it’s green. Hit save.
Okay, so that’s the general installation portion done. Very straightforward, and now like I said if you already done it, you don’t put it in again. So let’s just collapse general install, scroll down to related products. It’s a pretty straightforward implementation. We’re going to do down to line item 10 here and just copy this piece of code, the include Pro Blogger snippet related products”. Just copy that.
Now, we’re going to want to add this to our article file. So typically you would go down to the templates folder, click on article.liquid. In old themes, this where you’d make your change. The way you would make it will be evident very shortly. This is a new theme. Most new themes use sections. The giveaway being, you scroll down, you’ll see this little piece of text, section and a name of a file, audio-template. What we really need to do here then is edit this file. We’re just going to collapse the templates folder, going to go into sections, because that’s where the section files live, and you’ll see here we have article-template.
We’re going to click on that, and what we’re looking for in this file, is we’re looking for article.content. Or if you’ve implemented article features, you’ll be looking for article_contents, but for now, we are looking for this. This is the body of the text that is currently in your blog. What we want to do in this particular case, we’re going to include the related product slider underneath that. So you’re going to have your blog content and underneath you’re going to have related products. Just going to hit save. We’re going to go back to our blog. Just going to hit refresh. And there we go.
This article was about pineapples. Related products happen to be a number of pineapples. You can obviously change where that formatting’s at. If you don’t like it before the social sharing items, you would just go basically back to your editor. Just cut that out and paste it underneath. That way then your blog is all together in its own little way and all your related products will fit nicely underneath here.
Now, let’s talk about styling and options in the app. That’s the liquid implementation done. Unless you plan to move it to a sidebar, which you can do of course. We’ll talk about the best display options for that. There are two essential data points that match articles to products, which is the title. That is the title of the product. In this case, I have an article that’s about pineapples, so let’s maybe go to a different blog, so we can demonstrate how this just works now.. I’ve got deciduous fruit here. Deciduous fruit, okay, that’s a wide variety of fruit. In this case, we’ve got a bit of a blend. Not all of it is deciduous and there’s a reason for that.
When matching to products at the moment there are a number of options here as well. Title will be deemed very important. You have not important, which basically means ignore any matches, and most important. What the slider will do is it will look at the tags that are applied to that article, in this case the deciduous fruit article has a number of tags, which we’ll be able to see it at the bottom here, which is deciduous and fruit. It’s going to look for items or articles that have a match to that. If we look at this one, the pineapples, it’s looking for just health and pineapple, which is why you’ll see just pineapples and nothing else.
If we look at another one here, fruits, pears, and mangoes, it’s got an even larger amount of tags, which will allow it to do even further matching into products. You can see there’s a wider range of products that are now coming up, because of those particular tags. Peers and mangoes, because of the titles are actually the highest level of relativity, and then everything else sort of fits down below it.
So matching a title if you have a tag on your article that says for instance in this case, mango, and then you have a product with the name mango that value will become important. We can specify it to be the most important value, which means anything that’s sorted that way will be put at the top of the list of the slider. It’s a useful feature to have if you have an article about specific products and you tag them in by name to the article, then those products will come up, especially if you say most important. In this case, we’re going to say it’s mildly important. Tag relevance is actually more important. What does that mean, is that when you create your products and you give them a tag, because you’re categorizing them effectively with tags, the same way you do with articles.
If you have a product that’s a mango, you’ll tag it with mango as the name of the product, the type, and potentially the vendor, where it came from, the type of mango, maybe it’s a Kensington or something along these lines. These are obviously just examples. If you were dealing with tennis rackets, you would have Wilson as the manufacturer, tennis racket, professional model and so forth. And those tags, then if you had them in an article, would draw the relationship together. We’re going to say this is very important, the tag relevance.
Now, this is to the right here this is how it displays. Related products is exactly what it means. It’s just obviously not very appealing, but it’s there as a generic piece of text. I would suggest tailoring it specifically to your site. Which case, in this case our demo is about a fruit, so what you might say is in this case is “feel like some fruit?” This here is the standard html header, and closing tag, so you can adjust that to whatever size you want, in which case let’s make a H2, which is quite large as a header, but we’re going to do that.
Now, the bits below, the slide of size, is essentially a number of items hidden and visible within the slide. The maximum that you will allow. When these relativity matches are done you may for instance, if you’ve got a large product base and they all share the same tags, the app will work out which ones have the best weighting, and will sort them from most relevant to least relevant, and then this number determines how many of those you put in the slide.
So if I already said six, and I might have 50 matches, then I’m only going to get the top six. Likewise, if I had seven, it would still display the top six. If you only have four matches, and you said six, you’re only going to get four matches. That’s the way it works. The reason we have this in here, is specifically for when you do things like sidebar implementations, because if you get a sidebar you have really a limited amount of real estate, you may not want 10 little scroll icons sitting underneath the image itself. And you’re not going to say display more than one. Because you want one to be paging through.
Anyway, in this case, what we’re going to do is we’re going to choose six as a random example. Let me see, how many do we have in there now? One, two, three, so we’ve got five. We’re going to choose six, just to increase the size of it.
Items to … Sorry, items to display. Six is the actual amount. Items to display is what we’re currently seeing, which is five. If we change that to six, we should now get a static bar. If you don’t want it to slide, you can just set them the same, and it will be a fixed amount assuming the number of values are in there, until you change the space, because being a responsive slide, if you crush it up, it will display less, but it will slide more if that makes sense.
Now, if we go back to items to display, I’m actually going to change that to four. Just going to hit save, if you remember what the behavior was. We currently had five in the slider sliding along quite nicely, now I’ve changed it to four, there we go, there’s four, and there’s only another couple in there. The only additional ones are exactly as the setting we set here, which is display four and have six in the slider. So there we go. One, two, three, four, and after the pineapple, five, six. That’s how you would control the look and feel of the slider.
If you were to do this into a side bar, because you were only going to have a limited amount of space here, you would change the display to one, because then it would just scroll a single item at a time.
That’s related products. Very straightforward, but very effective. If I was just reading this blog and I thought this article sounds really good, and then there’s an offer. There’s no jumping out, jumping back into the catalog or to see what product you may have, I’m actually being served products that are most relevant to the article I just read, and it’s dynamic, which means no matter which article I go, I will get a tailored experience specific to the relativity of both the product and the article. How you build the relativity we will dive into in another video, but I hope you enjoyed this one and I’m sure we’ll be presenting more in the near future.
Check out more videos below or on our Youtube channel