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.
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
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
Editing templates (an overview of template locations)
HTML templates, such as header and footer:
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:
<?xml version="1.0" encoding="UTF-8"?> <page_layouts xmlns:xsi-"http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd"> <layout id="homepage"> <label translate="true">Custom Homepage</label> </layout> </page_layouts> <label translate="true"> </label>
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!