SwissUpLabs Logo
    Home > Magento 2.x > Argento > Customization > Argento custom theme

    Argento custom theme

    Creating Argento sub-theme gives you unlimited possibilities in theme customization. Unlike css customization, custom theme allows you to change much more things:

    • Layout instructions
    • Template files
    • Javascripts
    • Css styles

    Using Argento sub-theme, you guarantee that all Argento files left untouched and you can unpack new Argento version over the old one without losing your modifications

    Contents

    Create custom theme

    Terminal command

    1. Open terminal and navigate to magento home folder.

    2. Run the following command:

      Please replace [essence|flat|pure2|mall|stripes|luxury|force|home|marketplace] with theme name, you’d like to use.

      bin/magento swissup:theme:create Local/my-theme [essence|flat|pure2|mall|stripes|luxury|force|home|marketplace]
    3. Log in to Magento backend and navigate to Content > Themes. You should see new theme in the list.
    4. That’s all. Apply your new theme now

    Please replace [essence|flat|pure2|mall|stripes|luxury|force|home|marketplace] entries with theme name, you’d like to use

    1. Create folder for your new theme:

      app/design/frontend/Local/my-theme

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

      1. composer.json

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

      2. theme.xml

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

      3. registration.php

        <?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Local/my-theme', __DIR__);
    3. Log in to Magento backend and navigate to Content > Themes. You should see new theme in the list.
    4. That’s all. Apply your new theme now

    If you have trouble when creating new theme, please take a look at our examples at github repository.

    Apply custom theme

    Navigate to Content > Design > Configuration, select the store you wish to apply a theme, and select your theme in “Default Theme” section:

    Design Configuration

    Save configuration, clear cache, and check the frontend.

    Enable theme editor for custom theme

    Supported since theme-editor version 1.9.8

    By default, custom theme doesn’t inherit theme editor changes. If you want to apply the changes to your custom theme (inherited from one of Argento themes) you should explicitly indicate this in theme view.xml file:

    1. Open etc/view.xml file inside your custom theme. If it doens’t exist, create it:

      <?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
</view>

    2. Add the following code into the file (between <view> tags):

      <vars module="Swissup_ThemeEditor">
    <var name="code">THEME_EDITOR_CODE</var>
</vars>

    3. Replace THEME_EDITOR_CODE with one of the following values:

      • swissup_absolute
      • swissup_argento_essence
      • swissup_argento_flat
      • swissup_argento_force
      • swissup_argento_home
      • swissup_argento_luxury
      • swissup_argento_mall
      • swissup_argento_marketplace
      • swissup_argento_pure
      • swissup_argento_pure2
      • swissup_argento_stripes

      Make sure your theme is a child of selected theme.

    4. Save the file, clear cache, and check the frontend.

    Next Up

    Edit this Page