Overriding Shopware 6 Storefront Page

In this blog, we are going to explain the overriding Shopware 6 Storefront page by which we can add some extra feature in a section of page.

It is supposed that you know the directory structure of the Shopware 6 plugin, if not, you can visit- https://docs.shopware.com/en/shopware-platform-dev-en/internals/directory-structure.

Shopware 6 plugin by default searches for template files in Resource/views/{page-path} folder of plugin, path could be: <plugin name>/src/Resources/views.

Shopware 6 uses Twig template for Storefront.

Next step is to find the template you want to extend can be found at <shopware root directory>/platform/src/Storefront.

Now create the exact directory structure in your plugin starting from the views(of storefront)and create their a template file with same name just like the original file.

Now you can override the original template by overriding its blocks,but before that you need to write a line at the very beginning of the file with its respective path like written example below.

{% sw_extends ‘@Storefront/component/account/login.html.twig’ %}

Now find the block in original twig file in which you want to make changes(override) and add the same block in your custom twig file and replace its contents.

We can use parent() function to get original content of block and then we can add our own content to it (example in overridden “component_account_login_submit” block below)

The example below shows block in original file and same overridden block in custom template.This will override the login form description.