Sometimes during Magento 2 webstore development you need to create a custom homepage for one of the stores. In the following article I’m going to break down in details the whole process from creating a template to assigning CMS page as a homepage for the current store. But first things first.
Creating a template (layout) for the page
When none of the predefined page templates meet your requirements (1 column, 2 columns with left sidebar, etc.) we are able to create a custom one.
For that you should create page layout folder in the directory of your Magento theme (in our case it’s app/design/frontend/BelVG/example), where you copy a file with custom template, for instance test-home.xml. In that file we assign the appearance of the page. As a base file we can use any of predefined (for example app/code/Magento/Theme/view/frontend/page_layout/1column.xml).
The next step is going to be layouts.xml file creation in Magento Theme directory of your theme. This file will have roughly the following contents:
Magento Custom Development
Take your online store to the next level with BelVG Magento Custom DevelopmentVisit the page
Id attribute of layout tag should correspond to name of the page template file we previously created (in our case test-home), and the content of label tag defines the template name in admin panel of the website (in our case Test home). As a result we should get the following files in our theme:
That’s the last step of custom template creation. The only thing we should do is to assign the template to certain page. Let’s have a look how to do that.
Custom template assignment to CMS page
It’s better to create a new CMS page for the custom homepage. In order to do that just navigate to Content > Elements > Pages and click Add New Page button.
Let’s name this page “Test homepage”. Further it’s necessary to assign previously created template (“Test home”) to this page. Just navigate to Design tab and choose the template in the Layout drop-down. Then save all changes.
Partner With UsLet's discuss how to grow your business. Get a Free Quote.
After that the custom template will be implemented to the following page. So now it remains only to make this page the Home page for the current store. Let’s move on.
Take your online store to the next level with BelVG Magento ExtensionsVisit the store
CMS page assignment as a Homepage
So after we created a new CMS page and assigned the required template to it, we should assign this page as a Homepage for a certain store. Just navigate to Stores > Settings > Configuration, then in the left sidebar choose General Web and open the Default Pages tab. And the next step you should do is to select the webstore where you want the homepage to be changed.
Next in the CMS Home Page drop-down list select the page you want to make Home Page for the certain store (in our case it’s “Test Home Page”). Don’t forget to save all changes and flush the website cache.
In this article I showed you step by step how to create custom Homepage for one of the stores. This is special case and it’s used pretty rarely, but on the basis of this example you can solve more simple and often used issues (for example how to change the template for default home page). Hope it was helpful to you.
When you wonder how to create and customize template files in Magento 1.x and 2.x read this article.
Want your Magento store to have a great design? Browse for great Magento themes at BelVG’s store.