The Layout

Every template has a master layout file (layouts/layout.html.twig), which usually includes the header and footer of your shop. The template system automatically includes the page specific template (f.e. templates/product.html.twig) for all further shop pages.
All possible page templates are described below.

The template system includes the templates layout master file into a pre-defined area (see image below) inside the rakuten provided master template. This master template provides the rakuten connect (top bar with cart and search) and other rakuten relevant data like site tracking codes and more.

You can learn more about the layout architecture here.

You can not access the header information of your template (f.e. meta tags). This information will be added by the rakuten template system automatically. Please take a look at this page to include CSS and JavaScript files.

File structure

theme/
  ├── layouts/
  │   ├── layout.html.twig
  ├── templates/
  │   ├── index.html.twig
  │   ├── page.html.twig
  │   ├── collection.html.twig
  │   ├── product-list.html.twig
  │   ├── product.html.twig
  │   ├── blog.html.twig
  │   ├── article.html.twig
  ├── assets/
  ├── macros/
  └── snippets/

layouts

You can add as many layout files as you want to this directory. The master layout file "layout.html.twig" is mendatory.
Learn more about the template layout architecture.

Only files with extension .html.twig are allowed. The above mentioned layout.html.twig file can not be deleted

templates

These are the page templates. The above mentionend files are mendatory and can not be deleted.
Learn more about page templates.

Only files with extension .html.twig are allowed.

assets

Images, CSS- and JavaScript files are in this directory. You can create as many sub-directories as you want.
How to include assets can you find here.

Only files with the extension .js, .css, .jpg, .jpeg, .png und .gif are allowed.

macros

This is the directory for all your macros.
Learn more about macros.

Only files with the extension .html.twig are allowed.

snippets

Snippets are parts of your code that you can reuse everywhere in your template. Use this folder for all of your snippet files.
Learn more about snippets

Only files with the extension .html.twig are allowed.