Shopware6 template development

Templating engine

The templating engine used is Twig.

Styling

For styling SASS is used as CSS preprocessor.

The templates can be found in /src/Storefront/Resources/views/storefront/

Template Top Level

<platform/src/Storefront/Resources/views/storefront/>

── block
── component
── element
── layout
── page
── utilities
── base.html.twig

Page directory:
The page directory contains the entry points of the templating system. These are referenced by page controllers and rendered through the Twig engine. The structure is derived from the page controller naming.

<platform/src/Storefront/Resources/views/storefront/page>

── account
── checkout
── content
── error
── newsletter
── product-detail
── search

Inside of the directories are the actual templates rendered by the storefront. The inner structure is dependant on the complexity of the domain context, therefore a system can not be clearly inferred from here on.

Styles directory

The style sheets are written in SASS. The organization is inspired by the 7-1 pattern structure.

<platform/src/Storefront/Resources/app/storefront/src/scss> └── abstract
── base
── component
── layout
── page
── skin
── vendor
── base.scss

The base.scss is the global include file which references styles that are written as an extension of the bootstrap base.

Step-by-step guide:

theme.json

theme.json file in the <plugin root>/src/ folder of your plugin.

Using @Storefront in the style and script array specifies that your theme extends the basic storefront theme which ships with shopware. This is useful if a theme just makes some adjustments to this theme or to use it as a starting point.

Example:

{
“name”: “Your theme name”,
“author”: “Your theme author”,
“description”: {
“en-GB”: “Your theme description”,
“de-DE”: “Nur eine weitere Beschreibung”
},
“style”: [
“@Storefront”,
“Resources/storefront/style/base.scss”
],
“script”: [
“@Storefront”,
“Resources/storefront/dist/script/all.js”
],
“asset”: [
“Resources/storefront/asset”
]
}