DocumentationCommerceContent and Design

Themes

Last update: Tue Aug 29 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • User

A theme is a collection of files that determines the visual presentation of your store. When you first install Commerce, the design elements of the store are based on the Default theme. In addition to the initial default theme that comes with your Commerce installation, there is a wide variety of available themes that you can use as is or modify for your needs.

A responsive theme adjusts the page layout to fit the view port of the device. The sample Luma theme has a flexible, responsive layout that can be viewed from the desktop, tablet, or mobile device.

Commerce themes include layout files, template files, translation files, and skins. A skin is a collection of supporting CSS, images, and JavaScript files that together, create the visual presentation and interactions that your customers experience when they visit your store. Themes and skins can be modified and customized by a developer or design professional who understands Commerce theme design and has access to your server. To learn more, see the Frontend Developer Guide.

Luma theme {width="600" modal="regular"}

The default theme

The Magento Blank responsive theme renders the display of your storefront for different devices and incorporates best practices for desktop, table, and mobile devices. Some themes are designed for use only with specific devices. When Commerce detects a specific browser ID, or user agent, it uses the theme that is configured for the specific browser. The search string can also include Perl-Compatible Regular Expressions (PCRE).

Themes {width="700" modal="regular"}

Filter the theme grid

  1. On the Admin sidebar, go to Content > Design > Themes.

  2. Click Filters.

  3. Enter an ID range, theme name (or title), folder path, or parent theme.

  4. Click Apply Filters to update the list of themes.

View the current theme settings

  1. On the Admin sidebar, go to Content > Design > Themes.

  2. In the list of installed themes, find the theme that you want to examine and click the row to display the settings.

  3. To view a sample page, click the Theme Preview Image.

Preview theme {width="600" modal="regular"}

Apply a default theme

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. Find the store view that you want to configure and click Edit in the Action column.

  3. Under Default Theme, set Applied Theme to the one that you want to use for the current view.

    Applied Theme {width="600" modal="regular"}

  4. When complete, click Save Configuration.

Add a user agent rule

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. Under Design Rule, click Add New User Agent Rule.

    Design Rule {width="600" modal="regular"}

  3. For Search String, enter the browser ID for the specific device.

    Search strings are matched in the order that they are entered. For example, for Firefox enter:

    /^mozilla/i

  4. To enter additional devices, repeat the process.

  5. When complete, click Save Configuration.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de