How to Customize the Homepage of a Magento 2 Store

by Syed Muneeb Ul Hasan  October 24, 2016

For the majority visitors, the homepage is the first point of contact that determine whether the visitor would continue further on the store or not. The design of the homepage, therefore, is crucial in achieving the sales and conversion goals of the store.

Magento 2 Homepage Customize

Many experts suggest customizing the Magento store’s homepage to reflect the niche to maximize conversions and revenue. The process of developing a customized homepage for a Magento store has three steps:

  1. Creation of Block.
  2. Creation of Categories and Products.
  3. Integration of the recent products into the homepage.

Creation of Block

The first step is the creation of Block. When done, this allows the store administrators to place a banner on the homepage by adding the relevant shortcode for the Block.

Go to the Admin Panel of the Magento Store and navigate to the Content tab from the left corner of the page. Next, click the Blocks option.

navigate block

On the following screen, click Add New Block.

Adding block

Next, add the details of the Block. Enter the Block Title (Title of the Block) and
Block Identifier (Id of the Block).

Details of block and save block

After the providing details, upload the image in the Block.

image upload option

Search for the image file by clicking on the Browse option. Make sure that the following fields are not empty:

Image URL: Path/URL of image.
Image Description: Description of image.
Title: Title of Image.

If you need to change the design parameters (dimensions, alignment) of the image, go to the Appearance tab.

Browse Image

When done, click on Insert file.

insert image

To complete the process, click Save Block.

save the block

block createdThe Block is now created.

Creation of Categories and Products

For this tutorial, I will use the example of a Magento store that offers a selection of mobile phones.

Creating Categories
Navigate the Products tab from the left corner of the page and then click on the Categories option.

navigate category option

The first category that needs to be created is SAMSUNG. Provide the details of the category and click Save as shown in the image below:

category created

Create three more categories: NOKIA, IPHONE, and LENOVO .

Creating Products
Go to Products tab from the left corner of the page and click on the Catalog option.

navigate catalog option

Click on Add Product.

adding product

Provide the details of the product, select the category for the product and then click Save.

Product added

Create more products by following the steps mentioned above.

Integration of Block and Products into the Homepage

Go to the Admin Panel of the Magento store, navigate to the Content tab from the left corner of the page and then click on the Page option.

navigate page option

Click the Edit on the homepage:

editing home page

Go to the content section:

navigate content tab

Integration of the Block
You could add the Block in the content section by using this shortcode:

{{block class="Magento\Cms\Block\Block" block_id="Banner_View"}}

In this shortcode, Block_id is the same ID that was used in the creation of the blog.

Integration of the Products
Click on Insert Widget option:

widget option

Select Catalog New Products List from the list, and set all its attributes according to your requirements.

insert widget

The following screen will appear.  Click on Save Page.

integration of block and products

Access the store and see the custom homepage in action!

Final Result

Conclusion

A customized homepage is an important aspect of the overall store promotion strategy. I hope that you’ll have no problem in following the simple steps of the process. If you have a problem or would like to add to the discussion, leave a comment below!

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Syed Muneeb Ul Hasan

Syed Muneeb Ul Hasan is a Magento Community Manager at Cloudways. An expert in PHP and Magento, he prefers to educate users in the implementation and usage of cloud based Magento Hosting Solutions. When not working, he loves to watch cricket. You can email him at muneeb.hasan@cloudways.com

Stay Connected:

You Might Also Like...

  • Hello Syed,

    I appreciate this great information on customizing home page of Magento 2 store. All the steps are very helpful for noviceMagento developer. Thanks for sharing it.