Tuesday , April 16 2024
Home > Magento Tips & News > Magento 2 Tutorials > Content > How to Display Products on Homepage in Magento 2

How to Display Products on Homepage in Magento 2

Magento 2: display products on homepage

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

In the admin panel, navigate to Content >> Pages

Navigate to Content >> Pages | Magento display products on homepage
Navigate to Content >> Pages | Magento display products on the homepage

Step 2: Edit Homepage

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

Click Select >> Edit | Magento display products on homepage
Click Select >> Edit

Step 3: Insert the Widget

Span Content section.

Span Content section | Magento display products on homepage
Span Content section

Click the insert widget icon to insert a widget.

Click the insert widget icon | Magento display products on homepage
Click the insert widget icon

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

Choose Catalog Products List  | Magento display products on homepage
Choose Catalog Products List

In the widget options:

The widget options | Magento display products on homepage
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:

Click Save | Magento display products on homepage
Hit the Insert Widget button

Step 4: Save

Click Save to save the config:

Click Save

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

Frontend
Frontend | Magento 2 shows products on the homepage
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.

Content >> Widgets | Magento display products on homepage
Content >> Widgets

Step 2: Add Widget

Click Add Widget.

Add Widgets | Magento display products on homepage
Add Widgets | Magento displays products on the homepage

In the Widget Settings section:

Widget settings | Magento display products on homepage
Widget settings | Magento shows products on the homepage
  • 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:

Storefront Properties settings
Storefront Properties settings
  • 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:

Add Layout Updates
Add Layout Updates

After that, move on to the Widget Options section:

Widget Options
Widget Options

Configure the widget options like way 1.

Step 3: Save and Refresh the Cache

After configuring, click Save.

Click Save
Click Save

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

System >> Tools >> Cache Mangement
System >> Tools >> Cache Management

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

Refresh the cache
Refresh the cache

Here is the result from the front end:

Result from the frontend
Result from the frontend

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.

Optimize Your Magento Store With Powerful Extensions!

Looking for fast, efficient, and well-coded extensions to build or optimize your Magento stores for sales-boosting? Then visit the Magezon website and grab the necessary add-ons for yours today!

About Laura Cao

Laura Cao
Laura graduated from Foreign Trade University with a bachelor’s degree in Business English and is currently serving as a content marketer at Magezon. She indulges in reading and writing everything about Magento. In her spare time, gardening and hanging out with friends are her area of interest.

Check Also

How to Create a Halloween Landing Page in Magento

It’s Halloween today. We’re gonna show you how to create a Halloween landing page using …

Leave a Reply