Common layout customization tasks
What’s in this topic
This article describes the following typical layout customization tasks:
- Set the page layout
- Create a container
- Reference a container
- Create a block
- Set a block’s template
- Modify block arguments
- Reference a block
- Use block object methods to set block properties
- Rearrange elements
- Remove elements
- Replace elements
To ensure stability and secure your customizations from being deleted during upgrade, do not change out-of-the-box Magento module and theme layouts. To customize layout, create extending and overriding layout files in your custom theme.
Set the page layout
The type of page layout to be used for a certain page is defined in the page configuration file, in the
layout attribute of the root
Change the layout of Advanced Search page from default “1-column” to “2-column with left bar”. To do this, extend
catalogsearch_advanced_index.xml in your theme by adding the following layout:
and other static assets are added in the
<head> section of a page configuration file. The default look of a Magento store page
<head> is defined by
is to extend this file in your custom theme, and add the assets there.
The following file is a sample of a file you must add:
When adding external resources, specifying the
src_type="url" argument value is a must.
If you’d like to include a google webfont, you have to add the
rel="stylesheet" type="text/css" to the tag, otherwise it won’t work.
You can use either
<link src="js/sample.js"/> or
The path to assets is specified relatively to one of the following locations:
Adding conditional comments
Conditional comments are meant to give special instructions for Internet Explorer. In the terms of adding assets, you can add CSS files to be included for a specific version of Internet Explorer. A sample follows:
This adds an IE conditional comment in the generated HTML, like in the following example:
In this example,
orange is a custom theme created by the OrangeCo vendor.
To remove the static resources, linked in a page
<head>, make a change similar to the following in a theme extending file:
Note, that if a static asset is added with a module path (for example
Magento_Catalog::js/sample.js) in the initial layout, you need to specify the module path as well when removing the asset.
Create a container
Use the following sample to create (declare) a container:
Reference a container
To update a container use the
Example: add links to the page header panel.
Create a block
Blocks are created (declared) using the
Example: add a block with a product SKU information.
Reference a block
To update a block use the
Example: pass the image to the
Set a block template
There are two ways to set the template for a block:
- using the
- using the
Both approaches are demonstrated in the following examples of changing the template of the page title block.
In both example, the template is specified according to the following:
Namespace_Module:defines the module the template belongs to. For example,
new_template.phtml: the path to the template relatively to the
templatesdirectory. It might be
Template values specified as attributes have higher priority during layout generation, than the ones specified using
<argument>. It means, that if for a certain block, a template is set as attribute, it will override the value you specify in
<argument> for the same block.
Modify block arguments
To modify block arguments, use the
Example: change the value of the existing block argument and add a new argument.
Initial block declaration:
Use block object methods to set block properties
There are two ways to access block object methods:
- using the
- using the
<action>instruction. This way is not recommended, but can be used for calling those methods, which are not refactored yet to be accessed through
Example 1: Set a CSS class and add an attribute for the product page using
Example 2: Set a page title using
Do not use
<action>, if the method implementation allows calling it using
In layout files you can change the elements order on a page. This can be done using one of the following:
<move>instruction: allows changing elements’ order and parent.
<block>: allows changing elements’ order within one parent.
put the stock availability and SKU blocks next to the product price on a product page.
In the Magento Blank theme these elements are located as follows:
Let’s place the stock availability and SKU blocks after product price block on a product page, and move the review block out of the product-info-price container.
To do this, add the extending
catalog_product_view.xml in the
This would make the product page look like following:
To learn how to locate the layout file you need to customize, see Locate templates, layouts, and styles.
Elements are removed using the
remove attribute for the
Example: remove the Compare Products sidebar block from all store pages.
This block is declared in
To remove the block, add the extending
default.xml in your theme:
In this file, reference the element having added the
To replace an element, remove it and add a new one.