As Magento developers, we know that setting up Magento theme based on our requirements from default Magento will take at least 5 – 10 hours, and making it responsive and compatible is a challenging task. Moreover, we need to repeat this process for each and every project.
Here, we have a solution which is the Magento Boilerplate.
What is Magento Boilerplate?
Boilerplate is a starter theme of Magento. In this starter theme, we have different variants of front-end frameworks like Twitter Bootstrap and Zurb Foundation.
As of now, we will explain you by choosing twitter bootstrap as the powered starter theme. Twitter bootstrap is one of the best responsive front-end web frameworks developed by twitter. In-built grid system gives the responsive power to Magento, and it is also compatible with all the browsers.
Developing Theme In Magento Boilerplate
Developing in our boilerplate theme is rather easy. There are basically two ways you can start the development of the theme:
- Copy or rename the boilerplate theme and start editing it.
- Build a new “child” theme under the boilerplate package and only edit the things you need to edit.
1. Copy or Rename the Boilerplate Theme
To begin, download Magento & Boilerplate Files.
- Download Magento from http://www.magentocommerce.com/download.
- Download Magento Boilerplate of Webcomm from https://github.com/webcomm/magento-boilerplate/archive/master.zip.
You should either copy boilerplate theme or rename boilerplate theme to something useful by doing:
cp -Rf app/design/frontend/boilerplate app/design/frontend/mytheme
cp -Rf skin/frontend/boilerplate skin/frontend/mytheme
Once you’ve copied or renamed the theme, you will need to add it to the bottom of the .gitignore file:
2. Build a New “Child” Theme Under The Boilerplate Package
To begin, you should create a new folder with your new theme name (e.g. mytheme) under
app/design/frontend/boilerplate/mytheme and skin/frontend/boilerplate/mytheme.
From here, you’ll want to install the site and enable the theme through Magento’s design configuration. Firstly, install your site like any other Magento installation. There are plenty of guides out there on that. Then, visit
System > Configuration > Design and change the package from default to boilerplate.
Additionally, change the translations, templates, skin, layout and default to your theme name (such as mytheme).
And this is done, now you are ready to start your development in Magento.
Magento 2 Boilerplate
Magento 2 is the latest version of Magento. Magento 2 comes with Improved UI and lot of inbuilt UI Components. Compared to Magento 1.x, Magento 2 is heavy and one needs to use composer for development.
Subscribe to our newsletter for updates on Magento 2 Boilerplate.