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

With a child theme (What is a child-theme?), individual customizations can be implemented in an update-safe manner.

You can fin free child theme presets on our website.

However, it's easier if you use our free extension to generate and customize the child theme.

Alternatively, a child theme can be created manually as described in the Shopware documentation.

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

https://developer.shopware.com/docs/guides/plugins/themes?category=shopware-platform-dev-en/theme-guidedeveloper.shopware.com

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

Add SCSS Styling and JavaScript to a Theme | Shopware Documentationdeveloper.shopware.com

Everything needed to edit Twig templates can be found here:

Customize Templates | Shopware Documentationdeveloper.shopware.com