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

    Magento admin panel sidebar
    Find Configuration in the Magento admin sidebar
  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.

    Design Configuration page in Magento admin panel
    Find the corresponding configuration scope and click on the Edit hyperlink
  3. In the “Default Store View” page, go to Default Theme > Applied Theme. Choose the new theme from the dropdown.

    Default Store View in Magento admin
    Select the theme from the Applied Theme dropdown
  4. Click on Save Configuration to save the recent changes.

    Save Configuration in Default Store View Magento
    Click on Save Configuration on top right-hand side in the Default Store View page
  5. Next, we’ll refresh the cache to check if the changes reflect on the frontend by going to System > Cache Management.

    Cache management in Magento admin panel sidebar
    Find Cache Management in the Magento admin panel sidebar
  6. Select all the invalidated “Cache Types” and click Submit to refresh the cache.
    Select invalidated Cache Types and click Submit.
    Select invalidated Cache Types and click Submit

    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:

User Agent Rule in Default Store View Magento 2
Add the Search String, select the mobile theme, and then click on the Save Configuration button.
  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.

Was this article helpful?

Leave a Comment