Magento 2 Custom Themes

🎨 Magento 2 Custom Themes – Make Your Store Look Unique

Want to make your Magento 2 store look totally unique? Creating a custom theme is the best way to control the design and layout of your website. Let’s build one from scratch!

🧱 Magento 2 Theme Structure

Here’s the folder structure for your custom theme:

app/design/frontend/Vendor/mytheme/

mytheme/
├── etc/
│   └── view.xml
├── web/
│   ├── css/
│   │   └── source/_extend.less
│   └── images/
├── Magento_Theme/
│   └── layout/
│       └── default.xml
├── theme.xml
└── registration.php

Try It Now

📜 Step 1: Create theme.xml


    My Custom Theme
    Magento/blank
    
        media/preview.jpg

Try It Now

📦 Step 2: Register Your Theme



Try It Now

🔍 Step 3: Create view.xml

This file helps define image dimensions used in your theme:


    
        
            
                700
                700

Try It Now

💄 Step 4: Add Custom CSS

Edit the _extend.less file in web/css/source/ to apply your custom styles:

body {
    background-color: #f2f2f2;
}

Try It Now

🧪 Step 5: Enable Your Theme in Admin

  1. Go to Content > Design > Configuration
  2. Click "Edit" for your website/store
  3. Select your new theme and save

⚙️ Step 6: Deploy and Clean Cache

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Try It Now

📌 Summary

  • Create the correct folder structure and files.
  • Declare the theme using theme.xml.
  • Register it with Magento using registration.php.
  • Add styles in _extend.less and preview your customizations.
  • Activate your theme via admin and deploy static files.

That’s it! You’ve built your very own Magento 2 theme. Time to show off your brand’s unique style! 💅