Tuesday , April 16 2024
Home > Magento Tips & News > Magento 2 Tutorials > Content > Magento Page Builder: All About the Products Content Type

Magento Page Builder: All About the Products Content Type

product content type featured image
Follow the Magento Page Builder series for useful tutorial

What is the most important thing of an eCommerce website? Obviously, the product. Your landing page or homepage may set the first impression for the customers, but eventually, the one that makes them stay is your products. 

The way you display the products on your website is crucial, too. We understand that, and today we want to introduce you to the Magento Page Builder Products content type. With this content type, you can optimize the display style of your products to capture as much attention as possible. In other words, convert visitors into customers and increase sales. 

Hesitate no more, let’s start our article and learn about how to use the Products content type in Magento. 

Where Is the Magento Page Builder Products Content Type Located?

In Magento Page Builder workspace, you can find the Products content type in the left panel, under the Add content drop-down section. 

product location
Learn how to use Add Content content types:
Magento Page Builder: All About the Block Content Type

Introduce Products Toolbox in Magento Page Builder

In order to display the products toolbox, hover over the products container. 

product tool box
Products toolbox 

Same as other content types in Magento Page Builder, the products toolbox has several elements:

ToolIconDescription
MoveChanges the position of the products container and its content on the stage.
SettingsAccess the Edit Products page and you can change the products list and alter the container’s properties here.
HideMake both the products container and its content unseen.
ShowShow the unseen products container and its content.
DuplicateCopy the products container and its content.
RemoveRemove the products container and its content.

Try FREE Magezon Page Builder demo today

Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.

Create a Products List Block in Magento Page Builder

Let’s move on to how to create it. Note that you can create it directly from the stage or create a products list block first and add it to the page later. 

Let’s start with the products list block right away.

  1. On the Admin sidebar, choose Content > Elements > Blocks
product list block location
  1. Select Add new block in the upper-right corner
product list block add new block
  1. Toggle Yes to enable Block 
  2. Fill in the Block Title (name of the block) and Identifier (a unique identifier for the block). You can learn more about Magento 2 Block in the Content category of our Magezon blog.
  3. Select the Store View, where you want the block to appear. 
product content type identify block
  1. Scroll down and select Edit with Page Builder or click inside the content preview area to access the Page Builder workspace.
product page builder workspace
  1. Under Add Content section, drag and drop the Row content type, then the Products placeholder to the stage. Notice to make adjustments to the ow as necessary. 

Configure the Products List Container

In this part, we will dive into the detailed settings of the product list container.

Hover over the Products container and when the toolbox appears, click the Settings () icon. 

products toolbox
Products toolbox 

Appearance Settings

Once you’ve accessed the Settings page, the first section you need to adjust will be Appearance. 

product content type appearance setting

 There will be 2 options to display the products: 

Product Grid Shows the products in a grid with an optional number of rows (Magento has set 5 rows by default but you can change it as you wish in the Number of Products to Display box) 
Product CarouselShows the products in a carousel (or a slider). Each slide contains 5 products. 

Warning of responsiveness: as for the Product Carousel option, you should add the Products content type directly to a responsive row, tab, or one-column layout that won’t show too many products per slide on smaller screens. On the contrary, when you use the narrower content types compared to the width of the page like a narrow column, more of the products in the carousel will appear per slide, regardless of the screen size. 

If you choose to stay with the Grid option, below are some things you should do: 

  1. Identify what products to display 
product content type products identify

There are 3 options you can select: Category, SKU, and Condition

Note that these options are mutually exclusive, you can only use one of these 3, not simultaneously, to display your products. 

Let’s go down to the details of each option: 

  • Category – use a chosen category to display your products.

When you choose this option, there will be a Category selector right below where you can choose the category of products to show. Select the type of products you wish. 

product content type select category
  • SKU – use one or more SKUs to display the products.

When you choose this option, there will be a Product SKUs text box to enter the SKUs of the products you want to display. Remember to separate them with commas. 

product content type enter skus
  • Condition – define one or more conditions of the products you want to display.

When you choose this option, there will be some tools to add products’ conditions. Click the green Plus icon  () to add one condition. Repeat to add more. 

If you want to remove any conditions, simply click on the red () icon nearby.

  1. Select the sort order for the products. 
product content type sort by
PositionOnly available with Category and SKU options. With Category: the products appear in the same order as in the catalog.With SKU: the products appear in the SKUs order that you have entered in the Product SKUs textbox.
Newest products firstProducts appear in the order of the day they were added, in other words, the most recently added product will appear first.
Oldest products firstOn the contrary to the newest products first option, the oldest product will appear first.
Name: A – ZProducts appear in alphabetical order.
Name: Z – AProducts appear in reverse alphabetical order.
SKU: ascendingProducts appear in alphanumeric order.
SKU: descendingProducts appear in reverse alphanumeric order.
Stock: low stock firstProducts appear in order of the stock available, the lowest will appear first.
Stock: high stock firstOn the contrary to the low stock first option, the highest  will appear first.
Price: high to lowProducts appear from highest to lowest price.
Price: low to highProducts appear from lowest to the highest price.

  1. Fill in the Number of Products to Display to finish this section. 

Note: 

  • After you set all the Category, SKU, or Condition, not all the products will display in the grid or carousel if they are disabled, marked as invisible, out-of-stock, or assigned to another website. 
  • In the Admin area, the price of configurable, grouped, and bundled products are undefined. In other words, you can not see the products in the preview if you filter them by price, and they will not appear in the exact order that you have assigned. 

If you choose to try the Carousel setting, there is something you may do: 

  1. To identify the products you want to display, follow the same steps as with the Grid option.
  2. The Carousel Mode setting helps you to set how the products will appear within the carousel.
product content type carousel mode

If you switch between Default and Continuous settings, the only thing that will be changed is the Infinity Loop setting.

  1. You can set the Autoplay option to Yes or No as you want. 
  • If Yes, the carousel will automatically scroll when the page loads. Then you can set the delay in milliseconds between each slide in the Autoplay Speed textbox.
  • If No, the customers have to click the navigation (dots or arrow) to see each slide in sequence. 
  1. In the Default mode, you can toggle  Infinity Loop

When you set Infinity Loop to Yes, the slide show will play non-stop when the page is open. If No, the slide show will only play once. 

Note: if  Infinite Loop is No and the Autoplay is Yes then the autoplay will stop at the last products of the sequence.

product content type infinity loop
  1. The last settings are Show Arrows and Show Dots

If you set Yes to Show Arrows, there will be next and previous navigation arrows on both sides of the slider. If No, nothing will appear on the left and right sides. 

If you set Yes to Show Dots, at the bottom of the slider, there will be navigation dots. If No, nothing will appear. 

Now if you still haven’t been satisfied with the results yet, then let’s move on to the Advanced settings. 

Try FREE Magezon Page Builder demo today

Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.

Advanced settings

  1. Select the Alignment to set the products list’s position within its container. Here are some options for you: 
product content type border alignment
DefaultKeeps the default alignment setting of the current theme.
Left Allows the list to be aligned along the parent container’s left border, with any padding given.
CenterAllows the list to be aligned in the center of the parent container, with any padding given.
RightAllows the list to be aligned along the parent container’s right border, with any padding given.
  1. Choose the style for the border of the Products container: 
DefaultKeep the default setting of the border style that is set by the associated style sheet.
NoneSet the container border as invisible.
DottedSet the container border as a dotted line.
DashedSet the container border as a dashed line.
SolidSet the container border as a solid line.
Double Set the container border as a double line.
GrooveSet the container border as a grooved line.
RidgeSet the container border as a ridged line.
InsetSet the container border as an inset line.
OutsetSet the container border as an outset line.
  1. You may want to alter some other border display options, including Border Width and Border Radius after enabling the Border style. 
product content type border display options
  • Border Color – identify the color of the border with a swatch, the color picker, a valid color name, or a hexadecimal value. 
product content type border color
  • Border Width – identify the borderline width in pixels.
  • Border Radius – identify the size of the radius of each corner. 
product content type border display options width radius
  1. If you know how to code and want to optimize the display, then you can add some CSS classes from the current style sheet. Note that you need to separate the class names with a space. 
  2. The final settings will be for the Margin and Padding
product content type margin and padding

Enter the values in pixels to determine the outer margins and inner padding of the Products container. 

MarginsThe outside blank space on the top/ right/ bottom and left of the container
PaddingThe inside blank space on the top/ right/ bottom and left of the container

There you are, now you have finished all the settings of the Products content type in Magento Page Builder. Next, we will see how it turns out. 

Save and Preview on the Stage

Click the Save button in the upper right corner to return to the Page Builder workspace and preview the result. 

product content type save button

If you have chosen the Carousel option with visible Arrow and Dot, this is what you got: 

product content type carousel review

If you have chosen the Grid option then the result will be the same as the photo above without the navigation arrow and dots.

If you have chosen the Carousel option in Continuous mode this is what you got:

product content type carousel continuous

Since we’ve configured the Products block, now you can use a Widget or Block to place this block wherever you want. 

That’s all about the Products content type in Magento Page Builder. Next part, we will show you how to optimize your products display with Magezon Page Builder. 

Level up Your Website With Magezon Page Builder

If you are already satisfied with the results that you got from the Magento Page Builder Products content type then you can continue to go optimize other contents on your website. If you are not, then let’s go with us to explore what Magezon Page Builder can do to stand your store out. 

We offer a Single Product option as a widget so that you can display a specific product as needed without creating a single, different product category as in Magento Page Builder. You can simply enter the name, SKU, or id of the product to identify the widget and place it wherever on the page. 

product content type magezon single product

For the Carousel Options in Product Slider and the Grid Options in Product Grid, we also optimize the customization process and responsiveness.

product content type magezon product slider responsiveness
Number of products in the slider to display on different devices
product content type magezon product slider customization
Customize the slider 
product content type magezon product grid customization and responsiveness
Number of products in the grid to display on different devices

You can customize not only the Products container like Grid or Slider but also the product itself. 

product content type magezon product options
Customize the product

After presenting some special features of Magezon Page Builder Single Product, we also would like to dig a little bit deeper into our builder extension alone. When you own this user-friendly website creator with more than 50 elements, you can easily build any high-converting page layout with no need for coding.

Further, we offer other Magento 2 extensions that you can find in the Magezon extension market.

Final Words

We hope that after the tutorial, the Products content type in Magento Page Builder is not a challenge anymore. You can stop right there if it is everything you need now, but if you are not satisfied then let Magezon Page Builder help you. 

Try FREE Magezon Page Builder demo today

Easily create beautiful, engaging Magento website in any style whenever you want without relying on developers or designers. Just by drag & drop.

About Ann Do

Ann Do
Ann is an experienced and passionate writer at Magezon. Her articles are aimed at helping audiences get their desired information and optimize their website.

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