Add Content - Products

On the Admin sidebar, go to Content > Elements > Blocks.

Click Add New Block.

Enter the Block Title and Identifier.

Choose the Store View where the block is to be available.

Scroll down and click Edit with Page Builder or inside the content preview area to open the Page Builder workspace.

In the Page Builder panel, expand Add Content and drag a Products placeholder to the stage.

{width="600" modal="regular"}

To determine how the products list is displayed on the page, choose one of the appearance types:

{width="300"}

If you choose the product carousel, you must also configure the Carousel Settings.

For Select Products By, choose the method for product selection:

You can select your products by category, SKU, or condition. These options are mutually exclusive. For example, you cannot select the Category option, use the Category selector, then switch over to the Condition option to add some conditions. Your products are selected based only on what you set for one of these three options.

• Category - Choose this option to display products using a selected category.

  {width="500"}

  When selected, this option provides a Category selector. Click the arrow and drill down to choose the category of products to display. For example, in the Commerce sample data, drilling in and selecting the Women > Tops > Tees displays all products for that category.

  {width="500"}

• SKU - Choose this option to display products using one or more SKUs

  When selected, this option provides a Product SKUs text box where you must enter a comma-separated list of SKUs to display.

  {width="500"}

• Condition - Choose this option to display products according to one or more conditions that you define.

  When selected, there are tools available to add conditions to your products selection. For example, you could select only products with a Gender set to Unisex.

  {width="500"}

  note note
  NOTE
  Selecting the Category or SKU option provides the Sort By option of Position. With this sort option, the products appear in the same order that they appear in your catalog.
  For the Category option, sorting by position displays the products in the same order that they appear in your catalog. For the SKU option, sorting by position displays the products in the order that you enter them in the Product SKUs textbox.

For Sort By, choose the sort order for the products in the list:

{width="300"}

Enter the Number of Products to Display in the carousel or grid.

Values can be from 1 to 999. The default is 5 for a grid and 20 for a carousel.

To determine how the products are displayed within the carousel, choose the Carousel Mode:

If you switch between these two modes, the other carousel settings are retained, except for the Infinite Loop setting, which is always set to Yes in Continuous mode and the field is disabled.

{width="600" modal="regular"}

If needed, set the Autoplay option to Yes.

When autoplay is enabled, the carousel begins scrolling automatically when the page loads. If you leave the default setting (No), the customer must click the slide navigation (dots or arrows) to display each slide in sequence.

If you enable this feature, enter Autoplay Speed to specify the delay in milliseconds between each slide. The default value is 4000 (4 seconds).

If needed, set the Infinite Loop option to Yes.

When infinite loop is enabled, the slide show replays indefinitely while the page is open. If you leave the default setting (No), the slide show plays only once.

If needed, set the Show Arrows option to Yes.

When this option is enabled, each slide includes next and previous navigation arrows on the left and right side. If you leave the default setting (No), the slides do not display navigation arrows.

If needed, set the Show Dots option to No.

When set to the default setting (Yes), navigation dots appear at the bottom of the carousel slider. If you disable this setting, the carousel slider does not display navigation dots.

To control the positioning of the Products list within the parent container, choose the Alignment:

Set the Border style that is applied to all four sides of the Products container:

If you set a border style other than None, complete the border display options:

(Optional) Specify the names of CSS classes from the current style sheet to apply to the container.

Separate multiple class names with a space.

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

Enter the corresponding values in the diagram.