How to Install Magento 2 themes in Community Edition

Hello, everyone, this is Larma from Business with Lamar, creating a web store calm and in today’s tutorial, I’m going to show you how to change your default theme in Magento. In my case, I have Magento version 1.7 point 0.2 installed actually looked online at a couple of older tutorials. About how to install themes in Magento and notice that the procedure is pretty much the same on all Magento versions, so even if you do not have this exact version this video should help you especially since I’ve really just started using Magento. But keep in mind that I’m actually a web developer and I’ve been developing websites for a while and I’ve dealt with many different software programs out there, so it’s pretty easy to adapt to it.magento_logo-62bf3cf5

Fisrt thing: Make sure you choose the version of magento theme that you want

And from what I read online you know I thought Magento was going to be so much harder to deal with than those other programs that I’ve dealt with when in reality. It’s actually pretty much the same so what I’m going to do now is I’m going to show you how to install the theme there are actually a couple of different ways that you can do this. In this tutorial, I’m going to show you how to do this with a free FTP client called FileZilla.

Now I was going to show you how to do this by using my web hosts cPanel but instead, I figure an FTP client would be a more of a universal approach. So if you don’t have an FTP client or even if you have a Dreamweaver or whatever that’s fine. You can use that but if you do not have an FTP client you can actually go to FileZilla – project org and you can download your version as you can see they have windows all platforms here I’m on a Mac. So I downloaded the Mac version and after you install FileZilla you’re going to want to enter in the host the IP address for your hosting account or server the user and the password depending on which host your width. Some of them send you this information in an email others ask you to create this information when you first set up your account with them and others even have this information listed within the admittance. You locate this information log in quick connect get to your server and then what you’re going to want to do is after you’ve found the theme of magento 2 and downloaded it. You’re going to want to examine the theme in my case the theme was already it was zipped. So what I did has I unzipped it you’re going to want to do that as well you’re going to want to unarchive it if it is archived I actually. I’m installing a blue scale 2013 theme in this video I actually found this theme for free online, if you visit my website creating a website calm. You’ll see the theme that I downloaded and I also have this tutorial written so visit my website creating website calm and also I have a bunch of other themes free themes available over there that you can look at.

Second: Then install it. However, it’s not easy that way

And so once you do that like I said you’re going to want to get into your an archive folder and then depending on the theme that you’re installing you’re going to have different files and folders. In my case, I have a backward compatibility folder what the designer did here is they made the theme compatible with older versions of Magento.
For example, it’s compatible with Magento version 1.4 and minor updated versions of it so there’s also sample data and there are some source files that you can look at. But what we’re going to want is we’re going to want the theme folder now. If you might not have this you might just have the folders from within the theme folder. For example, as you can see here I have an app folder a media folder and a skin folder now interestingly enough.

I read a couple of tutorials online that tell you to just upload your the app folder mania folder and skin folder directly to your server. I’m going to tell you right now please do not do that if you do that you’re going to overwrite other files and folders that that already installed on your server. So what we’re going to want to do is we’re going to want to go within these app folders.

And we’re going to want to compare them we’re going to actually want to go into each of these folders and we’re going to want to compare the contents of the folders with the contents of the corresponding folders on our server or hosting account. And I’m going to show you how to do that right now so again you do not want to overwrite any existing folders and I’m going to show you exactly how to do this.
Now if you have additional folders the procedure is pretty much the same and I’m going to give you a better idea of how all of this works right now. So what I’m going to do is I’m going to go back to my FileZilla FTP client, so I have my theme downloaded to my desktop now I have my gentle installed in a subdirectory name the Magento. If you have Magento installed in your root which in most cases is a public underscore HTML, then you will not need to locate this folder.

Instead what you’re going to want to do is you’re going to want to locate these other folders. So what I’m going to do is I’m going to go into my in Magento folder because what I did is a little while ago I created a couple of videos for WordPress. And I still have WordPress installed on this hosting account and basically, have Magento installed in a subdirectory. And this is what I’m working with and as you can see this is my Magento installation this should seem familiar to you and this is the app folder right here.

And as you can see on my hosting account I also have an app folder, and what you’re going to want to do is you’re going to want to go into that hat app folder on the hosting account and you’re going to want to examine the contents of that app folder. As you can see right in here I have a code design etc and locale folder.
What I’m going to do is I’m going to go into my code because right here let me pull this up because it’s easier to see in the app. I have a code design and etc folder right, so what I’m going to want to do is inside the app what I’m going to do is I’m going to go into the code first. And I’m going to go into the code here on the remote server. And as you can see the directory is from within my code directory on my remote server do not match the directories, that I have in the app folder that I downloaded with the theme download.
All I have is a local and on my remote server, I do not have a local so what I’m going to do is, I’m going to upload this local folder to my code folder on my remote server now.

If you have a local folder what you can do is you can actually go inside the downloaded local folder and. You’re going you can examine the files and folders from within it and then upload each of those folders and files individually.
Now if your local folder has other files with the same name you’re likely going to want to overwrite them because those will be files from your theme, so what I’m going to do here is inside this code I’m going to highlight the code directory and here on the local. I’m going to right-click and I’m going to left click on upload, and now you will see that my local folder has been uploaded.

Furthermore: Settup other configurations if neccessary

shutterstock_inside_blog
So now I have a local folder here now next what we’re going to do is we’re going to want to go into the design folder, and now we’re going to want to go into the design folder here, and as you can see in the design folder here we have an admin and install here. I only have a front-end which means that if I upload this front-end, I’m going to overwrite the front-end folder on my remote server, so I’m not going to do that instead what I’m going to do is I’m going to go in my downloaded a front-end folder.
And I’m going to click on that and you will see a default now we’re going to check the remote server to see what’s inside the front-end folder. On the remote server and once we go in there we see another default which means again we do not want to upload the default to the front end because if we do that we’re actually going to overwrite the existing default folder. So what I’m going to do is I’m going to click again on the remote server I’m going to click again on default and now we see other themes in here see.
And now finally in our on our local computer, you will notice that we have a blue scale fold. In your case, it will be the name of your theme and on the remote server, we do not have a blue scale folder which basically means that this is that this folder contains our theme.
So what we’re going to do is we’re going to highlight the default again and we’re going to right-click on this blue scale and we’re going to left-click on upload, and as you can see now we have the blue scale there which blue scale is the name of our theme.
So now we’re going to examine the rest of the folders because the design we already found our folder the only folder that differs is that blue what is it called scale folder, that’s the only folder that differs from the folders that we have on our remote server so now what we’re going to do is we’re going to go into the etc folder.
And here you will notice the modules so what we will do it again on the remote server we’re going to click on the etc folder here, and you will see that we have again a modules folder. But we also have other files in this X etcetera folder so in other words if we uploaded the etc folder to the remote server we would actually overwrite the existing etc folder. And we will lose everything that’s from within it so we’re going to do is on our local computer.
We’re going to click on modules and here we find one file and here we find a bunch of files so what we’re going to want to do is we’re going to just want to upload this one file, because if we would have uploaded the entire modules folder, we would have overwritten all of these files that are loaded in that already in. That is the modules folder on a remote server so what we’re going to do is after we highlight our modules directory on our remote server we’re going to go back here on this file, we’re going to right click and then we’re going to left click on upload.
And as you can see we now have an XML file which we upload it and next we’re going to go to media C because what we have is we also have media.
In your case you might not have media this particular team has a media folder, so what we’re going to do is on our remote server we’re going to locate the media folder, and as you can see we have the catalog so what we’re going to do is.
Since in our media folder on our local computer, we have the folder template what we’re going to do is we’re only going to upload this template folder to our media directory. So we highlight this media directory and we right-click on the template directory, and we left click on upload and now as you can see we have uploaded our template directory. It’s actually finishing up right now and once it finishes we can move on to the next step which is the skin folder here so our skin is right here, on our local computer.
And as you can see our skin folder contains a folder by the name of front-end and on our remote server we have a skin folder and again here we have front-end again, if we would have uploaded the entire skin folder to the remote server, we would have lost all these other folders admin and install so what we’re going to do is on our local computer.
We’re going to examine the front-end folder, and we’re going to examine the front-end folder on the remote server. And as you can see we have a default folder so again these match so what we’re going to do is on the remote server, we’re going to click on the default and here we have other folders and on our local computer. We’re going to go into the default and we have a blue scale as you can see the blue scale is again the name of our theme on a remote server.
We do not have a blue scale because we never uploaded this theme so what we’re going to do is we’re going to make sure that we highlight the folder default, and we’re going to click on the blue scale here in your case it will be the name of your theme. We’re going to right click and live left click on upload so now once this finishes uploading it has finished.
We are now ready to make changes in our administer all of our files and folders now if you have additional folders beside the app media and skin, you will basically want to do the same thing just compare the contents of your folders on your local computer with the contents of your folders of the corresponding folders on your remote server or web hosting account.

Final: Ask guru if you encounter unexpected error

untitled-1
So now what we’re going to do is we’re going to go into our Magento admin panel, as you can see I’m already logged in and there are actually a couple of different ways that we can do this we can change the theme on a page-by-page basis, or we can change the theme globally in other words when we change the theme, it will affect our entire store or entire store will be changed.
So I’m going to show you now how we can do this on a page-by-page basis and then I’m going to show you how to update your entire store’s theme as you can see I still have the default Magento theme installed. So what I’m going to do is to change this information on a page / by page basis I’m going to go to CMS. And I’m going to click on the pages link right here.
Now what? I’m going to do is as you can see this is my homepage right here, so I’m going to click on this and then you see where it says design, I click on the design and on the bottom where I can choose a custom theme. And this is the theme that we just installed the blue scale you see how it’s in the default Magento basically pulls this information from that default folder.
And as you can see these are a bunch of other themes that you have installed on in your Magento powered store, so what I’m going to do is I’m going to click on this blue scale since this is that new team that I just installed uploaded and I’m going to click on save page, and now when I refresh my home page you will see that I have the new theme installed.
Simple as that so if you want to do things on a page-by-page basis you basically just look at all these other pages and you follow the same steps. You just click on them click on the design and then go down to where it says the custom theme and you choose that new theme that you just uploaded.
Now if you want to make changes to your entire store what I’m going to do is I’m going to go back and change the homepage back so now that, I have changed the theme back when I go back to my homepage and I refresh you will see that we have our default theme back set up so what we can do is to change the theme inside our entire store. What we do is we actually go to system and then we click on the configuration link, and then inside the configuration here we click on under general.
We click on the design and then where it says default right here what we’re going to do is we’re going to type in the name of our theme which in my case, it’s that a blue scale again. So what I’m going to do is I’m going to type in blue scale and, then I’m going to click on Save config and now when we refresh, we will have the blue scale theme installed throughout our entire store now.
Keep in mind that some themes get a little fancy and they will have you update other parts of your site, for example, your columns and for example, this particular theme this blue scale theme has a readme text file here. And what it says is it tells me to go to this website for an installation guide and that websites installation guide basically tells you how to make other adjustments to your store.
So that it’s 100% compatible with the theme so other than that that’s pretty much it as I’ve said it’s easy to do nothing difficult about it. And I actually caught a little while ago I installed the theme and PrestaShop and to tell you the truth that’s pretty much the same as installing a theme on Magento please visit creating away store.com for Magento themes thank you very much for watching and please stay tuned for more e-commerce related videos

Advertisements