Customize Design Configuration
What's in this topic
This topic describes how to customize (add, delete, change) the configuration options available in Magento Admin under CONTENT > Design > Configuration. These options define the various aspects of storefront design. In Magento 2.0.x and earlier these options were set under STORES > Configuration > Design. But starting from Magento 2.1.0 they were moved to the new location, and the configuration form was refactored.
In Magento out of the box, when you navigate to CONTENT > Design > Configuration in Admin, the first page that opens displays a grid with the available configuration scopes and assigned themes. It looks like following:
When you click Edit in any of the scope records, the page with available design options is displayed. For example, the default set of design options for the store view level is the following:
Both the grid and the configuration form are implemented using UI components.
To change the grid view, you need to customize the grid configuration by adding your custom
design_config_listing.xml in your module
To change the available design settings you need to customize the grid configuration by adding your custom
design_config_form.xml in your module. If you add a new field, you must also declare it in
di.xml how it is processed and saved.
View the following sections for details.
Customize the grid
The grid containing the configuration scopes is implemented using the grid UI component.
To customize the grid view, take the following steps:
<your_module_dir>/view/adminhtml/ui_componentdirectory, add the empty
design_config_listing.xmlfile, create a
element to in which to add your customizations. For example, if you want to rename the column displaying the selected theme, your grid configuration must contain the following:
design_config_listing.xml is merged with the same files from the other modules. So there is no need to copy their content, you only need to define changes. Even if you want to customize the existing entities, you only have to mention those options, the values of which are customized.
For reference, view the grid configuration files of the Magento modules:
If you add a certain field as additional grid column, you also need to set the field’s
use_in_grid property in the field’s meta data in
Customize the design options
Customize the form configuration
Design configuration form is implemented using the form UI component.
To customize the form view, take the following steps:
Create an empty
design_config_form.xmlfile in the
Add content similar to the following:
Your custom fields and field sets will be available for all configuration scopes (website, store, and store view).
design_config_form.xml is merged with the same files from the other modules. So there is no need to copy their content, you only need to add your customizations.
To customize an existing entity, declare only those options, the values of which are customized, do not copy its entire configuration. For example, if you only want to rename the Other Settings field set, your form configuration must contain the following:
To delete an existing field, or field set, in your
design_config_form.xml use the following syntax:
For reference, view the form configuration files of Magento modules:
Add fields’ metadata
If in the design configuration form you add new fields, in
<your_module_dir>/etc/di.xml you must specify their parent field sets and the path in the database. You can also declare the backend model used for processing the field values. If you do not specify any model, the default
Magento\Framework\App\Config\Value model is used.
The field declaration in a
di.xml looks like following:
Example of field declaration:
For more examples and reference, view the
di.xml files of the Magento modules:
Accessing the options values in backend models
The design configuration option values are stored in the
core_config_data table in the database, similar to the values of System Configuration options, and can be accessed using the