# Managing Blocks ### First steps Set application to development mode with ```bash bin/magento deploy:mode:set developer ``` The preferred method to edit Nosto's block data is by [Extending Nosto's Module](/magento-2/guides/overriding-or-extending-functionalities.md).\ However you can also [Create a Storefront Child Theme](https://github.com/supercid/wiki-docs/tree/bfcad31e54e9c48d9a2ca1df7b28ae4691497212/Create-a-storefront-child-theme.md). Notice that by creating a new child theme, all widgets defined in the parent theme **will not be inherit** by the child theme, you would have to manually recreate all of them. ## Managing Blocks ### Enable Template Path Hints for Storefront In order to identify which block, or which template is being used in Magento's front end blocks, we need to activate `Template Path Hints` * On the Magento 2 Admin Panel, click on `Stores`, then `Configuration` under the Settings tab * Scroll down and expand the `Advanced` group, now select `Developer` * Under the `Debug` group you will find `Enabled Template Path Hints for Storefront`, select `Yes` from the dropdown menu and hit the `Save Config` button. Your frontend now should look like this: ![screen shot 2018-02-26 at 11 52 47](https://user-images.githubusercontent.com/2778820/36664059-349c6272-1aec-11e8-9a8e-ecebd0a616d2.png) ## Add Layout and Template Files - Overriding After identifying which template we want to override, in this example we will use the `element.phtml` template, we will now look at it's layout file located in the `Vendor\Nosto` folder of your Magento 2 Installation. Navigate to `vendor/nosto/module-nostotagging/view/frontend/templates` and you will find the `element.phtml` Now, if we want to override this template, we need to create some directories according to the name of the theme or module we are overriding. ### Using a child theme If you are using a child theme, you need to create a folder named `Nosto_Tagging`, which is the name of our module.\ In the path `app/design/frontend///Nosto_Tagging` we also need to create 2 new directories. * Create a new folder named `layout` and another folder named `templates` * Inside the `templates` directory, we put the new templates structure we want Nosto to use, so create the `element.phtml` file there with the following content: ```php

``` * Inside the `layout` folder we need to create a new file named default.xml, the basic structure for this file is: ```markup ``` ### Using the module extending solution In case you have extended the Nosto module, you need to mirror the `vendor` folder structure.\ Create the following directory structure: ``` app ├── code │ └── My │ └── Nosto │ └── view │ └── frontend │ ├── layout │ └── templates ``` * Inside the `templates` directory, we put the new templates structure we want Nosto to use, so create the `element.phtml` file there with the following content: ```php

``` * Inside the `layout` folder we need to create a new file named default.xml, the basic structure for this file is: ```markup ``` At the end, you should at least have the structure below: ``` app ├── code │ └── My │ └── Nosto │ ├── composer.json │ ├── etc │ │ └── module.xml │ ├── registration.php │ └── view │ └── frontend │ ├── layout │ │ └── default.xml │ └── templates │ └── element.phtml ``` Clear cache and visit Magento's FrontEnd, and you should see the text in Nosto's element. ![screen shot 2018-02-26 at 14 31 16](https://user-images.githubusercontent.com/2778820/36670715-ca1c7868-1b01-11e8-9c69-e0bed2dfbe3a.png) ## Moving Blocks Position In order to move a block inside a page, we need to set the tag `move` in our layout file. * If you are using the child theme method, navigate to `app/design/frontend///Nosto_Tagging/layout` * If you are using the module extension method, navigate to `app/code/My/Nosto/view/frontend/layout` Using the corresponding xml file, define which block you will move to where. In this case, let's use the `default.xml` to move the `Recommendations For You` block: ```markup ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.