[Fixed] Magento 2 Unable to load theme by specified key error

magento_2_unable_to_load_theme_by_specified_key_featured

You have been seeing this error lately. It says “unable to load theme by specified key“.

magento_2_unable_to_load_theme_by_specified_key

Ouch. So what is the cause of this, and how to fix this?

This article answers both questions above.

The cause of Unable to load theme by specified key error

The root of this error is: you are having one or more theme deleted in your code, but not fully deleted in related table(s) in your site’s Database.

There are two common scenarios when you encounter this error.

The first one is when you migrate Magento version 1 to Magento version 2, and the theme you were using did not support Magento version 2.

The second one is when you delete your theme not thoroughly.

Either way, you would be advised to fix the error by one simple way.

The solution for Unable to load theme by specified key error

In order to fix this error, you have to remove the row of the theme with the key in the error log in the core_config_data table.

You can either do this via SSH or SQL Admin tools.

Using SSH

For those of you who are more experienced and want to get things done fast, use SSH.

  • Open a Terminal Emulator such as PuTTY. Log in to your SQL account.
  • Then input:
    delete from core_config_data where path = 'design/theme/theme_id' and value = '<your key>';
  • Note: <your key> here is the key in the error log. With the example above, <your key> is 4.
    magento_2_unable_to_load_theme_by_specified_key_number
  • Then flush cache.

Using a SQL Admin tools

For those of you who prefer a more visual way to fix things, use a SQL Admin tool.

  • Open a SQL Admin tool such as Adminer. Log in to your Adminer account.
  • Find table named core_config_data.
  • Find the row with the path = ‘design/theme/theme_id’ and value = ‘<your key>’.
    magento_2_unable_to_load_theme_by_specified_key_adminer
  • Then flush cache.

Unable to load theme by specified key error: In conclusion,

This problem is quite common and yet easy to fix. Following this guide should make your website back to normal, without the asynchronicity of the theme files and Database.

If you do migration from Magento version 1 to version 2, hire Magento experts to migrate for you to prevent further hard-to-notice bugs and errors like this.

Do you find this debug guide easy to follow? Do you have any more question? Let us know in the comment below.

Take a look at our gallery of premium and free Magento 2 themes. Click the image below!

magento_2_themes

[2018 Updated] Magento 2 Blank theme download

magento-2-blank-theme-download

In this article, we want to help site owners and developers that have accidentally deleted Magento 2 Blank 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-blank-theme-download-error-log

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

Download Blank Theme

You can download Blank theme for Magento version 2.2.3 here.

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

  • First, log in to your SSH account using Filezilla.
  • Locate the unzipped Blank theme folder in Local site (named “theme-frontend-blank”).
    magento-2-blank-theme-download-to-your-pc
  • 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.
    magento-2-blank-theme-download-drop-file-to-server
  • 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 Blank theme file for all Magento 2 version.

Since Blank theme is a Magento default theme, it can be 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, and a Magento account. 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 Blank theme download: in conclusion,

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

magento-2-blank-theme-fixed

So go ahead and try it yourself! Although you may want to download Magento 2 Blank theme, we recommend that you just use Composer update command to restore the site back to its original theme. The latter seems a lot more convenient, bug-free and faster 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, take a look at the theme we spend months developing.

magento-2-themes

11 downloadable Magento 2 free themes – with documentation

magento-2-free-theme-with-documentation

Documentation is the castor oil of programming.

– Gerald M. Weinberg

Indeed, documentation is crucial for the user to deploy and make use of any software. When it comes to Magento 2 themes, documentation becomes even more important.

In our previous post on best Magento 2 free themes, we have listed every active free theme that we can find on the Internet.

However, we understand that it is not good enough since some themes in the list do not include documentation. And some themes’ documentation is hard to find.

In this post, we present to you 11 downloadable Magento 2 free themes with documentation. We even guide you to the location of the documentation, as we think some vendors make finding documentation difficult.

So without further explanation, here’s the list you’ve been waiting for!

# Name Vendor M2 version Compatibility
1 Citrine BSS Themes 2.2.x
2 Ves Need Venus Theme 2.0.x, 2.1.x
3 Absolute Swiss Up Labs 2.1.x
4 Pixtron Hidden Techies 2.2.x
5 Ves Kasitoo Venus Theme 2.0.x, 2.1.x
6 Bentriz Hidden Techies 2.2.x
7 Ves Vigoss Venus Theme 2.0.x, 2.1.x
8 Ves Fasony Venus Theme 2.0.x, 2.1.x
9 BizKick Hidden Techies 2.2.x
10 FreeGo Solwin InfoTech 2.0.x
11 F2 WT 2.0.x

1. Citrine

magento-2-free-theme-with-documentation-citrine

Vendor: BSS Themes

Magento 2 version compatibility: 2.2.x

Download from product page: link

Documentation location: Product page > Document

documentation-guide-citrine

2. Ves Need

magento-2-free-theme-with-documentation-ves-need

Vendor: Venus Theme

Magento 2 version compatibility: 2.0.x, 2.1.x

Download from product page: link

Documentation location: [theme_file] > guides > documentation > index.html

documentation-guide-ves

3. Absolute

magento-2-free-theme-with-documentation-absolute

Vendor: Swiss Up Labs

Magento 2 version compatibility: 2.1.x

Download from product page: link

Documentation location: Go to link.

documentation-guide-absolute

4. Pixtron

magento-2-free-theme-with-documentation-pixtron

Vendor: Hidden Techies

Magento 2 version compatibility: 2.2.x

Download from product page: link

Documentation location: Product page > User Guide

documentation-guide-hidden-techies

5. Ves Kasitoo

magento-2-free-theme-with-documentation-ves-kasitoo

Vendor: Venus Theme

Magento 2 version compatibility: 2.0.x, 2.1.x

Download from product page: link

Documentation location: [theme_file] > guides > documentation > index.html

documentation-guide-ves

6. Bentriz

magento-2-free-theme-with-documentation-bentriz

Vendor: Hidden Techies

Magento 2 version compatibility: 2.2.x

Download from product page: link

Documentation location: Product page > User Guide

documentation-guide-hidden-techies

7. Ves Vigoss

magento-2-free-theme-with-documentation-ves-vigoss

Vendor: Venus Theme

Magento 2 version compatibility: 2.0.x, 2.1.x

Download from product page: link

Documentation location: [theme_file] > guides > documentation > index.html

documentation-guide-ves

8. Ves Fasony

magento-2-free-theme-with-documentation-ves-fasony

Vendor: Venus Theme

Magento 2 version compatibility: 2.0.x, 2.1.x

Download from product page: link

Documentation location: [theme_file] > guides > documentation > index.html

documentation-guide-ves

9. BizKick

magento-2-free-theme-with-documentation-bizkick

Vendor: Hidden Techies

Magento 2 version compatibility: 2.2.x

Download from product page: link

Documentation location: Product page > User Guide

documentation-guide-hidden-techies

10. FreeGo

magento-2-free-theme-with-documentation-freego

Vendor: Solwin InfoTech

Magento 2 version compatibility: 2.0.x

Download from product page: link

Documentation location: Product page > User Installation Guide

documentation-guide-solwin-infotech

11. F2

magento-2-free-theme-with-documentation-f2

Vendor: WT

Magento 2 version compatibility: 2.0.x

Download from product page: link

Documentation location: Go to link. There is no documentation link in the product page, and we have to contact support for that link.

documentation-guide-WT

Magento 2 theme free download with documentation: In conclusion,

So that’s it. We hope that you enjoy your time surfing pages of documentation in this list of Magento 2 free themes.

Tell us your thought on this list. Is there any theme you want to add? Any theme’s information is wrong? Tell us in the comment section below.

Interested in our themes? Browse our list of both free and premium themes by clicking the image below.

magento 2 themes

A beginner’s guide to magento 2 child theme

magento 2 child theme beginner's guide

You might have a vague idea of Magento 2 child theme. However, you might not know what it exactly is, why and how to use it.

This is a beginner’s guide to Magento 2 child theme. In this post, we want to solidify your knowledge of Magento 2 child theme. There are 3 main points we want to discuss: child theme definition, the top reasons for using child theme, and how to create a Magento 2 child theme.

Magento 2 child theme definition

In Magento 2, a child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child theme is the recommended way of modifying an existing theme.

There is no limit of the number of inheritance used.

The Magento 2 system is using Theme inheritance on the fallback mechanism. This means that if a view file’s styling is not found in the current theme, the system searches in the ancestor themes, module view files or library for a replacement.

Top reasons for using child theme

Using child theme ensures the clarity of each individual theme.

Just like if you modify the website, you would use a backup. If you update your website’s theme, you use a child theme. There are a couple of reasons for this:

  1. When the child theme is filled with so many bugs that you simply do not want to fix anymore, you can revert back to parent theme in just few clicks. This saves development time.
  2. When the parent theme is updated, the modification made to the child theme still remains.

Having that being said, if you really believe you can modify the theme with minor bug (which is hardly the case of real life) AND have no intention of any further update of the parent theme, go ahead and edit the theme source code directly.

Otherwise, use a child theme.

How to create a Magento 2 child theme

The only difference between creating a Magento 2 child theme and a Magento 2 brand new theme is the <parent> tag in theme.xml.

  • If you want to create a child theme, declare the parent theme by <parent> tag.
  • If you want to create a brand new theme, simply exclude <parent> tag in theme.xml.

You can browse our guide to create Magento 2 theme here. In this guide, we also suggest you create a child theme with Blank as a parent theme.

Magento 2 child theme: In conclusion

By now we hope that by now you have had a glimpse of the what, why, and how for Magento 2 child theme. As a developer, take advantage of child theme to successfully modify the theme without risk.

You can create child theme from any theme. For example, the second theme we made, Topaz, is the child theme of our first-made Thinnk. However, our free Citrine theme inherits from default Blank.

For your reference, you can browse our list of themes by clicking on the image from below.

magento 2 themes

 

Magento 2 themes: BSS’ collection

BSS' collection

In this post, we will introduce to you our collection of Magento 2 themes.

Being a Magento Technology Partner, we are confident that you are going to love the quality of the collection.

Inside this collection, you would find our hand-crafted themes, made with extra attention and quality-checked with great scrutiny and care.

Our themes strictly follow Magento 2 Extension Quality Program, meaning better coding structure, performance, scalability, and compatibility with Magento core.

All of our themes (both premium and free ones) are made to be responsive on screen width ranging from 320 px to 4k px, and freely configurable.

That’s for now. We hope that you enjoy this collection.

1. THINNK

magento-2-theme-thinnk

THINNK is the one theme that started it all. It is inherited from BSS Default, which is the child theme of Magento default theme Blank. Our BSS default is made solely for the function, not the design, so we do not present to you.

Although previously, for 4 years we had been making various custom themes for customers of BSS Geek (from bikini to motor sellers), THINNK was the first theme that we package and present to the public.

The theme was designed based on our previous experience working with customers from all industries with different company size.

Moreover, it was made of our love, passion, and vision of giving online store owners the best web design.

The main color used is orange and navy, creating a sense of modernity and feminity. The design also makes use of both Serif and Sans-serif font.

There are many spaces between sections of the theme, making the eyes rest and the message more readable.

Available features:

  • 320 – 4k screen width responsive
  • Unlimited font and color choice
  • 1 – 6 column number option in category page
  • Customizable banner slider
  • Powerful Megamenu
  • Sticky header
  • Layered navigation
  • Blog content and category module
  • Hot Deal widget
  • Price and ratings display options

So make sure to check it out.

magento-2-theme-thinnk-2

Go to THINNK Product page | View THINNK Demo

2. Topaz

magento-2-theme-topaz

Topaz is the child theme of THINNK. It inherited all the good things from THINNK, and it contains the theme THINNK inside it.

Topaz was our second theme that makes it to the public. From this theme, all our themes would be named after a type of crystal.

This theme can be used for various industry, although it has many sections that support fashion stores.

In our latest update, Topaz has been standardized to follow Magento’s Extension Quality Program. The theme’s quality has been checked and approved by Template Monsters.

Available features:

  • Included THINNK
  • 320 – 4k screen width responsive
  • Unlimited font and color choice
  • 1 – 6 column number option in category page
  • Customizable banner slider
  • Powerful Megamenu
  • Sticky header
  • Layered navigation
  • Blog content and category module
  • A unique set of Icon
  • Fully Search Engine Optimized

Make sure to check it out!

magento-2-theme-topaz-2

Go to Topaz Product page | View Topaz Demo

3. Citrine

magento-2-theme-citrine

Citrine is another story. It is a wide horse that inherits from BSS default.

In making Citrine, we think that everyone on the internet, including Magento 2 beginners and basic users, should be able to access Magento 2 high-quality themes without having to pay.

Although it lacks strong functions, the theme is developed in a lean manner and can function basically with low page speed.

The color palette is dark yellow and black

On top of all, you can download it for free.

Available features:

  • 320 – 4k screen width responsive
  • Unlimited font and color choice
  • 1 – 6 column number option in category page
  • A unique set of Icon
  • Fully Search Engine Optimized

Make sure to take a look!

magento-2-theme-citrine-2

Go to Citrine Product page | View Topaz Demo

Magento 2 themes: In conclusion,

We are always moving forward in terms of updating the themes to add more powerful features. Please that note that according to our Terms and Conditions, all our premium themes are provided with lifetime free update.

Aside from that is 1 year of free support, installation, and 30-day-money-back.

That’s why we see no reason for you not to see our collection of themes below. Make sure to check out!

magento 2 themes

[2018 Updated] 16 best Magento 2 free themes

best Magento 2 free themes

At the publication of this post (06/28/2018), there are dozens of free Magento 2 free themes on the internet. Many of them crash and burn without any care from their makers, namely Database error, not updated to the current version of Magento, Captcha download error or anything you can think of.

However, we still believe in the sweetness of free things on the Internet. So this post lists all of the active Magento 2 free themes till the publication of this post. “Active” means we can see the demo functions correctly, and the theme can be downloaded for deployment or deployed directly on a cloud hostings.

You can benefit from this post if you are a starter or low-budgeted Magento 2 store owner, or a starter Magento 2 front-end developer.

Store owners can save time and money by choosing the themes that best suits their design, with the suitable compatibility and features, and easy installation and configuration.

There are 16 free Magento 2 themes at this moment:

# Name Vendor Magento 2 version compatibility
1 Ketty WT 2.0.x
2 Citrine BSS Themes 2.2.x
3 Ves Need Venus Themes 2.0.x, 2.1.x
4 Absolute Swiss Up Labs 2.1.x
5 Pixtron Hidden Techies 2.2.x
6 Ves Kasitoo Venus Themes 2.0.x, 2.1.x
7 Bentriz Hidden Techies 2.2.x
8 Ves Vigoss Venus Themes 2.0.x, 2.1.x
9 Ves Yume Venus Themes 2.0.x, 2.1.x
10 Ves Fasony Venus Themes 2.0.x, 2.1.x
11 BizKick Hidden Techies 2.2.x
12 FreeGo Solwin InfoTech 2.0.x
13 F2 WT 2.0.x
14 Fashion House Mage Cloud 2.1.x
15 Gift Mage Cloud 2.1.x
16 Accessories Mage Cloud 2.1.x

1. Ketty

free-magento-2-theme-ketty

  • Vendor: WT
  • Magento 2 version compatibility: 2.0.x
  • Top features:
    • AJAX Add to cart
    • Banner slider
  • Installation guide: Not included
  • User’s guide: Not included
  • Our comment: Clean theme with slow and elegant animation. Although the font choice of the design conveys youth and feminity due to its light weight, the font somehow lacks emphasis, and can be monotone with over-usage. Check out is fast with AJAX Add to cart.

2. Citrine

magento-2-free-theme-citrine

  • Vendor: BSS Themes
  • Magento 2 version compatibility: 2.2.x
  • Top features:
    • Unique iconset
    • 320px to 4000px responsive,
    • Unlimited color and font choice
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: Beautiful theme with a great deal of configurability. It has good documentation, mobile-first design and a modern iconset for free. The design creates a solid feeling that makes this theme suitable for furniture brands.

3. Ves Need

magento-2-free-theme-ves-need

  • Vendor: Venus Themes
  • Magento 2 version compatibility: 2.0.x, 2.1.x
  • Top features:
    • Fast checkout
    • Off canvas menu
    • Banner slider
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: Good design with some animation. Looks good on mobile with off-canvas menu. Basic font that can be added with more depth.

4. Absolute

magento-2-free-theme-absolute

  • Vendor: Swiss Up Labs
  • Magento 2 version compatibility: 2.1.x
  • Top features:
    • Banner slider
    • Product quick view
    • Theme editor
  • Installation guide: Included
  • User’s guide: Not included
  • Our comment: Very old-style design with good functionality. Very friendly admin UX with theme editor. Also very good in terms of pagespeed.

5. Pixtron

magento-2-free-theme-pixtron

  • Vendor: Hidden Techies
  • Magento 2 version compatibility: 2.2.x
  • Top features:
    • Banner slider
    • Product slider
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: The overall design is beautiful with nice color palette. The animation is nice and slow. However, it still has small bug in the buying process (cart page is not accessible).

6. Ves Kasitoo

magento-2-free-theme-ves-kasitoo

  • Vendor: Venus Themes
  • Magento 2 version compatibility: 2.0.x, 2.1.x
  • Top features:
    • Products carousel
    • Fast checkout
    • Off canvas menu
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: Impressive design with high contrast and negative color choice for header and footer. Diverse in hover animation. Flat and modern design. Has small bug in terms of hover on products on homepage.

7. Bentriz

magento-2-free-theme-ves-bentriz

  • Vendor: Hidden Techies
  • Magento 2 version compatibility: 2.2.x
  • Top features:
    • Banner slider
    • Product slider
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: Modern and strong design that creates a sense of strength and solidity. Color usage is hot and impressive.

8. Ves Vigoss

magento-2-free-theme-ves-vigoss

  • Vendor: Venus Themes
  • Magento 2 version compatibility: 2.0.x, 2.1.x
  • Top features:
    • Fast checkout
    • Off canvas mega menu
    • Layered navigation
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: Has good product filter. Megamenu makes promoting product easier. Has bug after adding products to cart, that changes to other product’s image.

9. Ves Yume

magento-2-free-theme-ves-yume

  • Vendor: Venus Themes
  • Magento 2 version compatibility: 2.0.x, 2.1.x
  • Top features:
    • Fast checkout
    • Off anvas Menu
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: The design is clean with few sections. Lacks sophistication. Checkout user experience is fast.

10. Ves Fasony

magento-2-free-theme-ves-fasony

  • Vendor: Venus Themes
  • Magento 2 version compatibility: 2.0.x, 2.1.x
  • Top features:
    • Banner slider
    • Fast checkout
    • Off canvas menu
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: Beautiful full-width theme with fast adding to cart. Looks good on mobile with off-canvas menu.

11. BizKick

magento-2-free-theme-bizkick

  • Vendor: Hidden Techies
  • Magento 2 version compatibility: 2.2.x
  • Top features:
    • New & featured product in homepage
    • Product quickview
    • Quick checkout
  • Installation guide: Included
  • User’s guide: Included
  • Our comment: The overall design is great, however it can be improved by containing a little less text in homepage. Great product quickview function in cateogry page.

12. FreeGo

magento-2-free-theme-ves-freego

  • Vendor: Solwin InfoTech
  • Magento 2 version compatibility: 2.0.x
  • Top features:
    • Banner slider
    • Sold out labels
    • Off canvas menu
  • Installation guide: Included
  • User’s guide: Not included
  • Our comment: The design is mediocre. The product image in category page is not clickable, making category’s UX drop.

13. F2

magento-2-free-theme-f2

  • Vendor: WT
  • Magento 2 version compatibility: 2.0.x
  • Top features:
    • Sticky headers
    • New sale label
    • Banner slider
  • Installation guide: Uneasy to access
  • User’s guide: Uneasy to access
  • Our comment: Unconventional full-width design with right-column sticky menu bar. The usability of this menu bar, therefore might be questionable. Popup menu is impressive.

14. Fashion House

magento-2-free-theme-fashion-house

  • Vendor: Mage Cloud
  • Magento 2 version compatibility: 2.1.x
  • Top features:
    • Banner slider
    • Mega menu
  • Installation guide: Not included
  • User’s guide: Not included
  • Our comment: Exquisite design with a lot of blank spaces.This creates a sense of relaxation, and give a clear understanding of the content of the site. Smooth mega menu and banner slider included.

15. Gift

magento-2-free-theme-gift

  • Vendor: Mage Cloud
  • Magento 2 version compatibility: 2.1.x
  • Top features:
    • Product quickview
    • Banner slider
    • Mega menu
  • Installation guide: Not included
  • User’s guide: Not included
  • Our comment: Minimalist design that embraces the use of round square block with large icon and text in image. Easy-to-use product quickview function and.

16. Accessories

magento-2-free-theme-accessories

  • Vendor: Mage Cloud
  • Magento 2 version compatibility: 2.1.x
  • Top features:
    • Product quickview
    • Banner slider
    • Mega menu
  • Installation guide: Not included
  • User’s guide: Not included
  • Our comment: Design lacks blank space making things messy. Too many colors used.

Magento 2 free themes: In conclusion,

So that’s a list of Magento 2 free themes. We hope that you would have a great time browsing all these active themes and choose the best theme that suits your need.

Do you have any question regarding Magento 2 free themes? Let us know in the comment section below.

If you wish to upgrade to premium themes with the strongest feature and absolutely stunning design, you can browse our themes from below.

magento 2 themes

Magento 2 Luma theme location

Magento 2 Luma theme location

Where is Magento 2 luma theme located?

The quick answer is in the [site directory]/vendor/magento.

luma-and-blank-theme-location

However, the long detailed answer raises up other questions as well. Beginner Magento 2 front-end developers might ask:

  • What is the directory of themes other than Luma as well?
  • Is the theme presented directly to the website visitor’s view in Magento 2?

In this article, we will answer 2 questions above, written in simple English so that beginner Magento front-end developers can easily understand.

Magento 2 theme location

In Magento 2, there are 2 default themes that are used for demonstration of a Magento website. They are Luma and Blank, with the formal being the child theme of the latter.

However, as Magento is an open-source e-commerce platform, various themes and extensions for Magento are developed by developers from the community. And the themes that are made by the community are not located in the same folder as Magento 2 default themes.

Indeed, Luma and Blank are located in vendor/magento folder, while other themes are located in app/design/frontend/[vendor_name]/[theme_name]. For example, our vendor name is Bss, and we make a theme named Thinnk. The location of our theme on the website would be app/design/frontend/Bss/thinnk.

other-theme-location-example

The reason for this is: Magento core are developed with scalability in mind. To keep this scalability, you should not edit any code inside the vendor folder according to Magento 2 official Dev Docs. Any development of a third-party module or continuation of developing current modules should be made in folder app. In the theme scene, the theme files is in app/design/frontend/[vendor_name]/[theme_name].

Given that, if you want to upload a theme to your Magento 2 store, upload to these folders. However, if you want to restore your Luma or Blank in case of error, consider a smarter way other than downloading Luma.

Theme code location that the browser reads

The 3rd-party theme uploaded to app/design/frontend/bss/thinnk is not presented directly to the website visitor’s view.

Instead, in Magento 2, the code of the themes and modules are generated to the folder pub using a deploy command:

php bin/magento setup:static-content:deploy

 

Having a separate pub folder increases the security of the website, makes use of cache and makes developing and installing new module hassle-free. This, once again, confirms the scalability of Magento.

The theme files that are rendered to pub can be accessed in pub/static/frontend/[vendor_name]/[module_name].

  • For Luma theme in pub, theme files are located in pub/static/frontend/Magento/luma

  • For the theme in our preview example, theme files are located in pub/static/frontend/Bss/thinnk.
    other-theme-location-pub

Magento 2 Luma theme location: In conclusion,

By now we hope that you have a decent understanding of Magento 2 Luma theme location, and the logic behind its folder architecture. Do you have any other question regarding Magento 2 theme location? Let us know in the comment below, and we would love to answer with our knowledge.

In case you want to learn more about Magento 2 theme by installing a new theme, free or premium, you can take a look at our themes category.

magento 2 themes

5 installation steps for Magento 2 theme

5 installation steps for Magento 2 theme (2)
After uploading, the website admin needs to install Magento 2 theme. For starter, there are 5 steps to successfully install Magento 2 theme on a website. Those steps are further explored in the slideshow below.

 

 

In a hurry? Here’s the Download link.
By now, we hope that you’ve had a good understanding of how to install Magento 2 theme. Do you have any question regarding Magento 2 themes? Browse our blogs or leave  comment for more Magento 2 theme tutorials.

3 easy steps to create your very first Magento 2 theme

How to create Magento 2 theme

You have just decided: you are going to create a Magento 2 theme. Great! That’s why today we write this entire article to help you achieve your mission!

The first thing to bear in mind: do NOT directly edit default themes. This is the mistake that most beginners make, as this makes future upgrading and doing maintenance impossible.

There are 3 steps to create Magento 2 theme:

  1. Create a new theme directory
  2. Declare the new theme
  3. Apply and configure theme in admin

In this article, we will walk through all 3 steps. Make sure not to skip any step, as each one is important itself.

1. Create a new theme directory

Magento 2 theme directory is located in app/design/frontend.

You need to create the directory named <vendor>/<theme_name> inside this directory. You can do so using file transferring software such as FileZilla.

For example, we create app/design/frontend/Bss/default.

create-magento-2-theme-from-scratch-theme-directory

 

2. Declare the new theme

After creating the theme directory, you have to create files to declare the new theme: theme.xml, composer.json, registration.php, static files, logo folder.

Create theme.xml

The theme.xml should be created in the directory:

<your Magento install dir>app/design/frontend/<your_vendor>/<your_theme/theme.xml

This file’s content has to contain:

  • Title tag. This is displayed in the Magento admin as the name of the theme. This can be viewed in Admin > Content > Design > Configuration > Default Store View.
    For example, in our theme.xml file, we write:

    <title>Bss default</title>

    create-magento-2-theme-from-scratch-theme-title

  • Parent tag. For starter, insert “Magento/blank” into <parent></parent>. This makes Blank the parent theme of the theme we are creating. This means that if the server cannot find any files inside our theme folder (child theme), it will automatically find that file in its parent theme, Blank.
    For example, we write:
  • Image preview tag. Inside <preview_image></preview_image>, write the directory of the desired preview image for the theme. This can be accessed in Content > Design > Themes > <theme_name>
    For starter, put the screenshot image in media directory inside the theme folder:

    /app/design/frontend/<your_vendor_name>/<your_theme_name>/media/screenshot_theme.png

This is all we write in the example theme.xml file:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Bss default</title>
   <parent>Magento/blank</parent> 
   <media>
      <preview_image>media/preview.jpg</preview_image>
   </media>
</theme>

Create new Composer.json

In Magento 2, each theme is used as a composite package, even the default themes. Actually, we suggest the starters copy the default themes’ Composer.json in:

vendor/magento/theme-frontend-blank/composer.json

And paste into our new theme folder.

Create new registration.php

To register a theme in the Magento system you need to create the registration.php file. Make sure that you include your new theme’s directory, for example, ‘frontend/<Your_Vendor>/<Your_theme>’,

For a shortcut, write this:

<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
 \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/<YourVendor>/<yourtheme>', __DIR__ );
?>

Create static files directories

Create folder “web” in the following path:

app/design/fronend/<your_vendor_name>/<your_theme_name>/web

You can then add fonts, CSS, image, js in your theme in this folder. Note that you should create different folders inside this directories. For example, here is our web folder:

create-magento-2-theme-from-scratch-static-file-directories

Create logo folder

Firstly, create a folder named Magento_theme/layout in your theme folder.

<your Magento install dir>app/design/fronend/<your_vendor_name>/<your_theme_name>/Magento_Theme/layout

Secondly, create a file named default.xml with the content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/logo.png</argument>
                <argument name="logo_img_width" xsi:type="number">300</argument>
                <argument name="logo_img_height" xsi:type="number">300</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Notice that images/logo.png from the example above should be replaced by the logo file directory. Both the 300 should be replaced by the width and height of the logo (our example logo’s size is 300×300).

3. Apply and configure theme in admin

To apply the theme, you have to:

  1. Upgrade and flush cache
  2. Apply the theme in Magento admin
  3. Deploy

1. Upgrade

Run the following commands to upgrade and flush cache:

php bin/magento setup:upgrade

php bin/magento cache:flush (notice that if you are running Magento from 2.2.x, add -f to flush cache command: php bin/magento cache:flush -f

2. Apply the theme in Magento admin

Go to Content > Design > Themes (from Magento 2.1) or Stores > Configuration > Design

The created theme will be displayed here. If it is not, check your previous steps for errors.

create-magento-2-theme-from-scratch-created-theme

To view more information, click the theme name.

Then apply the theme by:

  • From Magento 2.1: Content> Configuration > Edit theme > Default Theme > Select your theme.
  • Magento 2.0: Stores > Configuration > Design Tab > Design Theme.

create-magento-2-theme-from-scratch-select-theme

3. Deploy

Run the following command to deploy the theme to all your stores:

php bin/magento setup:static-content:deploy

Magento 2 create theme: In conclusion,

So there you go, the guide to create Magento 2 theme. By now we hope that you have known the steps to do the work, and have a new theme running on your website. If the parent theme is Blank, your website now should display Blank theme now.create-magento-2-theme-from-scratch-blank

So do you have any question regarding creating Magento 2 theme? Let us know in the question below!

A beginner’s guide to Magento 2 edit theme

Magento 2 edit theme guide

Right now you must have a theme installed in your Magento 2 store. However, you have no experience in editing Magento 2 theme.

You might not even know what is configurable and what is not in Magento 2 default themes. And you only have a very basic understanding of coding language.

The good news is: you can still edit the theme, in a basic way. You just need to identify what you want to edit and find information in that theme’s user guide.

This article address what can be edited. If you are looking for a guide that tells you how to edit the theme, browse here.

A small caveat: you probably will not have all your wishes fulfilled when it comes to editing the theme. Because only a custom development service can guarantee you the theme the exact way you want. So when you buy the theme, expect some parts to be unlike your desire.

Magento 2 edit theme’s color

There are many parts of the theme that is defined by certain colors. In fact, many brands use the main color of their logos as several elements of their website.

Most premium themes have configurable options for editing various elements’ color: text, button, background, link… Consider our Topaz theme’s color option from below:

Magento-2-edit-theme-color

The color of the element can be selected from 16,777,216 color value of the RGB system with a color code (preferably HEX one).

Theme users can access the color option of the elements in Magento Admin. However, notice that you can only edit some elements that the theme maker has made configurable

Magento-2-edit-theme_color-config-options

Magento 2 edit theme’s text

The text in your website is what users read the most. Therefore, you should edit the theme’s text carefully.

There are different text elements in your website to edit.

The most common one is paragraph text, which is inside the <p></p> HTML tag.  The text you are reading is paragraph text.

Another text element that dominates the website is heading text, which is inside heading HTML tag. If you are familiar to SEO,  you have probably know there are different types of heading text including <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Usually, premium themes let you edit style of the theme text’s font.

Magento-2-edit-theme_edit-font-style

In our Thinnk Theme, we make font-size, font-family, and font-weight options configurable in the admin panel.

Magento-2-edit-theme_font-style-config-option

Magento 2 edit theme’s layout in some pages

The layout is an important aspect of design. If the text, the color is the micro-elements of a web design, the layout is the macro one.

In website design, layout rules the way users approach information presented.

According to Wikipedia, typical page layout decisions include:

  • Size of page margins
  • Size and position of images and figures
  • Deciding on the number and size of columns and gutters (gaps between columns)
  • Placement of intentional whitespace
  • Use of special effects like overlaying text on an image, runaround, and intrusions, or bleeding an image over the page margin
  • Use of color printing or spot color for emphasis

As an e-commerce platform, Magento 2 does not focus on layout configuration. Usually, premium themes have options for deciding number of columns in category page’s grid view.

Magento-2-edit-theme_category-grid-view

In Magento 2 default, you can set up to display products in category page to be in 1 column, 2 columns with left bar, 2 columns with right bar and 3 columns.

In our themes, there are options for different column number of the products displayed.

 

Magento-2-edit-theme_column-number-layout

Magento 2 edit theme: in conclusion,

By now we hope that you understand the basic of editing Magento 2 theme. Those elements are what can be edited.

For technical aspect of the theme editing, a.k.a how to edit the theme, you might actually want to customize the theme.

If you are looking for a theme that can be easily configured in Magento 2 admin, see our theme list!

Magento-2-edit-theme_browse-our-theme