Introduction to PrestaShop Modules
Hello everyone, this is Danny from creatingawebstore.com and in this tutorial I'm going to show you how to modify your PrestaShop homepage, footer, navigation bar, everything that you can think of that you see right here, here, and in this area right here.
And this includes adding categories to this navigation bar, changing the slider images and text here, these banners here. So you can basically do everything in the admin panel and you can change just about anything that you can think of that you see right here on the homepage right now.
So let's get started. So to get a better understanding of what we're seeing here and what all of these areas are called, because in reality everything that you see on this homepage right now is called a module. And each module has its own name. So in order to modify a module or to remove a module, we should get a better understanding of where that module is located, what it's called, etc. So the best way to do this would be to go to your dashboard.
Understanding Module Positions
And then go to modules and then go to positions here. Once here, you can basically get a better understanding of where everything is located because you don't actually want to remove a module that you think is located in the footer section, meanwhile it's located somewhere else. So the best way to understand which module you're removing is by actually seeing where it's located. So as you can see, when you're here, you can actually see all of the modules that are located in areas throughout your store.
So let's start by looking at the footer section. So what we're going to do is we're going to go to find the footer, and what I'm going to do is I'm going to use the search on my browser and I'm simply going to enter in footer. And when you actually find your footer, you're going to want to find it here in the title, which is this right here, the display footer. And you can tell that this display footer is actually this right here just by looking at it, because you can tell, you see the newsletter block which is this right here and it's in position one. And then you see the social networking block, which is in position two. And then you see your categories block, which is right here, and the information block which is right next to it, which is this block right here, the CMS block. And then you have the my account block, contact information, and then you have the data mining for statistics here. You won't actually see this because in reality, this is there for statistics, so it's actually a script that's running in the footer section that's actually collecting data. So this is something that you can actually see.
Reordering, Unhooking, and Transplanting Modules
Now with this right here, if you ever want to move the order of any of these blocks, what you do is you simply drag to the location that you want it. You will see that my newsletter block is here. So now to move it back, I'm just going to drag and put it back there.
Now if I were to remove the newsletter block, I would just go here to the arrow and I would click on unhook. And now when I refresh, the newsletter block is gone.
Now to add this block back, what I actually do is I go to transplant a module here, and then I simply locate the module that I want to add, and that would be my newsletter block. And now it's asking me where I want to hook it into, and that would be my display footer, which is right here. And now you can also exclude it from certain pages. For example, let's exclude it from the category Page by simply selecting it. Now if you want to add multiple Pages you simply select other Pages as well, but in this case I'm just going to leave it on category and I'm going to click on Save. And now when I go back to my homepage, my newsletter block can be seen on the homepage but as you can see, my position is off. So what I do is I go back to positions here and I go back to display footer which is here and I simply drag it back to where it was, which is above the social networking block.
Managing Module Page Exceptions
So as you can see it's back, but now when I go to a category, it will no longer be there because I removed it from the category page. To add it back to the category page, I just click on the edit icon here and I just remove category from the box here like so, and I save once more. And now my newsletter module is back.
Locating and Identifying the Top Menu Module
And now this area right here is called the display top, and I'm going going to do a quick search here with my browser and see. I can tell that this is the top because right here it has Top horizontal menu which is this right here. And it has the cart block, etc. So now once you get a better understanding of where these uh modules are located, you can always jot down uh which modules you want to modify.
For example, let's modify the top horizontal menu by changing the links that are displayed here. So what we do is we know it's called the top horizontal menu so we go to modules here, and now where it says modules, we click on modules. So now what I'm going to do is I'm going to filter by installed modules and what I'll do is I'll filter by enabled modules as well. And what I'll do is I know that this is the front office so I'll select front office. And these are all the modules that I have installed for the front office. And if I'd like, I can also disable certain modules here, which is uh actually better than unhooking in some cases because if you do not want to use that module at all, because keep in mind that some modules might be located in more than one area in your store. So if you unhook it in a certain area, it might still be located in another area. For example if you don't want the currency block, you're better off disabling it rather than unhooking it.
But let's uh now work on that navigation bar that I told you about, which is the top horizontal menu right here. So now I'm going to click on configure. And when I click on configure, as you can see I can actually modify the links that are displayed right here. So what I'm going to do is I'm going to remove blog now from this list. So I'm going to click on blog and I'm going to click on the remove button and now I'm going to click on save. And now when I refresh, the blog is gone. Now if I want to add a category here, what I do is I simply locate the category that I want to add, for example, let's say tops, and I'm going to click on Add. And let's say I want to remove t-shirts, I'm going to click on t-shirts and remove and I'm going to click on Save. And now when I refresh, I have my tops there rather than my t-shirts.
And now as you can see it also has a search box here and if you'd like you can actually add a search box like so. See this is the search box and then you can actually unhook this search box up here so it all depends on what you prefer. And then you can also add new links for example you can add a uh let's say Facebook or whatever and then you can add the Facebook URL and then you can choose whether to open the link in a new window and then you click on ADD, and then you basically locate the Facebook over here and you click on ADD and you click on save. And now you have the Facebook link here.
Editing Content Block Modules
And you can even change the order of these links for example you can go back here and what you can do is you can move Facebook up like so, and then click on Save. And now the order of the Facebook link has changed. And if you'd like, you can remove the Social Links from down here. So basically you can do everything right here.
So now like let's say we want to change the address of the store information here. What we'll do is we'll actually locate this block. So what we're going to do is we're going to go back to modules and we're going to look for the block that actually uh resembles that and this would be this right here. And as you can see we can change it now to say USA. Obviously I'm not entering in a full address because I'm trying to keep it short here. So now when I refresh, I have USA here. So that's how that works.
So now if we wanted to remove some of the links in this uh box right here all we do is we go back to modules and we locate that module, for example it's the CMS block here. So I simply click on it and as you can see we can remove links from there. So what we can do is we can remove let's say for example our stores and we click on Save. And now our stores is gone. And if we want to add it back we simply click on it once more and click on save.
Warning: Disabling vs. Unhooking Shared Modules
Then there are also some modules that are actually shared with other uh areas in your store. For example, the category module is actually shared with the footer as well as the left column here. So you don't actually want to uh remove the category box because if you remove it, look what happens. It is gone here and it's also gone down here. So what you do is you want to make sure that the category box remains enabled and instead you go to modules, positions, and you locate your display footer and you simply unhook it from here. See that is why positions and modules are important. This is why you don't want to just disable modules. In some cases you might just want to unhook them because now we have our category block back here but we no longer have it here.
Configuring the Homepage Image Slider
So now to change the images on our homepage, we must understand that this slider here is a module and that this right here is a part of theme customization. So what we're going to do is we're first going to look at this uh slider module and that's this right here, the image slider for homepage, and we click on configure. And as you can see we can either delete some of the images or we can actually remove uh this slider all together or we can edit the text simply.
So let's uh edit an image along with text. So what we can do is here we can add a title and here we can add a URL, that's the URL that you are taken to when you click on it. So for example we can actually add a um category page for it and that would be this image right here. So what I'll do is I'll add my category page like so and my title will be women's and I will change the image and here I can even edit my uh HTML. For example I can enter in something else like so and when I click on Save, I have my new image. And now when I go to my homepage I have it here as well and when I click, I am taken to the women's category.
Using the Theme Configurator for Banners
So now when I go back home to edit these images right here, I simply go to preferences and themes and then I go right here where it says theme configurator. And here what I can do is I can basically modify all of these images similar to how I modified the slider by simply clicking edit. And here I can upload an image like so and what I can do is I can change the target link with let's say this link right here and I simply paste it. And I can decide whether I want the link opened in a new window and I can add some HTML code. And what I do is I simply click on Save. And now I have my new image with my new link right there. Now of course if I wanted to remove all three of these images right here I simply locate those images and I simply delete or what I do is I disable by unchecking. Personally I prefer to disable because by disabling you're not actually deleting and the image remains there but it no longer is shown here.
Disabling and Re-enabling Theme Elements
And what I can do is I can do that with all of them. And now I got rid of a bunch of images right there. And if I want to re-enable I simply re-enable like so. So let's say I want to disable my social media links here, I simply click on Save and when I refresh they're gone. But of course as you can see things got a bit out of place here so I still have to uh change the position of some of these other modules in the positions section. So to re-enable I simply select yes and and click on Save.
Conclusion and Final Module Examples
And what's nice about it is that I can even um edit the module right from the theme configurator page by clicking on the configure button here. And here I can change the link of my Facebook page and I can change the link of my uh Twitter page to my own rather than to Prestashop's uh page. And if I'd like I can remove Twitter altogether like so and I can add it back like so. And of course the concept is the same for any other section. Say for example you want to edit this part right here, you go back to modules and that would be the banner block right here. And you go to configure and you change the picture and you basically click on Save. And then you also have the contact block which is this block right here and you can either disable it or you can change the phone number and email address, etc.
So basically that's that. I hope you got a better understanding of how Prestashop customization works, how modules work, how the footer section works, homepage navigation bar etc. So thanks for watching, stay tuned for more videos and also be sure to check out creatingawebstore.com
