The following steps show how to use a layout update to place a block on a page. For specific examples and help with syntax, see Common layout customization tasks in our Frontend Developer Guide.
Step 1: Create the block
Create the block that you want to place.
Take note of the
block_id, because you will need to reference it in the layout update instructions.
Step 2: Compose the layout update in XML
Compose the layout instructions in XML to Reference a CMS Block.
Save the layout instructions on the server in the layout folder where XML files are saved for the theme.
The layout handle is the filename that begins with
cms_page_view_selectable_, followed by the URL key of the CMS page, the layout update option, and the
xmlfile suffix. In the following example,
customer-serviceis the URL key of the page, and
ChatToolis the option that you select to apply the layout update to the page.
CMS Page Identifier The URL key of the page with any forward slash (
/) replaced by an underscore (
Layout Update Name The option that appears in the Custom Layout Update list.
Step 3: Reference the layout update from the page
On the Admin sidebar, go to Content > Elements > Pages.
Find the page where you want to place the block and open it in edit mode.
Scroll down and expand the Design section.
Click Custom Layout Update arrow to display all available layout updates that are associated with the page.
Custom Layout Update list
Select the layout update that you want to apply to the page.
Step 4: Save and refresh cache
When complete, click Save & Close.
In the message at the top of the workspace, click Cache Management and refresh each invalid cache.