Product List

The easiest way to display multiple products on a single page is to add a Product List block. The Product List block can dynamically show a wide range of products based on the settings you specify.

Data Source

search_tab.png

Which products would you like to display? Several options are available under the Data Source dropdown menu:

  • Directly under this page will display any products placed as child pages under the current page. Great for organizing all your products under a single "catalog" page, as in the sample duck content.
  • A stored search query searches your products for keywords return all that match.
  • Top purchased products will grab the most frequently-purchased products on your site up front and center.
  • Products on Sale displays products that have discounted "sale" prices set.
  • Breadcrumb of products seen will display all the products the user has recently viewed.

Search Form

 search_options.png

The Search form allows users to search products by keywords and attribute. Options include Simple / Advanced input fields, and the ability to direct users to a separate results page. Here's what the two options look like, as displayed on a page:

Basic Search

core-commerce-docs-search2.png

Advanced Search

core-commerce-docs-search3.png

Displaying Properties

The Data Formatting tab gives you control of how product properties are displayed.

data_formatting.png

  • Page displays the property in the product list
  • Callout displays the property in the rollover "callout" overlay
  • Lightbox displays the property in the lightbox-style overlay displayed when a customer clicks the product thumbnail.

Product Image Options

These settings allow you to control which product thumbnail is displayed as default for all products in your block, plus their size and relative position:

image.png

Product Link Options

These settings allow you to show, hide or customize the Add to Cart button text, and determines whether or not the product will link to its default detail page.

product_links.png

Product Overlay Options

These settings control which image overlays are used, and their sizes.

use_overlays.png

Formatting Results

results_layout.png