-1

I have given tasks in Magento to create a custom theme. My task is to create Magento Theme from scratch. I want a source that I can refer to. If anyone did this before please help me.

Thank You

1
  • I believe this cover it in detail link And this is one of the best videos covering this topic link This might be useful for you- link Commented Dec 27, 2021 at 8:02

3 Answers 3

0

you can easily checking it in Magento 2 Documentation is there chapter about it https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-create.html – every single step is described with file structure.

0

You need to below require steps for creating a new theme in the Magento 2:-

  1. Create a directory for the theme under app/design/frontend/<your_vendor_name>/<your_theme_name>

Example: app/design/frontend/Custom/Default

  1. Add a declaration file theme.xml and optionally create etc directory and create a file named view.xml to the theme directory
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Custom Magento Theme</title>
    <parent>Magento/luma</parent>
    <media>
         <preview_image>media/preview.jpg</preview_image>
    </media> 
</theme>
  1. Add a composer.json file (Optional)
{
     "name": "custom/theme-frontend-default",
     "description": "N/A",
     "config": {
         "sort-packages": true
     },
     "require": {
         "php": "~7.2.0||~7.3.0||~7.4.0",
         "magento/framework": "*",
         "magento/theme-frontend-blank": "*"
     },
     "type": "magento2-theme",
     "license": [
         "OSL-3.0",
         "AFL-3.0"
     ],
     "autoload": {
         "files": [
             "registration.php"
         ]
     }
 }
  1. Add registration.php
<?php
use \Magento\Framework\Component\ComponentRegistrar;
    ComponentRegistrar::register(
        ComponentRegistrar::THEME,
        'frontend/Custom/Default',
        __DIR__
    );
  1. Add preview image following path: app/design/frontend/Custom/Default/media/preview.jpg

  2. Create directories for CSS, JavaScript, images, and fonts here: app/design/frontend/Custom/Default/web

  3. Configure your theme in the Admin panel and activate the new theme

    Admin panel > Content > Design > Configuration > Select theme and Edit > Default Theme > Applied Theme > Select "Custom Magento Theme" from the dropdown > Save Configuration

    Screenshot: [https://www.awesomescreenshot.com/image/19172983?key=22fab33dc5226af2ee39586a53effa28][1]

  4. Clear cache.

    Now you can see your Custom Magento Theme is installed and activated.

I hope this is useful.

Thank you :) [1]: https://www.awesomescreenshot.com/image/19172983?key=22fab33dc5226af2ee39586a53effa28

0

You can check out this link for the Magento front-end theme creation process https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-overview.html

Thanks.

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.