X
    Categories: Magento 2 BlogsMagento Tutorials, Tips and Guides

How to Customize the Homepage of a Magento 2 Store

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.

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.

On the following screen, click Add New Block.

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

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

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.

When done, click on Insert file.

To complete the process, click Save Block.

The 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.

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:

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.

Click on Add Product.

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

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.

Click the Edit on the homepage:

Go to the content section:

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:

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

The following screen will appear.  Click on Save Page.

Access the store and see the custom homepage in action!

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!

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