Adobe Commerce, previously known as Magento, is a scalable, feature-rich, platform used to develop and power B2B (Business-to-Business) and B2C (Business-to-Customer) eCommerce stores.
A theme is simply a component of Adobe Commerce that, by combining different and unique elements such as templates, layouts, styles, or images, creates a visually unified design for the entire application e.g. your storefront. You either choose from a wide variety of existing, prebuilt themes, or opt for a completely custom and tailored theme.
Adobe Commerce comes preloaded with two themes, Luma and Blank. Luma is like a demo theme, while Blank is well… more like a blank canvas for you to create your own custom theme.
There are no limitations on using the sample theme, Luma, for your live eCommerce store, but if you wish to modify the default layout, you must develop a “new theme”. Any modifications or changes you make to Luma and Blank will likely be replaced or overwritten during updates, so we suggest not altering the existing or default files or settings.
Your new theme can stand alone or derive from another theme already in use or from the default. The concept of theme inheritance used by the Adobe Commerce system enables you to change only specific theme files while retaining access to other necessary files from a parent theme.
Prerequisites for Adobe Theme Development
Prior to initiating Adobe Commerce development, there exist certain conditions you need to meet to be able to successfully develop your own Adobe Theme.
- Familiarity with the Adobe Commerce.
- Experience in coding Adobe Commerce.
- Access to frontend and backend of your Adobe Commerce Store as well as access to
hosting.
Once all three of these prerequisites are met, you may begin on your journey to develop an adobe commerce theme.
Step 1: Creating a Theme Directory
i) Here is what you need to follow to create a directory for your Adobe Commerce theme
ii) Start by opening <adobe_commerce_root>/app/design/frontend.
iii) After you’ve opened it, create the new folder according to the name of your Vendor: /app/design/frontend/<Vendor>.
iv) Followed by creating a new directory of your theme under the <Vendor> directory.
Step 2: Declaring the Theme
i) Once you’re finished creating a theme directory, you must declare it by creating theme.xml containing your chosen theme’s name in app/design/frontend/<Vendor>/<theme>.
ii) Configure it using the following code:
iii) Add the preview.jpg file to the app/design/frontend/<Vendor>/<theme>/media/ directory.
Step 3: Forming a Composer Package for your Theme
Composer packages are used to distribute the default themes.
Add a composer.json file to the theme directory and register the package on a packaging server to distribute your theme as a package. https://packagist.org is the standard website for public packaging servers.
The composer.json file contains information on theme dependencies. For the correct dependencies and their versions, consult a recent theme.xml file. You might need more modules in the “require” section if your parent theme isn’t Magento/Blank.
Step 4: Adding a registration.php into your theme
Now add a registration.php file with the following contents to your theme directory to register your theme with the system:
Step 5: Configuring Your Store’s Images
A view.xml configuration file is used to set up the storefront’s product image sizes and other properties. It is necessary for a theme but not essential if it already exists in the parent theme.
The following steps should be followed to add view.xml if your theme’s product image sizes are different from those of the parent theme or if your theme does not inherit from any other themes:
1. Access your application server by logging in as a user who has the ability to create folders and files in the installation directory.
2. In your theme folder, create the, etc directory.
3. Copy the view.xml file from either the Blank theme or the etc directory of the parent theme. i.e. move the file view.xml from theme-frontend-blank/etc to your theme’s etc directory.
4. Adjust the sizes of each product picture for the storefront in the view.xml file. E.g. you can specify a size of 250 x 250 pixels to make the product images in the category grid view square:
<image id=”category_page_grid” type=”small_image”>
<width>250</width>
<height>250</height>
</image>
Step 6: Creation of Directories for Static Files
Your theme probably includes a variety of static file formats, including:
Styles
Fonts
JavaScript
Images
Each type needs to be kept in its own web subdirectory in your theme folder:
app/design/<area>/<Vendor>/<theme>/
You keep all of the static files that are generally relevant to the theme in the directory…/theme>/web/images. A theme logo, for instance, is kept in…theme>/web/images.
Your theme most certainly contains module-specific files as well. These files are kept in the respective subdirectories, such as…/theme/Namespace Module>/web/css and similar ones. The next portions of this article go through managing the module-specific theme files.
NOTE: You must first clear the pub/static and var/view_preprocessed directories before making changes to the files stored here while developing a theme. Otherwise, the storefront displays the previous iterations of the files.
Execute rm -r <magento_root>/pub/static/*/* to clear the pub/static directory. Then execute rm -r <magento_root>/var/view_preprocessed/* to clear the var/view_preprocessed directory.
Step 7: Adding a Theme Logo
A logo image’s name and default format in the program are logo.SVG. A logo.svg picture is automatically identified as the theme logo when it is placed in the standard location, which is the <theme_dir>/web/images directory. Once the theme is applied, it appears in the header of your store page.
You can use a logo file with a different name and format in your custom theme, but you might need to declare it.
If or whether your theme has a parent theme and its logo picture determines whether a declaration is necessary. These scenarios are conceivable:
There is no parent theme for your theme.
There is no need to specify your logo picture if its name and format follow the default naming scheme (logo.svg).
If the name or format of your logo picture deviates from the standard naming practice, you must indicate it in the layout.
The parent theme of your theme exists:
There is no need to define a theme logo if it has the same name and format as the parent’s theme logo.
Declare it in the layout if your logo picture has a different name or format.
Step 8: Declaration of the Theme Logo
Add an extending <theme_dir>/Magento_Theme/layout/default.xml layout to declare a theme logo.
For instance, if the size of your logo file is 300×300 pixels, you must declare it as follows:
NOTE: Declaring the size of the logo is optional and can be skipped.
Step 9: Designing the Theme
Applications for Adobe Commerce employ a model view controller architecture. The major focus will be style, which in this case mostly entails changing the CSS or LESS. We will start changing the theme using LESS as that is how Adobe Commerce was created.
There are three different ways to style a website before you start styling the theme:
Server-Side Compilation
Using Grunt for Server-Side Compilation
Client-Side Compilation
We’re gonna use Client-Side to explain but fret not, the result is the same, no matter which methodology you use.
Begin by uncommenting the line SetEnv MAGE_MODE developer which can be found in the .htaccess file.
The LESS compilation mode must then be switched to the client-side by accessing the admin panel in Adobe Commerce. Select Process type under Stores Configuration Advanced Developer Front-end development workflow. Do not forget to click the Save Config button once you’ve made the change.
When we refresh the web browser in this mode, Grunt does not need to be running in order to compile our CSS. The Adobe Commerce platform will handle it. Now that we have fewer files, we can make changes to them and watch the frontend change in the following place: /app/design/frontend/Cloudways/m2-theme/web/CSS/source/CW-theme.less
The following code may be used in your CW-theme.less file:
This file allows you to apply theme-specific styles, save it, and then reload your browser. You’ll notice that there aren’t any styles when the browser first loads if client-side compilation is enabled. This is because LESS is currently being assembled by Adobe Commerce. Give it a few seconds, and your personalized styles will start to appear.
Step 10: Editing the Layout of the Theme
The layout file with the same name must be placed in the directory as /app/design/frontend/Magento/luma/Magento_Theme/layout/default.xml in order to override the theme layout.
These layouts replace the ones listed below/Cloudways/m2-theme/Magento_Theme/layout/default.xml
Always use the directory name page layout rather than the layout when replacing page layout files.
The layout overriding method offers exceptional customizing freedom. We advise against making the following changes:
Alias or Block name
The parent handle’s page type.
Conclusion
These are the 10 simple steps you have to follow to create your own custom theme in Adobe Commerce. You can always reach out to us if you want to learn more about Adobe Commerce Development.
Suggested:
What Are The Best eCommerce Development Platforms Available, And How To Choose Them?
Top 7 free online PDF tools to use instead of Adobe Acrobat for Merging Purposes.
10 Effective Strategies for Managing SEO Client Relationships