Customizations

For customizations that go beyond the possibilities of a configuration, our themes can of course be individualized in an update-safe manner.

Create a Child Theme

First, create a new theme as a derivative of our theme. With such a child theme (What is a child-theme?), individual customizations can be implemented in an update-safe manner. Basically, such a derivative can be created via the console command as described in the Shopware docs.

# run this inside the project directory to create a new theme
$ bin/console theme:create MyTheme

However, it's easier if you choose one of our free child-themes.

Installation

If you are using one of our child-themes, you can upload the child theme under Extensions > My Extensions via the Upload extension button and install and activate it like any extension.

Theme assignment

The child theme must now be assigned to a sales channel.

Customize

After the child theme is installed, you are ready to go. Navigate to the theme folder, there you should find the following structure. {MyTheme} stands here for the chosen theme name.

# move into your theme folder
$ cd custom/plugins/{MyTheme}

# structure of theme
├── composer.json
└── src
    ├── MyTheme.php
    └── Resources
        ├── app
        │   └── storefront
        │       ├── dist
        │       │   └── storefront
        │       │       └── js
        │       │           └── my-theme.js
        │       └── src
        │           ├── assets
        │           ├── main.js
        │           └── scss
        │               ├── base.scss
        │               └── overrides.scss
        ├── views
        │   └── storefront
        └── theme.json

Twig-Templates: {Root}/custom/plugin/{MyTheme}/src/Resources/views/storefront/

SCSS: {Root}/custom/plugin/{MyTheme}/src/Resources/app/storefront/src/scss/

Javascript: {Root}/custom/plugin/{MyTheme}/src/Resources/app/storefront/src/script/

Structure

Since original files must never be edited or overwritten, it is necessary to see into the structure of the files to be able to extend or overwrite them.

Our main themes are derivatives of the Shopware default theme. Therefore, you can find the basic structure in the Shopware storefront.

You can find the structure of our themes as a derivation of the Shopware Storefront under:

Twig-Templates: {Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/views/storefront/

SCSS: {Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/app/storefront/src/scss/

Javascript: Root}/custom/plugin/zenitPlatform{Theme}/src/Resources/app/storefront/src/script/

Documentations

ThemesShopware Developer

For editing styles you should significantly stick to the Shopware docs:

Add SCSS Styling and JavaScript to a ThemeShopware Developer

Everything needed to edit Twig templates can be found here:

Customize templatesShopware Developer