This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

How to Customize the Homepage of a Magento 2 Store

Updated on  24th October

4 Min Read
Reading Time: 4 minutes

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

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.

Cloudways Magento Hosting For Developers

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.

Magento Content CMS

On the following screen, click Add New Block.

Magento 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).

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.

While working on backend or frontend development, loading issues can become a problem. This is why it is important to opt for an efficient Magento hosting service that guarantees fast response times and loading speed.

If you would like to ask any question about this topic, feel free to leave a comment.

 

Share your opinion in the comment section. COMMENT NOW

Syed Muneeb Ul Hasan

Syed Muneeb Ul Hasan is a Magento Developer and Blogger at Magenticians - a platform for Magento Tutorials. He is an expert in PHP and Magento and prefers to educate users in the implementation of Magento. When not working, he loves to play games and watch cricket.

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.