Magento 2. Create a custom theme.

Back

Our Argento template can be your powerful tool in building custom themes in Magento 2. Creating an Argento sub-theme gives you unlimited possibilities in theme customization. We don’t say about adding custom CSS, but we focus your attention on changing such things as Layout instructions, Template files, Javascripts, CSS styles.

Using the Argento sub-theme, you are doing a favor for your site, because that would mean all Argento files left untouched. It will be safe for you to unpack the new Argento version over the old one without losing your modifications.

Let us show how to create a custom theme. You can use our instructions at the Custom Argento Themes Boilerplate free repository. And here we’d like to help you create Magento 2 custom themes manually.

Let’s create Local/argento-[essence|flat|pure2|mall|stripes|luxury|force|home]-custom theme based on Swissup/argento-[essence|flat|pure2|mall|stripes|luxury|force|home]. This step-by-step instruction implies that you’ll replace [essence|flat|pure2|mall|stripes|luxury|force|home] entries with theme name, you’d like to use.

1/ Create a folder for your new theme:

app/design/frontend/Local/argento-[essence|flat|pure2|mall|stripes|luxury|force|home]-custom

2/Create the following files inside the new theme directory, to register your theme in Magento:

• composer.json

{
    "name": "local/argento-[essence|flat|pure2|mall|stripes|luxury|force|home]-custom",
    "type": "magento2-theme",
    "version": "1.0.0",
    "require": {
        "swissup/theme-frontend-argento-[essence|flat|pure2|mall|stripes|luxury|force|home]": "*"
    },
    "autoload": {
        "files": [ "registration.php" ]
    }
}

• theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Argento Custom by Local</title>
    <parent>Swissup/argento-[essence|flat|pure2|mall|stripes|luxury|force|home]</parent>
</theme>

• registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Local/argento-[essence|flat|pure2|mall|stripes|luxury|force|home]-custom',
    __DIR__
);

We also offer you to try one faster way to create a custom theme.

Run the command

php bin/magento swissup:theme:create <name> <parent-theme-name> --css

In the Name value you have to put the theme name you want to create (Local/argento-stripes). In the Parent value you have to put the parent short theme name (stripes).

The--CSS value is optional. In case you use it, you will receive the custom CSS file. For instance, php bin/magento swissup:theme:create argento-stripes-custom stripes --css will generate Local/argento-stripes-custom theme based on Argento Stripes design (swissup/theme-frontend-argento-stripes).

3/ Log in to Magento backend and navigate to Content > Themes. You might see a new theme in the list. In case you don’t, please clear your store cache.

4/ Run the following commands in the terminal to deploy static content files:

bin/magento setup:static-content:deploy

5/That’s it. Now you can apply the new custom theme to your store. Let us help you to do that.