DocumentationCommerceContent and Design

Design configuration

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

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • User

The Design configuration makes it easy to edit design-related rules and configuration settings by displaying the settings on a single page.

Design Configuration page {width="700" modal="regular"}

Change the design configuration

  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.

    The page displays the current design settings for the store view.

  3. To change the default theme, set Applied Theme to the theme that you want to apply to the view.

    If no theme is specified, the system default theme is used. Some third-party extensions modify the system default theme.

  4. If the theme is to be used for only a specific device, set the User Agent Rules.

    User-Agent Rules {width="400" modal="regular"}

    For each device type where you want to specify a theme:

    • Click Add New User Agent Rule.

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

      A search string can be either a normal expression or Perl Compatible Regular Expression (PCRE) (see User Agent for more information). The following search string identifies Firefox:

      code language-none 
         /^mozilla/i

    • For Theme Name, choose the theme to be used for the specified device.

    note note
    NOTE
    You can add as many rules for the devices you want to designate. The search strings are matched in the order that they are entered.

  5. Under Other Settings, expand each section and follow the instructions in the linked topics to edit the settings as needed.

    Other settings to affect design {width="500" modal="regular"}

  6. When complete, click Save Configuration.

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