The product listing module displays products in a list or gallery format and gives the user the ability to search and sort products. Additionally, it gives the user the ability to page thru products.

Product Listing Setup

After you add the module to the page, the next step is to configure the module the settings.

Store ID - Select the store you want to display products from.

Product Details Page - Select the page with the product details module.

Checkout Page - Select the page with the checkout module.

Enable Auto Filtering - In the header of the product list there is a search box where the user can do keyword searches. By default the user needs to click the filter button to search for products. When you check this box each keystroke will automatically filter products.

Auto Filtering Timeout - Enter the timeout value in milliseconds for auto filtering.

Default Display Mode - Select the display mode you want the product listing module to use.

Pager Displayed Pages - Enter the number of pages to show in the pager.

Pager Page Size - Enter the number of products to display per page.

Default Category - If you want the product listing to only display products from one category then select a category from the dropdown.

Add To Cart Event - This setting controls the behavior when the user clicks the add to cart button.

Use MiniCart - will add the item to the cart and keep the user on the product listing page.
Redirect to Checkout - will take the user to the checkout page.
Open Custom Modal - will display a custom form before taking the user to the cart page.

Changing the Layout

The layout of the product listing module is flexible and can be changed to look any way you want. Some of the design elements you may want to change include the following: