Getting started with Magento 2 development

15 September 2022

Need a little help to get you started on your first Magento 2 development? Take a look at our comprehensive guide to ensure you create solid and stable Magento 2 stores.

Getting started

There are a number of ways to get started with Magento 2, we advise installing Magento 2 using Composer . This provides package management and is recommended by Magento.



Understanding the structure

Changes made to your theme:


are compiled to static files which are then severed to the browser. The static files can be seen at





When using Magento 2 you’ll likely find yourself using a number of different command line tasks, as some tasks, such as clearing the cache and deploying static content require a number of commands we found it useful to create shell scripts to speed up the process. This can be achieved by adding following scripts to .sh files in the root bin folder. You can then run the scripts via your command line.


Two scripts we find really useful are:


Clearing cache and deploying static content

rm -rf var/cache/mage--*
rm -rf var/view_preprocessed/*
rm -rf pub/static/*
php bin/magento setup:static-content:deploy en_GB



Compiling CSS and starting the watch command

First you need to make sure your theme is added to Grunt configuration so it can be found, this can be done within dev/tools/grunt/configs/themes.js. The following commands then remove related static files, republish symlinks to the source files and compile the css using the symlinks. Finally the watch command tracks updates to the css files and reloads the page in your browser.

grunt clean
grunt exec:base
grunt less:base
grunt watch



Template hints

As with Magento 1 the useful template hints are included, these can be turned on at Stores >Settings > Configuration > Advanced > Developer > Debug > Enable Template Hints for Storefront



Viewing default themes

We find reviewing the themes that ship with Magento 2 a great way to understand exactly how it was intended to be developed with.

Magento 2 ships with 2 themes, Luma and Blank when using the zip or composer (recommended) you’d expect to see these where in the theme directory
but in Magento 2 these are actually located in the vendor folder, therefore you can find them at vendor/magento/theme-frontend-luma and vendor/magento/theme-frontend-blank.



Editing templates (an overview of template locations)

HTML templates, such as header and footer:


Layout XML:


To extend these you can copy the basics from:


There is also a root template which serves all storefront pages this is located at:


This can be updated by copying across to your theme and adding to:




Adding a custom page template

Within Magento 1 adding a custom page template requires creating a custom module, fortunately the ability to do this comes as standard within Magento 2.

You can add a custom template by adding a reference within your layouts.xml:


For example to add a homepage template you would add the following to layouts.xml:

Custom Homepage

Then add the corresponding XML file within your theme, for example to complete the above you would the following XML file:


Happy Magento 2 developing!



Are you excited to get your next project up and running? Or are you unsure what is dragging you down?

Contact Us to discuss how we can help increase sales and boost your online performance!

Enter your email address to sign up to our newsletter, featuring case studies, insights, industry news and much more.

If this is something you would like help with, please get in touch.