Apply and configure a storefront theme

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 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:

   

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

   

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.

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.

Add a theme-independent logo

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.

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

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.

Troubleshooting

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. See Installing and configuring Grunt.

Last updated 9/11/2023

Was this helpful?

Yes

No