Question

Please explain how to setup a child theme with step by step instructions.

Was it helpful?

Solution

The high-level steps required to add a new theme in the Magento system are the following:

  1. Create a directory for the theme under app/design/frontend//.
  2. Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory.
  3. Add a composer.json file.
  4. Add registration.php.
  5. Create directories for CSS, JavaScript, images, and fonts.
  6. Configure your theme in the Admin panel.

For more detail please read the official instructions here.

For instructions on how to create a theme from scratch/without styling see the answer on this post.

OTHER TIPS

As mentioned above, you just create the structure of the basic theme inside a new theme folder (your child theme) under app/design/frontend/. i like to place my child theme under the vendor's folder that I am trying to override so app/design/frontend/vendor-name/child-theme-name.

child theme folder structure

<app>
    <design>
        <frontend>
            <vendor>
                <theme-name>
                    <etc>
                    <Magento_Theme>
                        <layout>
                            default.xml
                    <media>
                        preview.png
                    <web>
                        <css>
                        <fonts>
                        <images>
                        <js>
                    theme.xml
                    registration.php

most importantly theme.xml should be created in the main child theme directory is where you declare your parent theme. vendor/themename should be exact as per your parent theme directory file structure

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Child Theme Name</title>
    <parent>vendor/themename</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

registration.php is self explanatory just registers the path to the child theme

frontend/vendor-name/child-theme-name

Personally I like to copy over all of the css, javascript, images and fonts from the parent theme.

The rest as explained above is standard and can be followed as per the official instructions linked above.

Once complete you can easily add or override css, javascript, phtml templates or xml files as needed.

Official Instructions

Magento.Stackexchange - How to create a Child Theme in Magento 2

Good luck

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top