Creating a Custom Homepage Template in Magento 2.1.5

Creating a Custom Homepage Template in Magento 2.1.5

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:

1 custom homepage magento 2

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:

2 custom homepage magento 2

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.

3 custom homepage magento 2

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.

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.

4 custom homepage magento 2

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.

Conclusion

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.



1 comment

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *