Magento 2 theme LESS usage

Magento 2 theme LESS usage

So you’ve heard about LESS usage and its application when it comes to Magento 2 theme. By cutting off duplicated codes, LESS minimize your CSS coding time and make front-end maintenance hassle-free. This is extremely valuable when it comes to Magento websites that contain many pages, sections, and serves users with multiple store views. Unlike website with bare CSS, websites use LESS takes only minutes to change the theme design and just some more minutes to deploy.

In this article, we cover basic knowledge about LESS: what is LESS, why use LESS instead of bare CSS, LESS file location in Magento 2 websites, and some commonly used variables of LESS.

What is LESS?

According to LESS Official website, “Less (which stands for Leaner Style Sheets) is a backward-compatible language extension for CSS”.

On the other hand, Wikipedia defines LESS as “a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side”.

Why use LESS instead of bare CSS?

There are 2 main benefits of using LESS that outperform bare CSS: reduce duplicated code, and easy code maintenance.

Reduce duplicated code

LESS has many functions that help reduce duplicated CSS. For example, nesting function in LESS can replace or be used in combination with CSS.

Let’s say we have the following CSS:

#footer {
  color: red;
}
#footer .contact-info {
  font-size: 10px;
}
#footer .logo {
  width: 350px;
}

In LESS, we can also write it this way:

#footer {
  color: red;
  .contact-info {
    font-size: 10px;
  }
  .logo {
    width: 350px;
  }
}

Now you can see you have a shorter code with the same function, which has the same structure as your HTML.

Easy code maintenance

Let’s say you style multiple components of your site: orange (#F87311).

#header, #sidebar .heading, #sidebar h2, #footer h3, .aside h3 { color: #F87311; }

Now if you want to change their values, you have to find and replace, and the more complex your website is, the more time you have to spend changing the code manually. With LESS, you can do so easily by changing just the value of a variable.

@main-color: #F87311;
#header { background-color: @main-color; }
#footer { color: @main-color; }
h3 { color: @main-color; }

Magento 2 default support .less file in multiple folder locations in theme_folder, out of which we can divide into 2 types: main theme .less files, and module-related .less files.

You can locate main theme .less files in theme_folder > web > css > source.

For example, let’s take Magento 2 default Luma theme.

vendor/magento/theme-frontend-luma/web/css/source

magento 2 theme main less file location

You can also locate module-related .less files in theme_folder > module_name > web > css > source >

For example, again with Luma theme:

vendor/magento/theme-frontend-luma/Magento_Sales/web/css/source

Magento 2 theme module less file location

For further reference, you can read more about Magento 2 .less file list in main theme folder. If you want your code to be well-organized, follow Magento 2 .less code standard.

Most commonly used variables of LESS

We give you some example of .less variables supported by Magento 2 default.

In the first example, we examine the file _responsive.less:

@screen__xxs: 320px;

@screen__xs: 480px;

@screen__s: 640px;

@screen__m: 768px;

@screen__l: 1024px;

@screen__xl: 1440px;

As you can see, Magento 2 has already had 6 screen size limit presets, and it would make responsive settings on your whole site hassle-free.

In the second example, we choose the file _typography.less:

//  Weights

@font-weight__light: 300;

@font-weight__regular: 400;

@font-weight__heavier: 500;

@font-weight__semibold: 600;

@font-weight__bold: 700;

There are 5 font weight presets – with easy-to-remember names – for you to choose when it comes to style text elements.

// Indent

@indent__base: @line-height__computed; // 20px

@indent__xl: @indent__base * 2; // 40px

@indent__l: @indent__base * 1.5; // 30px

@indent__m: @indent__base * 1.25; // 25px

@indent__s: @indent__base / 2; // 10px

@indent__xs: @indent__base / 4; // 5px

There are also 6 indent options presets in Magento 2.

Magento 2 theme LESS: in conclusion,

So there you go, the detailed Magento 2 theme LESS usage. In this article, we have discussed the What, the Why, the Where and have a glimpse at the How for the .less files in Magento 2. We hope that you have a good understanding of the topic to start coding right now.

As usual, do you have any more questions regarding Magento 2 theme .less practice? Feel free to leave us a question in the comment section below, and we would love to answer you in the scope of our knowledge.

You can also browse the themes we have spent all our time and pride on to develop below.

magento-2-theme-github our theme

Effortless guide to Magento 2 theme customization (with detailed examples)

Magento 2 theme customization

The situation is: you’ve just installed your Magento 2 theme and see the result that is exactly the same as the demo theme. What a nice look! However, now is the time for the nitty-gritty stuff. You might want to customize your Magento 2 theme like footer text, menu text, slider image, brand logo, web layout…

Although small changes are easy to make, huge changes take time. Some are even impossible to make without a deep understanding of both front-end development and the theme itself.

So what can separate small – large changes? In order to understand this, we have to go through a broader question. Ask yourself: What is the difference between theme configuration and theme customization?

Difference between configuration and customization

Often, when an enterprise speaks of software customization, it really has configuration in mind.

As we can see in IQS’ great article on the difference between software customization and configuration, it is easy to mistake configuration and customization when it comes to Magento 2 theme. Theme configuration is small changes you can make using the vendor’s built-in option which can be easily accessed in Magento 2 admin, with the help of the theme’s user guide. On the other hand, theme customization stands for making the big change that is not supported by the theme in default and usually relating to altering the theme code.

But what can you do about it? Save days of work by being crystal-clear about your theme changing needs.

Clearly identify Magento 2 theme changing needs

There are 3 steps to take to clearly identify your theme changing needs:

  • Name your theme changing needs in detail. For example, “modify theme header” is very vaguely describe, and “move currency and language option from homepage header to homepage footer” is a lot more specific.
  • Identify if the modification is configurable in the theme options. You can do this by either examining the theme’s user’s guide carefully or trying to modify the code of the CMS Blocks and Pages. For example, changing the images on the homepage of the default Luma theme can be done by modifying the static block in Magento Admin. At this step, try to avoid making change to the site’s source code, as it can be hard to keep change in future theme upgrade, and it can result in bugs.
  • Determine the importance of the modification. If your modification is not configurable in your theme or Magento admin, ask yourself: Is it essential to your brand, or your website’s interface? If not, try to eliminate the task, as it can be very costly in term of time and money investment trying to get the exact look you want.

However, we understand that there are times when the theme is critical to your business, you may still want to make the change anyway. There are 3 methods to do that: buy a new theme that has the option of your choice, contact a custom development service, or manually customize the theme yourself. In the scope of this article, we manage to give you some basic steps to manually customize the theme.

Manually customize Magento 2 theme basic tutorial with example

In this section, we will go through steps to basically customize Magento 2 theme by changing files with certain types in your website source code. These types are Javascript, CSS, phtml, and XML.

The manual customization below requires a decent knowledge of theme file structure, and in front-end website development. For the sake of simplicity, we use Luma and Blank as the enabled them in the examples below.

Customize Javascript file

Now we will try to add a class to an element on the homepage. After that, we can style that element the way we want, by defining style rules for the class added.

For example, we want to add a class named “customize-js” to the website header.

customize magento 2 theme attempt with JS file

We will log in to my FTP account using Filezilla, then go to vendor/magento/theme-frontend-blank/Magento_Theme/web/js

And edit theme.js. Then we will add this command:

$('.page-header').addClass('customize-js');

customize magento 2 theme attempt with JS file code

After that, we delete cache and pub/theme by the command:

rm -rf var/cache/ var/view_preprocessed/ var/page_cache/ pub/static/frontend/Magento/blank

And we will deploy and flush cache using:

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

The class is successfully added to the Homepage header.

customize magento 2 theme succeed with JS file

Customize CSS file

The CSS of a theme is generated through the .less file in standard settings. To customize the CSS, we go to the folder: vendor/magento/theme-frontend-blank/Magento_Theme/web/css/source.

Then we edit the file _module.less.

In this example, we want to change to color of the panel header into white, and change the color of the text inside to red.

customize magento 2 theme attempt with CSS file

We input these code to the file _module.less:

.page-wrapper {
    .page-header {
        .panel.wrapper {
            background-color: #ffffff;
            color: #000;
        }
    }
    .header.panel {
        >.header.links {
            >li {
                > a {
                    color: #f00;
                    &:visited {
                    color: #f00;
                    }
                }
            }
        }
    }
}

And we will deploy and flush cache using:

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

The color of the panel header and the text inside it is successfully changed.

customize magento 2 theme succeed with CSS file

Customize XML and pHTML file

In this case, we want to add an image as a block to the beginning of the homepage.

customize magento 2 theme attempt with XML and phtml file

First, we upload the image of our choice to the folder vendor/magento/theme-frontend-luma/web/images. The image in this example is named banner-test.jpg and look like this:

customize magento 2 theme test banner

Then we create a directory named: vendor/magento/theme-frontend-luma/Magento_Theme/templates/html

And we create a new file named test.phtml with the link to the image:

<?php?>
<img src='<?php echo $this->getViewFileUrl('images/banner-test.jpg'); ?>' alt="Demo">

After that, we go to the folder vendor/magento/theme-frontend-blank/etc and create a referenceContainer in the file view.xml:

<referenceContainer name="content">
    <container name="name-container" as="name.container" before="-" htmlTag="div" htmlClass="customize-layout">
        <block class="Magento\Framework\View\Element\Template" name="file-phtml" template="Magento_Theme::html/test.phtml"/>
    </container>
</referenceContainer>

customize magento 2 theme attempt with JS file
The image is successfully inserted to the beginning of the homepage.

customize magento 2 theme succeed with XML and xphtml

Magento 2 theme customization: in conclusion,

Customizing the theme in your Magento 2 site is an extremely broad matter. Because the desire to customize theme can be unlimited, it is impossible to have a magical theme that can change exactly the way you want in just some click (that’s why each theme needs a user guide itself). It is also impossible to write a guide that can help you customize any theme in detail.

In this article, we try to help you understand your needs for Magento 2 theme customization and determine if you should actually customize your theme, given its time and money cost acknowledged. We also give you some example on manually customizing certain types of file of your theme manually.

So do you have any more question regarding Magento 2 theme customization? Let us know right away in the comment section below, and we will respond promptly.

You can also browse the theme we have spent all our time and pride on to develop below.

customize magento 2 theme

Easiest 4-step-guide to translate your Magento 2 theme completely

Easy Magento 2 theme translation guide

In our previous article, we have written about how to change Magento 2 theme for your e-commerce website.

However, if your goods can be sold internationally, having a suitable theme is not enough. The default language of a Magento site is en_US, and while almost all Japanese visitors can still understand an English website, communicating with your visitors in their mother-tongue sells. Having your site theme successfully translated into the certain language that your visitors speak can guarantee you a drastic boost in sales.

Today, let’s talk about how to translate your Magento 2 theme into another language of your choice. This article introduces 4 steps to make a new version of your site in a new language: Create a new store view, download your desired language package, upload language package to server and enable the language in store view.

Step 1: Create a new store view

Although store views can be used for many purposes, they are mainly used to present the store in different languages. Customers use the language chooser in the header to change the store view. Read more about Magento hierarchy here.

Customer select language after Magento 2 theme translated

In order for your site to have a new language view, create a new store view by:

  • In the Magento Admin, click Stores > Settings > All Stores.
  • On the Stores page, click Create Store View.
    • Store list: Click the name of the store with which to associate this store view.
    • Name field: Enter a name to identify this store view.
    • Code field: Enter a unique name to identify this store view.
    • Status list: Click Enabled. The following figure shows an example.
  • Click Save Store View.

Step 2: Download your desired language package

Although some themes may have additional language packages installed, in general, theme folder does not include language package.

To check if your theme has the language package of your choice installed, simply go to your theme folder in pub/static/frontend/company_name/theme_name/

For example, let’s say we have 2 folders named “en_US” and “fr_FR”. This means that the theme already supports language package in English (for US region) and French (for French region).

check if your theme have your desired language pack in magento 2 theme translation

If you don’t find the language you want in this folder, go to Magento Marketplace to find your language package. And download it to your computer.
find your language pack in Magento Marketplace to translate magento 2 theme

Step 3: Upload language package to server

There are 2 ways to upload language package to server: using composer or manually.

1. Upload language package using composer

Get vendor name and module name in the file composer.json inside your language package.

get the composer name to translate magento 2 theme

Then input:

composer require [vendor_name]/[module_name]:dev-master
php bin/magento setup:static-content:deploy [language]
php bin/magento cache:flush

For example:

composer require bss/language-de_de:dev-master
php bin/magento setup:static-content:deploy de_de
php bin/magento cache:flush

2. Upload language package manually

Unzip the French language pack to Magento 2 root folder. /home/account_name/yourstore.com/public_html/

unzip [package].zip app/code/[vendor_name]/[language_region]

For example

Unzip de.zip app/code/bss/de_de

You also can unzip locally and upload them to Magento 2 root folder.

Step 4: Enable the language in store view

  • Go to Magento admin > Store > Settings > Configuration
    select configuration to translate magento 2 theme
  • Select the Store view you’ve just created
    select the store view to translate magento 2 theme
  • Then go to General > Locale options > Localeselect language pack to translate magento 2 theme
  • Then choose the language you want

Magento 2 theme translation: in conclusion

There you have your Magento 2 theme translated in your website. Enjoy your new store view first, so you can understand your customer’s in-mother-tongue buying experience.

 

So, do you have any more question regarding your Magento 2 theme translation? Let us know in the comment section below.

 

Also, if you want to upgrade your theme to a multi-language, rich-featured theme with a 5-star support team, you might want to take a look at the theme we spend months developing:

magento 2 theme translated theme

3 simple steps to change to your perfect Magento 2 theme

Change Magento 2 theme

In this article, we cover the topic of how to change a Magento 2 theme. You might be using Magento 2 for just a little while, and you discovered that Luma theme is not complicated enough for your business. Or you might be using another premium design, but it does not suit your needs anymore, and now you need a new one. Either way, this post is for you.

We will go through all steps of the process of switching the theme in Magento 2. If you find that for some reason, you have already been done with some steps, feel free to skip and move on to the next one. In order for you to change Magento 2 theme, we will have to: find and choose a suitable theme, download the theme, upload and install on our server.

Step 1: Find and choose a suitable Magento 2 theme

Firstly, you have to know where to look for when finding a new theme. There are places that serve you with many options for finding the web design that matches your needs. You can either go to marketplaces sites like Themeforest.

finding themes in market places to change magento 2 theme

Or browse in company sites like BSS Themes.

finding themes in company sites to change magento 2 theme

Secondly, you want to identify your website template needs clearly. What is the missing part of the current theme that you are looking for? Maybe you are not satisfied with the speed, the code structure of the theme, or simply the look of your current theme.

There are 2 approaches you can take when you choose a theme: either choose a very comprehensive theme that is very customizable (multi-function theme), or you choose a theme that has the default look closest to your website design expectation.

For example, the WordPress theme Avada offers a wide range of options that can suit almost any website’s needs,

choose a comprehensive theme to change magento 2 theme

and the Magento 2 Fashion theme that is optimized for clothing stores.

choose a fashion theme to change magento 2 theme

Note that usually, free themes do not have many options customization.

Step 2: Download the Magento 2 theme

If you choose a free theme, you can download the theme right away.

If you choose to invest more in your website’s look, buy a robust, premium theme that takes your website UX one step further.

After you have access to the theme file, either free or premium, download the zipped theme file to your computer.

Step 3: Upload and install the Magento 2 theme

You can browse our detailed guide to upload and install the Magento 2 theme.

Change Magento 2 theme: in conclusion

There you know exactly how to change Magento 2 theme. I hope that now you can have a website design that you absolutely love, and your customers feel eager to buy from. If you have any more question regarding switching Magento 2 theme, leave a short comment below, and we will respond shortly.

You can also browse the theme we have spent all our time and pride on to develop below.

change magento 2 theme to Thinnk

 

[Solved] Magento 2 theme CSS not loading

Magento-2-theme-CSS-not-loading

In our previous article, we have written about what to do when you accidentally delete your Magento default theme. But it is just one simple issue that can happen to your theme when you configure your website code.

Another more complex problem when configuring the website code is Magento 2 theme CSS not loading problem. You are changing the website code, and when you reload, all of the CSS of your website leaves you with no good-bye. And no matter how much time you change your theme, you beautiful multi-store website now has gone back to 2000s like this

Magento 2 theme CSS not loading example

This issue is caused by two main reasons: missing the .htaccess file in “pub/static/” folder or deploy incorrectly. To fix this, you have to either have your .htaccess restored or deploy all store views and themes.

Have your .htaccess restored

The most common cause of CSS not loading problem for Magento 2 is accidentally delete .htaccess in “pub/static/”. You can be sure that you have this problem by going to that folder and see this

magento 2 theme css not loading due to missing htcaccess in folder

when it actually has to be like this

magento 2 theme css loaded

To fix this, if you have a backup of your site, restore the latest backup that the .htaccess in pub/static/ not missing.

If you don’t have a backup of your site, you can either download our .htaccess and upload to the folder, or just restore it manually.

Deploy all stores and all themes

Deploy all stores

Another common mistake multi-store site owners make when setting up their sites ís deploy the wrong store view. If you have more than one store view for users with different languages, when you deploy, you can use the command like this:

php bin/magento setup:static-content:deploy 

(add “ -f” at the end if Magento version 2.2.x or higher)

This usually leads to only your en_US store deployed.

Magento 2 theme css not loading due to deploy only in en_US

So you have all other languages store view of your site not deployed. Now you have to deploy with all other store views that correlates with other language installed on your website. These can be done in 2 steps:

  1. Get your code language
    Go to Magento Admin > Store > Settings > Configuration > Select Store view
    There you have a list of languages enabled on your website. You have to get the language code of each language enabled, so click each one at a time.
    Magento 2 theme css not loading get language codeLet’s say we are getting the code of France language. Now hover over the language on the right of Locale options > Locale and right click, Inspect. Find the line with
    Selected=”select” in <td class=”value”> </td>. The language code is in that line’s <option value=”language_code”
    Magento 2 theme css not loading get language code 2
  2. Deploy your site in that language using the language code
    With the language code you’ve just got, input this line of code:

    php bin/magento setup:static-content:deploy language_code

    (add “ -f” at the end if Magento version 2.2.x or higher)
    In our example, we input:

    php bin/magento setup:static-content:deploy fr_FR

    (add “ -f” at the end if Magento version 2.2.x or higher)
    After that, you should be able to see something like this
    Magento 2 theme css loaded in french
    Then repeat from step 1 with each of the language view for your website.

Deploy with all themes

Usually, when you use a premium theme, after changing CSS and JS files, you only need to deploy using the code:

php bin/magento setup:static-content:deploy -f

However, in some rare cases, the theme is not fully developed, that it cannot be deployed using the above command. If you have tried all of the methods above, try to deploy the exact theme currently enabled on your site using the command:

php bin/magento setup:static-content:deploy --theme Vendor/Theme_name -f

For example,

php bin/magento setup:static-content:deploy --theme BSS/Thinnk -f

Magento 2 theme CSS not loading bug: in conclusion,

There you have your Magento 2 theme CSS not loading issue debugged. You can do this by either restoring .htaccess file in /pub/static or deploy correctly. Have a beautiful website working with multiple languages again!

Magento 2 theme css loaded beautifully

So, do you have any more question regarding your Magento 2 theme bug? Let us know in the comment section below.

Also, if you want to upgrade your theme to a bug-free, rich-featured theme with a 5-star support team, you might want to take a look at the theme we spend months developing

Magento 2 theme css not loadning

 

[2018 Updated] Magento 2 Luma theme download

Magento-2-Luma-theme-download

In our previous article, we have written about how to install Magento 2 theme manually

In this article, we want to help site owners and developers that have accidentally deleted Magento 2 Luma theme. You have been quite satisfied with the default theme that comes with Magento Community Edition, but when you edit the code and files, somehow you make a wrong decision, and your site’s beauty has gone with the wind. Instead, you receive some message like this:

Magento 2 luma theme accidentally deleted

Now you would want to have your beautiful site’s theme function normally again. There are 2 solutions for this problem: Download Luma theme again and put it in the right place, or just run Composer Update command. Today, we will tackle both methods, although we recommend not downloading Luma theme as it does not require the exact version of Magento Luma theme.

Download Luma Theme

You can download Luma theme for Magento 2.2.3 here.

Then you want to put the theme in the right folder. The original Luma folder is located in [site directory] > vendor > magento. So you want to upload your unzipped Luma theme folder to this folder.

  • First, log in to your SSH account using Filezilla.
  • Locate the unzipped Luma theme folder in Local site (named “theme-frontend-luma”).
    downloaded magento 2 luma theme directory
  • Locate [site directory] > vendor > magento in Remote site.
    Magento 2 luma theme server directory
  • Drag unzipped folder and drop to the folder [site directory] > vendor > magento.
    drag and drop magento 2 luma theme folder to original directory
  • Wait for some minutes.

Using Composer Update command

If you are using Magento 2 with the version other than 2.2.3, then you should use Composer Update command, as we do not provide Luma theme file for all Magento 2 version.

Since Luma theme is a Magento default theme, it can be easily restored by using composer update command. You don’t need to have any file downloaded to your computer; you only need to know how to input code to config your website. This method is more recommended for people know how to code.

  • Log in to your SSH account using PuTTY.
  • Input this code:

    composer update
  • If authentication is required,
    magento-2-blank-theme-download-authentication-requiredlog in to your account in Magento. Then go to Magento Access Key page. Create a new Access key if necessary, then use Public key as the username, Private key as the Password. Store your credentials if you want, but we recommend not storing.
    magento-2-blank-theme-download-update-log

Magento 2 Luma theme download: in conclusion,

Now your luma theme should be back to normal. It’s as simple as that.

magento-2-luma-theme-download-fixed

So go ahead and try it yourself! Although you may want to download the Luma theme, we recommend that you just use upgrade command to restore the site back to its original theme. The latter seems a lot more convenient and fast than the former.

So, do you have any more question regarding your Magento 2 default Luma theme? Let us know in the comment section below.

Also, if you want to upgrade your default theme to a premium, rich-featured theme with a 5-star support team, you might want to take a look at the theme we spend months developing.

magento 2 luma theme download

How to install Magento 2 theme manually

 install Magento 2 theme manually

For English Subtitle, press the CC Button > select English

English Transcription below:

Hi. My name is Bach, from BSS Themes. Today I’m here to help you to install your Magento 2 Theme manually.

So now you’ve browsed and successfully downloaded the Magento 2 theme for your Store.

Congratulation! Your website is about to have a whole new Interface, which may excite your visitors and probably brings you more leads and sales this month.

However, in order for the new theme to work flawlessly, you have to have your Magento 2 theme installed correctly. There are several ways to upload a theme, out of which we can divide into 2 categories: manually or using a command. This video focuses on helping you upload your Magento theme manually and install it,  due to the simplicity and low requirement of coding experience. Therefore, the information presented here suits best for e-commerce stores with small developer team, and don’t have much experience working with Magento 2 modules and installation.

Without further words, here is the simplest way to install Magento theme manually.

Upload Magento 2 theme manually

To begin installing, go to the folder containing the zipped theme file and unzip the file. As you can see here I’ve already unzipped the file to this folder.

Then, log in to your FTP Account using FileZilla. As you can see here I’ve already logged in to my FTP account so that there are folders here in the remote site.

In the next step, you select all unzipped files and drag them to Server Site Directory in Filezilla. You can open the unzipped file here. And as we can see, there are zipped files which align with the version of Magento we are using. In this case, I’m using Magento version 2.2.3, so I select this file and extract it to this folder. We open that folder. And as we can see, there are two folders in the unzipped folder that is named “app” and “pub”. And that’s exactly the same name as the folders in Magento223-bach – that is my site directory.

The next step is to copy all the files in the local site to the remote site that is right in this directory. We simply do it by selecting all the files in the local site and drag them to the site directory here.

Then, all you have to do is wait. This may take up to 30 minutes, depends on which theme you have. In here we have a very strong theme with a lot of features, so that’s gonna take time to upload the theme via this method.

So, in order not to waste your time, you should go and practice yourself, and I’m going to skip this section.

Install Magento 2 theme in 6 steps

So after a long time waiting, you’ve successfully uploaded and unzipped your theme to your server.

After this, in order for the theme to display on your site the same as the theme demo, you have to do 6 more steps to install the theme.

  1. Upgrade
  2. Deploy
  3. Flush the cache
  4. Enable the theme
  5. Import data sample
  6. Flush the cache again

Upgrade

To upgrade, you have to have a terminal emulator installed. In this case, I’m using PuTTY. Begin by logging in your SSH Account using PuTTY. Begin by logging in your SSH Account using PuTTY. As you can see, I’ve already logged in. Then input this line of code

php bin/magento setup:upgrade install magento 2 theme Upgrade  

Then you enter. You would have to wait a little bit. Yes, that’s all.

Deploy

To Deploy, go back to the terminal emulator in case you use Magento version 2.1.x and lower, input this line of code:

php bin/magento setup:static-content:deploy

However, in this case, I’m using Magento version 2.2.x and above, I have to add “-f” here, so the code would be like this

php bin/magento setup:static-content:deploy –f

Then hit enter. Wait for some seconds.

Ok. This means that we’ve successfully deployed.

Flush the cache

To Flush cache, we simply go to your Magento Admin System > Tools > Cache Management and we hit Flush Magento Cache.

Enable the theme

To enable the theme, go to Magento Admin > Content > Design > Configuration. Now you edit the Main Website Store > Select the theme you’ve just installed.

install Magento 2 theme step 1 to Enable themeBy default, the theme will be Magento Luma, and now you want to select the theme you installed and Save Configuration.

install magento 2 theme enable step 2

Import data sample

To import demo data, you go to your Magento Admin and import Data like this. Go to the Theme section > Theme Settings > Import Data.

install magento 2 theme import dataIn our Thinnk theme, you can comfortably choose to import both CMS Pages and Blocks. And you hit Import.

 

install magento 2 theme select theme to import

Flush the cache again

The same as step 3 above.

So there, you have a beautiful and full-featured theme installed on your website. The achievement is sweet, as you can see. Yes, very beautiful.

Do you have any more question regarding installing theme manually for your Magento 2 site? Let us know in the comment section below.

In a hurry? Receive this video tutorial and its PDF transcript right at your email for free.

4 simplest ways to upload a Magento 2 theme (with image)

Upload Magento 2 theme

So now you’ve browsed and successfully downloaded the Magento 2 theme for your Store. Congratulation! Your website is about to have a whole new Interface, which may excite your visitors and probably brings you more leads and sales this month.

However, you have two more steps to successfully have your theme work for you: Upload Magento 2 Theme and Install it. This may sound easy at first, but without coding knowledge and Magento Module Installation experience, this work could become hours of finding the bug, fixing the errors, giving the wrong command and even mistakenly delete your website’s precious customer data.

This article presents to you 4 main ways to upload your just-downloaded-theme to your server, even without the help of a developer. These 4 ways are: Upload by uploading the unzipped file via FTP, upload by uploading the zipped file via FTP, upload via cPanel, and lastly upload using Composer. To ensure you would not lose your previous work, we encourage you to set up a new branch to come back when you want.

1. Upload Magento 2 theme by uploading the unzipped file via FTP (slowest method)

  • Log in to your FTP Account using FileZilla
    Log In Filezilla to upload Magento 2 theme
  • Go to <theme> folder in your computer, it’s where you see something like this

    select magento 2 theme unzipped files
  • Select all files, and drag them to Server Site Directory in Filezilla
    drag unzipped Magento 2 theme here
  • Wait (may take up to 30 minutes, depends on which theme you have) until all files are transferred successfully

    Wait for Unzipped files to upload successfully

2. Upload Magento 2 theme by uploading the zipped file via FTP (fast method)

  • Log in to your FTP Account using FileZilla
  • Select your zipped theme file
  • Upload the file
    drag zipped Magento 2 theme here
  • Unzip Theme file using SSH:

    unzip [theme name].zip

3. Upload Magento 2 theme via cPanel (faster method)

  • Log in to your cPanel account
  • Find File Manager
    Find file manager to upload magento 2 theme
  • Select site directory: Usually it is located in /var/www/html/[your website name]/
  • Click Upload
    Click Upload magento 2 theme
  • Choose your zipped Theme file
  • Extract the uploaded file

    Extract uploaded zipped magento 2 theme

4. Upload Magento 2 theme via Composer (fastest method)

  • Get the theme’s Composer name.
    you can find the name and version of any module (whether or not you purchased it on Marketplace) in the module’s composer.json file. Open App > Code > [Theme name] > Setup > composer.json in a text editor and find the values of “name” and “version”.
  • Change to your Magento root directory and enter the command:
composer require [vendor]/[theme name]:[version]

For example,

composer require BSS/THINNK-THEME:1.0.0
  • Wait for dependencies to update.

After uploaded and unzipped the theme successfully, you have to install the theme by upgrade setup, import demo data, deploy, and flush cache to have your theme installed just the way you see the theme demo. The procedure results from Magento’s natural system.

Bonus: Install after uploading Magento 2 Theme

  • Upgrade Setup: Input

    php bin/magento setup:upgrade 

    Upgrade Magento 2 Theme After Upload

  • Deploy
    • In case you use Magento version 2.2.x and above, input

      php bin/magento setup:static-content:deploy –f 
    • In case you use Magento version 2.1.x and lower, input

      php bin/magento setup:static-content:deploy
  • Go to your Magento Admin > Content > Design > Configuration > Edit Main Website Store >

    Enable Magento 2 theme after uploadThen Select your theme > Save Configuration

    select your magento 2 theme to enable after upload
  • Flush Cache
  • Import Demo Data

    Import data from your magento 2 theme after upload
  • Flush Cache

Upload Magento 2 theme, in conclusion

There you have your theme fully uploaded with full CMS, Blocks to the server.

Next, to display your theme, you have to install the theme correctly.

If you have any more question regarding uploading Magento 2 theme, leave a short comment below, and we will respond shortly.

You can also browse the theme we have spent all our time and pride on to develop below. 

Upload magento 2 theme