Add a homepage to your theme

In this tutorial we will explain how to add a nice-looking homepage to your empty theme.



In this tutorial we will build a homepage based on the theme created in Create the first empty theme tutorial. This means:

If you are not familiar with layouts or sections, read the chapter Page - Layouts - Sections - Templates first.

Step 1: Copy all assets from the template to the theme

Copy all assets (Javascripts, CSS, fonts, images, ...) to following folder:


The structure and content of this Assets folder is completely up to you. You will link these files later in TWIG templates. However, we recommend to make it a bit of standard, so at least subfolders like js/, css/, fonts/, images/ will be created.

Step 2: Modify the Header.twig file

Open the file src/Themes/MyFirst/Templates/Plugins/WAI/Common/Header.twig in your preferred editor and modify it based on your template. This instruction seems to be quite easy but keep in mind:

Debugging tip

If you want to see which attributes you have avaiable in the {{header}} variable, use dump(variableName) function:

<!DOCTYPE html>
<html class="no-js" lang="en">
  <!-- YOUR HTML HEAD -->
  {{ dump(header) }}

What you've learned

You have modified the Header.twig file using's some core template variables (the {{rootUrl}}) and some plugin's variables (like {{header}}). This file is a template for a WAI/Common/Header plugin that is used in the default installation.

Don't forget:

Step 3: Modify the Navigation.twig file

This step is pretty much the same only a bit more complex. The principles remain the same as in the Step 2 with these differences:

Debugging tip

If you want to see which variables you have avaiable, dump the {{system.availableVariables}}:

<!DOCTYPE html>
<html class="no-js" lang="en">
  <!-- YOUR HTML HEAD -->
  {{ dump(system.availableVariables) }}

Step 4: Create the content of the first section

If you remember, the default installation of the HelloWorld theme creates a website called "Home" with a slug "home". In the administration panel navigate to Websites -> HelloWorld -> Pages and open this page Home.

You should see the structure of the layout selected for this page (which is WithoutSidebar in our case) and the list of plugins that are configured to render the sections.

Finally, you should see that a WAI/SimpleContent/OneColumn plugin is used to render the Section 1.

Now a check question: Do you already know which template file you must modify to change the design of this section?

Congratulations, you're right! :-) Open the src/Themes/MyFirst/Template/Plugins/WAI/Common/SimpleContent/OneColumn.twig file and make your changes.

That's all, folks!

What you've learned:

Step 5: Finalize your changes

Now it's only about the footer. Modify the template file for the WAI/Common/Footer plugin.


Congratulations! You have successfuly modified templates for default plugins in the MyFirst theme which has been created as a copy of the HelloWorld theme. Now it's time to dive deeper into which default plugins are avaiable and what design hacks you can do with them.

For example, you did not use any's core Javascript API, Javascript API of Plugins or Javascript for your theme so far.

E-commerce development framework