|
| 1 | +--- |
| 2 | +group: architecture-guide |
| 3 | +title: Ease of frontend customization |
| 4 | +migrated_to: https://developer.adobe.com/commerce/php/architecture/basics/frontend-customization/ |
| 5 | +layout: migrated |
| 6 | +--- |
| 7 | + |
| 8 | +## Overview {#m2arch-whatis-overview} |
| 9 | + |
| 10 | +The Magento [frontend](https://glossary.magento.com/frontend) is designed to optimize [storefront](https://glossary.magento.com/storefront) customization, with highly extensible *themes* being the central customization mechanism. |
| 11 | + |
| 12 | +Merchants are encouraged to use Magento components and themes to extend and transform the appearance of their storefronts. |
| 13 | + |
| 14 | +## Storefront customization tools |
| 15 | + |
| 16 | +Magento provides several tools to help you significantly jumpstart the storefront customization process: |
| 17 | + |
| 18 | +* Magento Blank [Theme](https://glossary.magento.com/theme) |
| 19 | + |
| 20 | +* [Overview of UI components][] |
| 21 | + |
| 22 | +* [Admin Pattern Library][] |
| 23 | + |
| 24 | +See the [Frontend Developer Guide][] for information on creating your themes. |
| 25 | + |
| 26 | +### Magento Blank theme |
| 27 | + |
| 28 | +The Magento blank theme template provides a launchpad for storefront customization. You can use this boilerplate as a robust starting point for your own theme development. |
| 29 | + |
| 30 | +### Magento UI components |
| 31 | + |
| 32 | +Using Magento standard coding and styling tools can help: |
| 33 | + |
| 34 | +* enforce for consistency in design across your storefronts |
| 35 | +* simplify (and speed up) the design process |
| 36 | + |
| 37 | +This component [library](https://glossary.magento.com/library) contains standard reusable components for form features, such as fields and buttons, and navigation elements. The Magento UI library is a set of generic web components and Magento-specific patterns, which simplifies the process of Magento theme creation and customization. |
| 38 | + |
| 39 | +See [Overview of UI components][] for details about this library. |
| 40 | + |
| 41 | +### Admin pattern library |
| 42 | + |
| 43 | +A *pattern library* is a collection of user interface (UI) design patterns that can be re-used in locations throughout your product installation. The [Admin Pattern Library][] defines examples of components that administrators working with the storefront can use. |
| 44 | + |
| 45 | +Form elements included in the [Admin](https://glossary.magento.com/magento-admin) pattern library include: |
| 46 | + |
| 47 | +* address form |
| 48 | +* button bar |
| 49 | +* container |
| 50 | +* tabs |
| 51 | +* sign-in form |
| 52 | + |
| 53 | +Users of the default Magento storefront encounter examples of these form elements throughout the product. These patterns provide a valuable language of software components (and indirectly, user experiences) for [extension](https://glossary.magento.com/extension) developers and administrators. |
| 54 | + |
| 55 | +The Magento [Admin](https://glossary.magento.com/admin) Pattern library is built on the Less preprocessor and implemented as a [module](https://glossary.magento.com/module). You can download a free, current version of this module from [Commerce Marketplace](https://marketplace.magento.com/). |
| 56 | + |
| 57 | +See [Admin Pattern Library][] for more information on using this library. |
| 58 | + |
| 59 | +## Storefront customization levels |
| 60 | + |
| 61 | +These four levels of potential storefront customization are listed in order to increase complexity. |
| 62 | + |
| 63 | +### Extend Magento-Provided CSS |
| 64 | + |
| 65 | +Magento supplies a default [theme](https://glossary.magento.com/theme) and a Less-based CSS. You can substantially change a storefront using CSS only. This uncomplicated strategy might suit projects with a limited budget, or might interest developers who create different skins for a site. A small business enter this process of storefront customization by buying a third-party developed theme from Commerce Marketplace to extend the default values. |
| 66 | + |
| 67 | +### Replace PHTML template files |
| 68 | + |
| 69 | +In addition to extending the default CSS, you can generate different HTML [markup](https://glossary.magento.com/markup). For example, you might need to add a missing CSS class name, or add an extra `<div>` tag to achieve some visual effect. You might also need to tweak some [JavaScript](https://glossary.magento.com/javascript/) to cope with different HTML markup. This change is more demanding than simply extending Magento CSS, but is still within the grasp of smaller projects and leaner teams. |
| 70 | + |
| 71 | +### Replace Magento-Provided CSS |
| 72 | + |
| 73 | +Rather than edit the default CSS provided by Magento, you might decide to replace all the default storefront CSS code with your own. This strategy avoids tying a project to the Magento-provided CSS, but puts a greater burden on project development and integration. It also allows the use of different CSS tools or technologies not provided with Magento. Partners who build their own set of CSS libraries could reuse these libraries on different customer projects. (These unique CSS libraries may help differentiate a partner from others in the market.) |
| 74 | + |
| 75 | +In addition to replacing CSS files, you might need to replace small amounts of HTML and JavaScript. |
| 76 | + |
| 77 | +### Replace Magento-Provided CSS, HTML, and JavaScript |
| 78 | + |
| 79 | +Delivering a sharply different shopping experience than the default Magento installation provides is a more substantial task. However, the tradeoff might be a more complicated experience integrating additional extensions into your installation in the future. |
| 80 | + |
| 81 | +{:.bs-callout-tip} |
| 82 | + Any customization of your storefront will work optimally, and provide the easiest path for later upgrades, if you follow the best practice of consistently compartmentalizing code by type. For example, keep all HTML in [PHTML](https://glossary.magento.com/phtml) files; keep all JavaScript in JavaScript files. |
| 83 | + |
| 84 | +{:.ref-header} |
| 85 | +Related topics |
| 86 | + |
| 87 | +[Extensibility and modularity][] |
| 88 | + |
| 89 | +[Global extensibility features][] |
| 90 | + |
| 91 | +[Admin Pattern Library][] |
| 92 | + |
| 93 | +[Overview of UI components][] |
| 94 | + |
| 95 | +[Frontend Developer Guide][] |
| 96 | + |
| 97 | +[JavaScript Developer Guide][] |
| 98 | + |
| 99 | +<!-- Link Definitions --> |
| 100 | + |
| 101 | +[Extensibility and modularity]:{{page.baseurl}}/architecture/extensibility.html |
| 102 | +[Global extensibility features]: {{page.baseurl}}/architecture/global_extensibility_features.html |
| 103 | +[Admin Pattern Library]: {{page.baseurl}}/pattern-library/bk-pattern.html |
| 104 | +[Overview of UI components]: {{page.baseurl}}/ui_comp_guide/bk-ui_comps.html |
| 105 | +[Frontend Developer Guide]: {{page.baseurl}}/frontend-dev-guide/bk-frontend-dev-guide.html |
| 106 | +[JavaScript Developer Guide]: {{page.baseurl}}/javascript-dev-guide/bk-javascript-dev-guide.html |
| 107 | +[Commerce Marketplace]: https://marketplace.magento.com/ |
0 commit comments