So over the years I have had the pleasure of creating many eCommerce sites for clients using many different platforms (from osCommerce to Magento and everything in between) and I get asked all the time what is the best platform to build an online store with, and Magento is still one of the best. It is not the only option of course, but as far as reliability and robustness of features, its right there on top (there is no wonder many big brands and companies use it). As far as usability and customization, it is really easy to do (especially if you are familiar with wordpress) – a good way to describe Magento is as the WordPress of eCommerce, and today we are going to go over installing a Magento theme and some basic customizations! There are also plenty of themes, plugins, and other customization tutorials available around the web, thanks to the awesome Magento Community out there!
Recently I had the opportunity to give TemplateMonster a test-drive from the kind folks at TemplateMonster.com – And I have to tell you that it is one of the best places on the net for picking up an awesome Website Template, whether it be a WordPress theme, Web Templates or an eCommerce Template (such as Magento Themes). Today we snatched up a Magento Theme of course, and we are going to show you how easy it is to install these things, customize it, and get your ecommerce shop started! First lets talk a little bit more about who TemplateMonster is.
Who Is TemplateMonster?
Template Monster is a world leader in e-commerce – providing customers with valuable, convenient, relevant and enjoyable online experiences through a diversity of products and services. The main orientation of the company is web design with an emphasis on affordable web design products and services. They have pioneered in creating and selling high quality website templates. Their library is currently one of the largest on the Internet, with over 20,000 website template designs. They add, on average, 450-500 new designs monthly! So many resources!
First Impression
One thing I have always liked about TemplateMonster (other than the fact that they have been around for years) is that they are always improving their service offerings as well as their web design and usability. I remember back in the day when I ended up there it was sometimes difficult to find what I was looking for, and the design was…uh.. a little rough around the edges haha (no offense! lol) but those days are long gone as I was able to easily navigate through the site, find a theme I liked (it is really easy to find the responsive ones, since they are labeled clearly!), and checked it out! I of course went with a responsive theme, because I love all things Responsive Web Design. It is the future! (and the present! lol). So after checking out the theme, it was really easy to purchase it and get my files – of course the process went smoothly, the typical checkout process, nothing fancy haha (but they do have live support if you get stuck, which is nice!). What I did really like though is their new “Live Demo” look – check out the screenshot we showed you above and you can see the “Demo” screen – it has a neat feature that lets you view the theme in different device views, to show off its responsiveness! Slick!
Getting Started – Installation
Getting Started with Magento Ecommerce!
The only things you need to get started with a Magento eCommerce setup for your business, which will act as a shop that will allow you to have a website that serves as a online portal for your customers to buy your products, is of course a domain name, and a hosting account (with a server running Linux), if you have that already, then lets get started! So Installing Magento is pretty straightforward, first you need to download it of course and install it on your server, if you have never used Magento before then I included a link to a guide above that will get you familiar with the software as well as getting it installed (they explain it in much greater detail than I could here – there are also good install instructions on the Magento website, the theme files from TemplateMonster also include install instructions!). So now that you have Magento installed, you will see the default Magento theme – let’s get this theme installed! (TemplateMonster sends you a link to download the theme files that you purchased in an email, so its as easy as clicking that link and downloading the files)
Installing Theme Files
Take the template files (after you unzip them) that you have downloaded from TemplateMonster (The Template I am using is the Smart Responsive Magento Theme) and you will see a bunch of files and folders inside it – You will want to go in the folder labeled as “Theme” with some numbers in the folder name – inside that folder you will see folders named “apps”, “js”, and “skin”, as seen below:
Now you want to just copy these files, and paste them into your root directory of your Magento site (where you installed magento on your web server) and upload them via FTP.
Once they are up on your server, then you want to login to the back end (typically located at domain.com/admin – again wherever you installed magento, then just add /admin/ to the url). Inside the Magento admin you want to go to “System” => “Design” and then click “Add design change”. Then choose the theme name you just installed from the “Custom Design” dropdown. In our case we select “theme453” – the same name the main folder had. Then once you have selected the theme name, remember to press “Save”!
Setting Up Custom Theme
Then you just need to re-index the data, which is simple, in the admin panel go to the top menu and select “System > Index Management”, then Check the “Select All” box in the top left corner, Then on the right in the “Actions” field select “Reindex Data” – then Click the “Submit” button! Be patient though, this could take a while. For this particular theme I had to assign the pages via the “CMS > Pages” page in the admin – to assign the custom home page format (your theme may be different in that respect though). There is a zip file called “Sources” that you will need to unzip with a special password (that you got upon purchasing the theme) and inside the “Sources” folder (sources\demo\) you will find all of the HTML code for the special features of the theme that you need to implement into the pages yourself by simply copying and pasting them into the page in the “Content” tab as seen below:
So just paste in what you want from the source files that are located in the “sources” folder at sources\demo\static_blocks\ for blocks of code, or the pages at sources\demo\pages\ (or leave out what you don’t want, its all optional – feel free to tweak as needed!). Inside the “sources” folder you also have access to all the design files such as the PSD (inside sources\psd\).
Now load the homepage and bask in the glory of your New Magento Theme!
Looks good eh? Alright, now let’s customize it!
Making It Personal – Customization
One of the great reasons that people buy themes and templates is that they want to customize it! Sometimes a lot, sometimes a little, but at the very least they want to brand it to look like their existing brand, site, or at least just upload their logo to it. That is really easy to do here.
Swapping Out The Logo
Once you have a logo file ready (I would recommend it be a .png image with a transparent background, and a size similar to the logo that is already there), you will need to save your image file in the “skin/frontend/default/theme453/images/” folder, you can name it whatever you want, or just overwrite the logo.png file already in there – then upload it via FTP just like you uploaded the theme files. Now you want to open the Magento admin panel and in the top menu select “System > Configuration”. Then select the “Design” tab. In the “Header” section, edit the “Logo Image Src” field value. Change it from “gif” to “png” (or if you named it something else, just put that.). Click the “Save Config” button, then check out the live site, you should see your logo in place of the one that came with the theme!
Customizing The Header/Footer
The main navigation is setup to pull from the categories, you could however add your own navigation up next to the logo if you would like – there are several ways to do this. You could use the “Static Blocks” inside Magento (CMS > Static Blocks) and create a new one called “topLinks” and add a standard <ul> with site links in it – or you could edit the actual template files, like any old regular website (or wordpress site) – you can do this by editing the header.phtml file (you can also modify footer.phtml). These files are located at “app/design/frontend/default/theme453/template/page/html/” – whatever you change here will reflect across your entire site (so be careful!) It would probably be a good idea to get familiar with the basics of creating a Magento theme so you know what you are doing and how things work inside the theme so you can truly customize it without having a lot of issues.
As far as looks go though, you can change the looks with some css knowledge and diving into the stylesheet (in this case it is located at skin/frontend/default/theme453/css/styles.css). I made some changes to the stylesheet of this theme and this is what I finished with.
So with some basic HTML and CSS knowledge as you can see, you can really customize the look of these templates to fit the look and feel of your brand. I made this one resemble my other tech blog InfiniGEEK – as you can see with just a few more tweaks (or as it is!) I could easily turn it into a shop for my blog.
Extra Credit – PSD & Style Customizations!
If you are a savvy Web Designer or Developer (I know a lot of you are!), then you can take it a step further and literally customize everything about the theme. If you are a photoshop Ninja, remember we said the template files come with a PSD? Fire up photoshop and start customizing the PSD (as we did above). If you are a code ninja, you don’t even have to mess with Photoshop but you can if you want, you can just dive into the stylesheet (in this case it is located at –> skin/frontend/default/theme453/css/styles.css) and start hacking away and change what you want, or even get rid of stuff and add completely new stuff. The world is your oyster. Most people use Themes as a one stop improvement to their site design, and another common use for them is to use them as base code to build upon and create something completely new (that had some base functionality that the theme offered) that way they don’t have to re-invent the wheel every time. Whatever your case may be, this theme (and others) are great candidates for customization! They are as flexible as your imagination (and skillset haha.). Granted these steps may be beyond what some people are comfortable with design and code wise, but its good to know that it is possible down the road, right? If you have a responsive theme though, those are a little more involved when it comes to customization in the stylesheet, because every change you make could affect the different media queries that dictate the look per device screen resolution, so be careful there, sometimes it is best to let the theme do all the work as it originally intended without you making too many changes (If you know what you are doing though, by all means, hack away!)
Final Thoughts
My experience with TemplateMonster overall was very good – the experience of picking a theme out from the site, from initial visit to checkout was very smooth. The template that I received was top notch quality, and their huge selection of templates and themes is tough to beat. As you saw above it was fairly easy and pain free to pull off some basic customizations on the theme so you could be up and running really quickly if you just wanted to stick a theme in your Magento Install and get your shop going! If you want to customize it further as we started to talk about – it does get a little more involved and complicated if you don’t know HTML and CSS – but that is just how it is, you will have to deal with that no matter what theme you get for any platform (WordPress, osCommerce, etc.) from any template site. So if you need a theme for basic customizations, or are a web developer that needs a theme that can handle some heavy customizations TemplateMonster is fantastic! I hope that this review and guide has helped some of you find an awesome place for themes and then helped you to get started in customizing your Magento site DIY style with a new theme!
You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.
