How to Apply a Theme in Magento 2

Installing a Magento theme is only one part of improving your website design. You also need to apply it correctly to your desired store view to get it to work.

In this guide, we’ll teach you how to apply a theme in Magento version 2. We’ll also share some helpful tips to troubleshoot common issues you may encounter after setting up a theme in Magento.

We’re using Magento 2.4.3 for this how-to article. However, all the steps used here will work in other Magento 2 versions.

Keep reading to learn:

• How to apply a theme in Magento 2
• What to do if the theme isn’t applied on the frontend
• How to add a new user agent rule for mobile themes

Prerequisites

Once you’ve installed your Magento 2 theme, it should be registered and added to the Magento 2 database. You can confirm it by logging in to the Magento admin panel and navigating to Content > Design > Themes.

If the theme is registered successfully, you should see it listed in the Magento admin. After verifying this, you can follow the rest of our guide detailing how to apply a Magento 2 theme.

Steps to Apply a Theme in Magento 2

Here’s how to apply a theme in Magento 2 in six simple steps:

1. Go to the Magento admin sidebar and select Content > Design > Configuration if you’re using Magento 2.1.x and above. For Magento 2.0.x, go to Stores > Settings > Configuration

   

2. Once you’re on the “Design Configuration” page, you’ll see a list of configuration scopes in a grid. Select the scope you wish to apply the theme to by clicking on the Edit hyperlink in the “Action” column.
   For example, we’ll be applying the theme to the “Store View.”
   Read Adobe Commerce documentation on the difference between websites, stores, and store views to select the appropriate scope.

   

3. In the “Default Store View” page, go to Default Theme > Applied Theme. Choose the new theme from the dropdown.

   

4. Click on Save Configuration to save the recent changes.

   

5. Next, we’ll refresh the cache to check if the changes reflect on the frontend by going to System > Cache Management.

   

6. Select all the invalidated “Cache Types” and click Submit to refresh the cache.

   

   Use the Flush Magento Cache button to flush the cache if the above option doesn’t work. Flushing cache cleans all cache types instead of invalidating them.

That’s it! You’ve successfully set up a Magento 2 theme. To check if the new changes have been implemented, go to the frontend of your Magento 2 store and hit the refresh button.

Magento 2 Theme Not Applied: How to Troubleshoot

Suppose the theme isn’t applied in spite of executing all the steps properly. In that case, delete the “pub/static/frontend” and “var/view_preprocessed” Magento directories using the following commands in the command line interface:

rm -rf pub/static/frontend
rm -rf var/view_preprocessed

Make sure you run these commands from the Magento project root.

After deleting these directories, reload the pages and check if the theme has been applied. If it still hasn’t been applied, uninstall and then reinstall the theme.

Mobile Theme in Magento 2: How to Add New User Agent Rule

Many third-party themes have a separate theme for mobile devices. This is done to improve performance on mobile devices by disabling desktop specific functionalities.

A User Agent Rule allows you to set a design exception for different browsers. Here’s how you can set up a new rule after you’ve installed the mobile theme:

1. In the Magento 2 admin panel, navigate to Content > Design > Configuration if you’re using Magento 2.1.x and above. For Magento 2.0.x, go to Stores > Settings > Configuration.
2. On the “Design Configuration” page, select the scope corresponding to the active store view by clicking Edit.
3. Under the Design Rule section, go to the “User Agent Rules” tab and click on Add New User Agent Rule.
4. Select the mobile theme from the dropdown in “Theme Name.”
5. Check the documentation of your mobile theme and add the browser ID to the “Search String.”
   For example, Olegnax suggests adding the following code for the Athlete 2 Mobile theme:

   /iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini/

   You can add a user agent for a specific device.

6. Click the Save Configuration button on the top right-hand side to save the new User Agent Rule.
7. Go to System > Cache Management to clear the cache.
8. Select the invalidated “Cache Types” and hit the Submit button.

Open your Magento 2 store on a mobile device and refresh to see if the mobile theme is working.