How to Display Products on Homepage in Magento 2

Have you ever heard about the 15-second rule? Fifteen seconds is the average time spent on a website by an average reader. And the number may be less than 15 seconds for the homepage, where people just temporarily land before going elsewhere. That means we just have a little time suck to draw the visitors’ eye. If we can’t, then everything’s in vain. In that regard, a well-executed homepage with attractive above the fold – for example, displaying your store’s new arrivals – can save the day.

So in this blog, we’ll walk you through 2 ways to display products on the homepage in Magento 2. Let’s get started!

Method 1: 3 Steps to Display Products on Homepage in Magento 2

Step 1: Go to Content > Pages

In the admin panel, navigate to Content >> Pages

Step 2: Edit Homepage

In the grid of pages, choose Homepage. Then click Select >> Edit in the Action column, like the image below:

Step 3: Insert the Widget

Span Content section.

Click the insert widget icon to insert a widget.

Afterward, the Insert Widget tab will appear. Here you have two options to display products on the Magento 2 homepage by choosing either Catalog Products List or Catalog New Products List in the Widget Types dropdown. To demonstrate, I’ll select the Catalog Product List. 

In the widget options:

• Title: Name the widget title—for example, Our Products.
• Display page control: Choose Yes/No to enable/disable the display page control function. If you click Yes, there will be one more field called “Number of Products per Page,” like this:

• Number of products to display: Enter the number of products you want to show.
• Template: Select a template to display the products. The default template is the Product Grid Template. 
• Cache lifetime (seconds): Put your desired period between the widget updates. If you leave the field blank, the value is 24 hours. 
• Conditions: Click the plus icon and choose a condition to add. 

After that, hit the Insert Widget button:

Step 4: Save

Click Save to save the config:

From the front end, your homepage will look like this:

You may be interested in: How to Change Magento Homepage Title How to Create and Insert Magento 2 Block in CMS Page The Complete Guide to Magento 2 Media Gallery Beginner‘s Guide to Magento Media Folder

Method 2: 3 Steps to Display Products on Homepage in Magento 2

Step 1: Go to Content > Widgets

From the admin panel, navigate to Content >> Widgets.

Step 2: Add Widget

Click Add Widget.

In the Widget Settings section:

• Type: Select your widget type as Catalog Product List.
• Design Theme: Select your design theme. In my case, I’ll choose the Luma theme.
• Click Continue.

Then you will see the Storefront Properties settings section like this:

• Widget Title: Name the widget title.
• Assign to Store Views: Select the allowed store views.
• Sort Order: Enter a number to sort the order of widget instances in the same container.

In the Layout Updates, click Add Layout Updates and configure like the image below:

After that, move on to the Widget Options section:

Configure the widget options like way 1.

Step 3: Save and Refresh the Cache

After configuring, click Save.

Then go to System >> Tools >> Cache Management.

Select the cache types like the image below, set the action as Refresh, and then click Submit:

Here is the result from the front end:

That’s How to Show Products on the Homepage in Magento 2

Just in a minute, you can now display products on the homepage in Magento 2 with ease. Wanna learn more about Magento 2 Content? Comment down below to let us know what you’re thinking. We are excited to discuss everything with our readers.  Other than that, you can visit our Magento tutorial series to arm yourself with knowledge about setting up and managing your Magento store.