Theme Builder for Magento2

Styling Magento2 by easy pulling all the built-in Less variables in a single place. Using this, you can customize and generate a theme.less file provided by Magento2 to overwrite its default styling variables.

Theme Building. Made Easy.

First Free Online tool to style Magento2.

Build Your Theme

Read "How to Use" Guide

Features

Color selection

Color picker added to color variables. When selected, the selected color will be displayed at the bottom and copied to clipboard for futher use. Using Paster Button next to input, pastes the previous selected color.

Copy to clipboard

No need to download theme file when you need variables for specific tab. Just click Copy to Clipboard button and values will be copied to clipboard.

Variable Information

Difficulty in understanding the use of variable, info icon added next to input to give detailed information about the variable.

Getting colors

Copy color values by uploading any design from "Upload design" button.

How to Use

  1. Select Your Parent theme from LUMA or BLANK

    • Using Luma theme, you will get predefined values of variables filled in text boxes.
    • Using Blank theme, all values of variables will be blank.
  2. Upload Mockup of your website in PNG or JPG format from "Upload Design" button to get color codes.

  3. Enter value in textboxes as per your requirement. You can use px, em or any format.

  4. ⚠️ Don't use semicolon at the end when entering any value as it will be added automatically.

  5. Download theme.less file from "Download Theme file" button.

  6. Make sure to place generated theme file under app/design/frontend/Vendor Name/Theme Name/web/css/source/ folder.

Build Your Theme

Want to try out Beta Desktop App? Choose your OS below

For Latest release or any Issues,

Github