Use the Products content type to add a list of products to the stage, using either a grid or carousel layout. You also can use the Add Content - Block tool to place the block, with product list, on the Page Builder stage. Or, you can add the product list directly to a row on a page.
Guidelines for using the Products content type
The Products content type provides a powerful and engaging way to show off your products. To get the most out of it, we recommend adhering to the following guidelines:
Use the Product carousel directly within a Row to ensure a responsive layout of your products. Currently, inserting a Product carousel inside a Column or Tab will break responsiveness.
If you want your Product carousel to auto-scroll continuously, set both Autoplay and Infinite Loop to
Yes. If Autoplay is set to
Yesbut Infinite Loop is set to
No, auto-scrolling will stop at the end of your products list. So to ensure continuous scrolling, ensure both of these settings are set to
Set the Products Carousel Mode to
Continuousin order to highlight, center, and scroll one product at a time within the carousel. The other products will be visible in the list, but transparent in order to highlight the centered product.
Product List In Continuous Carousel Mode
Keep the Products Carousel Mode set to
Defaultto show and scroll up to five products at a time within the carousel.
Product List In Default Carousel Mode
The following example shows how to add a product list to a block. A widget can then be used to place the block at a specific location on any page in your store.
To add a Products content type
On the Admin sidebar, go to Content > Elements > Blocks.
Click Add New Block and do the following:
Enter the Block Title and Identifier. Then, choose the Store View where the block is to be available.
Scroll down to the Page Builder workspace. Then, in the Page Builder panel under Add Content, drag a Products placeholder to the stage.
Hover over the empty container. Then, choose Settings () in the toolbox to open the Products form.
Choose the Product Carousel for the Appearance (layout) of your products list:
In the Carousel Settings, configure the settings to match the following screenshot:
See the Product Carousel Settings table below for descriptions of each setting.
Select Products By
You can select your products by Category, SKU, or Condition. The Category and SKU settings can also be set within the Condition settings. However, selecting the Category or SKU buttons provides an additional Sort By option of Position. 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 they appear within the Product SKUs textbox. For more information on the Position setting, see Select Products By Settings: Product SKUs and Sort By.
Settings for these selection options are shown here:
Selecting Products By Catagory
Selecting Products By SKU
Selecting Products By Condition
Select the Category option button for Select Products By and select Women > Tops > Tees from the Category selector:
Selecting Products By Category
For Sort By, select Position (the default option):
Product Sorting Options
Enter the Number of Products to Display in the Product Carousel or Grid.
Values can be from 1 to 999.
In the upper-right corner of the form, click Save to return to the Page Builder workspace. Your Products carousel should look something like this on the stage:
Products List on Admin Stage
In the upper-right corner of the page, click Save.
|Product Grid||Displays the products within a grid that shows five products per row (by default), with as many rows as needed to display the number entered in the Number of Products to Display setting.|
|Product Carousel||Displays the products within a carousel (also known as a slider). The carousel shows up to five products per slide.
Responsiveness Alert: When you select this appearance, it is best to add the Products content type directly to a Row where it is responsive, showing fewer products per side on smaller screens. If you add it to any other content type (such as a Column or Tab), the carousel always shows five products per slide, regardless of the screen size.
Select Products By Settings
The three options for selecting products – by Category, SKU, or Condition – 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 will only be selected based on what you enter in the fields from one of these three options.
|Category||Selects the products to display by category. When selected, this option provides a Category selector to choose the category of products to display.|
|SKU||Selects products to display by SKU. When selected, this option provides a Product SKUs text box to enter a comma-separated list of SKUs to display.|
|Condition||Selects products to display from the conditions you define. When selected, this option provides a Condition selector for adding conditions to your products selection.|
|Category selector||Provides a selector that lists all the categories within your catalog to choose from. For example, in the Magento sample data, selecting the Watches category displays all the watch products within that category. Additionally, if Sort By is set to Position, the products will appear in the same order that they appear in your catalog.|
|Product SKUs||Provides a textbox into which you can enter SKUs for the enabled products you want to display. If you enter a SKU for a disabled product, it will not display. Additionally, if Sort By is set to Position, these SKUs will appear in the Products list in the same order you enter them into this textbox.|
|Condition selector||Provides a selector to add conditions (Gender, Price, Weight, and so on) for selecting the products you want to display in the Products list. For example, you could select only products with a Gender set to Unisex.|
|Sort By||Determines the sort order for the products in the list. Options:
Position (for Category and SKU options only): When you select the Category option, the Position displays products in the same order as their position in the catalog. When you select the SKU option, the Position displays products in the same order as the SKUs within the Product SKUs textbox.
Newest products first - Sorts products by the date they were added to the catalog, displaying the products with the most recent entry dates first.
Oldest products first - Sorts products by the date they were added to the catalog, displaying the products with the oldest entry dates first.
Name: A - Z - Sorts products in alphabetical order.
Name: Z - A - Sorts products in reverse alphabetical order.
SKU: ascending - Sorts products by SKU in alphanumeric order.
SKU: descending - Sorts products by SKU in reverse alphanumeric order.
Stock: low stock first - Sorts products from the lowest to the highest stock volume.
Stock: high stock first - Sorts products from the highest to the lowest stock volume.
Price: high to low - Sorts products from highest to lowest price.
Price: low to high - Sorts products from lowest to highest price.
|Number of Products to Display||Specifies the number of products you want to display in the products grid (default is 5) or carousel (default is 20). Note that some products in the Category, SKU, or Condition settings may not appear in your products grid or carousel. For example, disabled products, products marked as not visible, out-of-stock products, and products assigned to another website will not be displayed.|
Product Carousel Settings
The following settings appear when you select the Product Carousel appearance at the top of the form.
|Carousel Mode||Determines how the products are displayed within the carousel. Options:
Default - The carousel displays five products per slide by default and responsively reduces that number as needed.
Continuous - The carousel displays five products per slide by default (with an additional half of a product on the right and left), but centers and scrolls one product at a time in an infinite loop. Products to the right and left of the centered product are dimmed so that the center product is highlighted. Settings between these two modes are retained, with the exception of the Infinite Loop setting, which is always set to
|Autoplay||Determines if the carousel begins scrolling automatically when the page loads. Options:
Yes - The carousel scrolls automatically as soon as the page loads.
No - After the first slide, which appears by default, the slide navigation (dots or arrows) must be clicked to display the next slide in sequence.
|Autoplay Speed||Specifies the delay in milliseconds between each slide when Autoplay is used. Default value: 4000 ms (4 seconds).|
|Infinite Loop||Determines if the slide show replays from the beginning after the last slide. Options:
Yes - The slide show replays indefinitely while the page is open.
No - The slide show plays only once. Be aware that if you set Infinite Loop to
|Show Arrows||Determines if each slide includes next and previous navigation arrows on the left and right side of each slide. Options:
Yes - Navigation arrows appear on the left and right side of each slide.
No - The slides do not have navigation arrows.
|Show Dots||Determines if the carousel includes navigation dots below the slides. Options:
Yes - Navigation dots appear at the bottom of the slider.
No - The slider does not include navigation dots.
|Alignment||Determines the horizontal alignment of the block. Options:
Default - Applies the alignment default setting that is specified in the style sheet of the current theme.
Left - Aligns the block along the left border of the parent container, with allowance for any padding that is specified.
Center - Aligns the block in the center of the parent container, with allowance for any padding that is specified.
Right - Aligns the block along the right border of the parent container, with allowance for any padding that is specified.
|Border||Determines the border style that is applied to all four sides of the block container. Options:
Default - Applies the default border style that is specified by the associated style sheet.
None - Does not provide any visible indication of the container borders.
Dotted - The container border appears as a dotted line.
Dashed - The container border appears as a dashed line.
Solid - The container border appears as a solid line.
Double - The container border appears as a double line.
Groove - The container border appears as a grooved line.
Ridge - The container border appears as a ridged line.
Inset - The container border appears as a inset line.
Outset - The container border appears as a outset line.
|Border Color||Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.|
|Border Width||Determines the width in pixels of the container border.|
|Border Radius||Specifies the size of the radius that is used to round each corner of the border.|
|CSS Classes||Specifies the names of CSS classes from the current style sheet which apply to the container. Separate multiple class names with a space.|
|Margins and Padding||Determines the size, in pixels, of the outer margins and inner padding of the block container. Enter the corresponding values in the diagram.
Margins - The amount of blank space, in pixels, that is applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
Padding - The amount of blank space, in pixels, that is applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left