1

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

2 Answers 2

0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.