PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

Apply and configure a storefront theme

What’s in this topic

The topic describes how to apply a theme for your store. This is a required step if you want a theme to be used on a storefront. Also, it gives information how to add a theme independent logo for your store.

Prerequisites

Make sure that you set your Magento application to the developer mode.

Apply a theme

After you add your theme to the file system, you can apply it to your store. You apply a theme in Admin.

To apply a theme:

  1. In Admin, go to Content > Design > Configuration. A Design Configuration page opens. It contains a grid with the available configuration scopes. For example:

    Design Configuration page

  2. In the configuration record corresponding to your store view, click Edit. The page with design configuration for the selected scope opens. For example:

    Design Configuration page for a particular scope

  3. On the Default Theme tab, in the Applied Theme drop-down, select your newly created theme.
  4. Click Save Configuration.
  5. If caching is enabled, clear the cache.
  6. To see your changes applied, reload the storefront pages.

Add a design exception

Design exceptions enable you to specify an alternative theme for particular user-agents, instead of creating a separate store views for them. To add a design exception:

  1. In Admin, go to Content > Design > Configuration
  2. In the configuration record corresponding to your store view, click Edit.
  3. On the Design Rule tab, click Add New User Agent Rule.
  4. In the Search String box specify the user-agent using either normal strings or regular expressions (PCRE). In the Theme Name drop-down list select the theme to be used for matching agent.

Design Exception

  1. Click Save Configuration or Save and Continue.
  2. If caching is enabled, clear the cache.
  3. To see your changes applied, reload the storefront pages.

You might want to set a permanent store logo that displays on the storefront no matter what theme is applied. To add a permanent theme-independent logo:

  1. In Admin, go to Content > Design > Configuration
  2. In the configuration record corresponding to your store view, click Edit.
  3. Expand the Header tab.
  4. In the Logo Image field browse to the logo file saved in your file system.
  5. Upload the file. Allowed file types include .png, .gif, .jpg, and .jpeg. To add an .svg logo, see Declaring theme logo.
  6. Optionally, specify the desired width, height, and the alternative text for the logo in the corresponding fields.
  7. Click Save Configuration or Save and Continue.
  8. If caching is enabled, clear the cache.
  9. To see your changes applied, reload the storefront pages.

Set store logo in Admin

The logo you add here is stored in the /pub/media/logo/default/ directory.

To delete the permanent logo, go to the same location, and click the “Delete image” icon in the bottom left corner of the logo preview, then click the “Save Configuration button”.

Clear the cache

If caching is enabled in Admin, you must clear the cache after you apply the theme, add a design exception, add a logo, and perform other tasks.

A system message notifies you that invalidated cache types must be refreshed.

  1. Click System > Cache Management.
  2. Clear the invalid cache types.

Clear the cache from Admin

Troubleshooting (if the changes do not get applied)

If the changes you configure in the Admin are not applied after you clear the cache and reload the page, delete all files in the pub/static/frontend and var/view_preprocessed directories, then reload the pages. You can delete the files manually or run the grunt clean:<theme_name> command in CLI. For details about using Grunt in Magento see Installing and configuring Grunt.