Design Implementation and Customization¶
Here are the basic technologies we use in Shopsys Platform for design implementation:
- LESS pre-processor for definition of cascading style sheets (i.e. CSS)
- the LESS files are located in
assets/styles/frontend
- you can read more about LESS in separate article Introduction to Less
- the LESS files are located in
- Webpack for svg optimize, font gemerator and less compiler
- Twig templating engine for definition of HTML (and other) templates
- the Twig templates are located in
templates
directory
- the Twig templates are located in
When you want to customize the styles or templates, you can modify any of the files directly, as all of them are located in your project.
Multidomain design customization¶
Shopsys Platform provides an ability of running multiple domains as a single application,
if you want to know more about this concept, you can read the separate article.
In order to change your multidomain appearance, you can set two parameters domains.yaml
configuration file:
styles_directory
- allows you to define a custom sub-folder with LESS files in
assets/styles/frontend
- if you need to use custom styles for a particular domain, put your LESS files in this sub-folder
- you can create your own directories structure in the sub-folder that suits your needs
- allows you to define a custom sub-folder with LESS files in
design_id
- allows you to define a design identifier
- the parameter can be a number (e.g., domain ID), however, you can use a string identifier as well (e.g., "flat-design") so you are able to use the same design across multiple domains
- if you want to use custom template for a particular domain, duplicate the original one that is used for the first domain and add
.design_id
value as a suffix to its name (e.g.,detail.html.twig
->detail.flat-design.html.twig
) - all the multi-design templates must be located in the same folders as their originals
- there is a huge advantage from the usability point of view - when you change a controller, you need to change all the related multi-design templates. In such a case, you see all the templates in the same folder and you do not need to seek for them anywhere else
If you want to know exact instructions on what to do when implementing a custom multidomain design, check Creating a Multidomain Design cookbook.