How to create custom theme in Magento 2.3

Here are steps how to create your custom theme in Magento 2.3. This instruction is based on steps from this article with slight modifications. To create a new theme in Magento 2.3 you need to:

  1. Create folder for your frontend theme: app/design/frontend/Vendor_Name
  2. Create your theme’s folder: app/design/frontend/Vendor_Name/theme_name
  3. Create your theme configuration file: app/design/frontend/Vendor_Name/theme_name/theme.xml with the following content:

    Our theme extends Magento luma theme.

  4. Create app/design/frontend/Vendor_Name/theme_name/registration.php
  5. Create app/design/frontend/Vendor_Name/theme_name/composer.json
  6. Create app/design/frontend/Vendor_Name/theme_name/media folder and place preview.jpg inside of it.
  7. Create app/design/frontend/Vendor_Name/theme_name/web folder with following subfolders: css, js, images
    Let’s place our theme logo.png to app/design/frontend/Vendor_Name/theme_name/web/images folder
  8. Create app/design/frontend/Vendor_Name/theme_name/Magento_Theme/layout folder with our theme layout default.xml file.
    Here in app/design/frontend/Vendor_Name/theme_name/Magento_Theme/layout/default.xml file we declare referenceBlock with our logo app/design/frontend/Vendor_Name/theme_name/web/images/logo.png
  9. You can also create app/design/frontend/Vendor_Name/theme_name/etc/view.xml file with your frontend theme related properties like size of images, list of files that need to be excluded from JS bundling etc.
  10. Here is the structure of your frontend theme:
  11. Check if your theme appeared in admin/system_design_theme url
  12. Now apply new theme in Admin -> Content -> Design -> Configuration (admin/theme/design_config/ url)

  13. Run php bin/magento setup:static-content:deploy
  14. Check storefront of your new theme

Leave a Reply

Close Menu