Product Listing Page

SmithCart > Configuration

The product listing page is the first page you see when you navigate to the BuyNow module. The product listing page allows you to display multiple products in a list or gallery format and gives the user the ability to search and sort products.

Contents


 

Product Listing Setup

To configure your product listing settings, navigate to the BuyNow module and select "Setup" from the admin menu:
 
Scroll down to the "Product Listing Page" section and expand the panel.
 

Use Mini Cart – Select this option if you want to use the mini cart module

Default Category – Used to select the default category that the product listing page displays. Select “All Categories” for no filter.

Product Catalog Layout – Formats the product listing page of your catalog for single column or multiple column layout.

Product List Direction – Formats the product listing page of your catalog to list products in either a vertical or horizontal direction according to the sort order configured for your products in the product setup screen.

Note:

Only applies if Product Catalog Layout is set to "Multi Column"

[up to contents]



Search and Sort Bar

The Search and Sort Bar provides the following built in search capability:

  • Search by Product Sku
  • Search by Product Name
  • Search by Product Summary
  • Search by Product Description
  • Search within category on sku, product name, summary and description

All searches perform wildcard searches to enable partial string matches.

Additionally, SmithCart is integrated with the DNN iSearchable interface so all your products are indexed and searchable using the native DNN search module.

For more information on building a searchable keyword list of search terms that may not show up in your product names or descriptions Click here for the Search Term Management screen.

The following settings are available to choose on the Search and Sort Bar:

Hide Search and Sort – Select this option if you would like to hide the search and sort bar at the top of the product listing page.

Show Search Bar Only – Select this option if you would like to show the product search bar at the top of the product listing page.

Show Sort Bar Only – Select this option if you would like to show the product sort bar at the top of the product listing page. The product sort dropdown list supports sorting products by the following options:

  • Price low to high
  • Price high to low
  • Brand and product name A-Z
  • Brand and product name Z-A
  • Sku A-Z
  • Sku Z-A
  • New Arrivals
  • Featured products
  • Pre-defined sort order

 

Show Both Search and Sort Bar – Select this option if you would like to show both the product search and sort bar.

[up to contents]



Records Selector

The Records Selector allows you to choose how your Products are displayed on the Product Listing page.

The following Records Selector options are available to choose from:

Hide Records Dropdown – When selected the “Records” dropdown on the product listing page will be hidden.

Show Records Dropdown – When selected the “Records” dropdown on the product listing page will be displayed.

Show all products on a Single Page – When selected, all products will be displayed on one page, the records dropdown at the top of the catalog will be hidden and the navigation controls at the bottom will be hidden.

Show all products on a Single Page with Categories – When selected, all products will be displayed on one page, the records dropdown at the top of the catalog will be hidden and the navigation controls at the bottom will be hidden. The products (on one page) will be grouped into categories.

Records Dropdown Values – This feature allows you to enter a comma separated list of numbers of Products to be displayed on the Product Listing page and in the records dropdown.

[up to contents]



Show Fields

The following settings allow you to display additional fields and options on the Product Listing page:

Show Image Popup – Check this box to enable an image popup window to be displayed when hovering over the thumbnail image. The image popup displays a large image of the product next to the thumbnail image.

Show Category Description – Check this box if you would like to display the category description on top of the product listing page.

Show Product Summary – Check this box if you would like to display the product summary on the product listing page.

Show Product Rating – Check this box if you would like to display product ratings above the price on the product listing page.

Sold Out Message – Check this checkbox if you want the cart to display a "Sold Out" message if the quantity on hand for any given product is zero. The “Sold Out” message or image will be displayed on the product listing page under the price field.

The text of the "Sold Out" message can be changed to any message you like by changing the sold out label in the productlist.resx file located in the app_localresources folder. The styling of the message can be changed by modifying the module.css.

The following is a screenshot of the sold message on the product listing page:

The same setting is available in the product detail module settings that allow you to configure the "Sold Out" message to be displayed on the product details page. See the product detail module settings for more information.

Show In Stock Message – When enabled displays an "In Stock" message if the quantity on hand for any given product is greater than zero.

Show Quantity On Hand – Check this box to display the quantity on hand on the product listing page.

Show Coupon – Check this box if you would like to display product ratings above the price on the product listing page.

If you check this box a coupon text box will be displayed on the product listing page for the user to enter their coupon code. If the user enters a valid coupon code their order total will be discounted by the amount or percentage of the coupon that you configured in the Coupons section

Coupon Label – This setting allows you to set the label next to the textbox on the product listing page. It will allow you to set the label as "Coupon Code", "Promotion Code" or anything you like.

Enable Coupon Validation – When checked if user enters an invalid coupon and clicks add to cart an invalid coupon message will be displayed and the user will remain on the product list page. When not checked and the user enters an invalid coupon and clicks add to cart, the product is added to the cart and the user is taken to the cart page and no discount is applied.

[up to contents]



Hide Fields

The following settings allow you to hide fields and options on the Product Listing page:

Hide Price – When hide price is checked the “Price” field is replaced with “Request a Quote”.

Hide Quantity – When checked hides the quantity textbox on the product listing page.

Hide Add to Cart – Check this box if you would like to hide the “Add to Cart” button on the product listing page and the product detail page.

Hiding the “Add to Cart” button turns your store into a product catalog only and will not allow users to checkout and purchase product. This is useful if your business only sells to resellers that require prior approval before buying your products.

Hide Thumbnail – When "Hide Thumbnail" is checked the thumbnail on the product listing page will be hidden.

Hide Navigation – The navigation controls at the bottom of the page will be hidden.

[up to contents]



Show Buttons

The following options allow you to show additional buttons on the Product Listing Page:

Show View Details Button – When checked shows a view details button on the product listing page in addition to the add to cart button. When clicked, the view details button directs the user to the product details page.

Show Add To Wishlist Button – When “Enable Wish List/Saved Cart” is checked in the cart settings the “Save Cart” and “View Saved Cart” buttons will be displayed on the cart screen.

Show Add To Compare Button – When checked displays the Add To Compare button. Clicking the Add To Compare button will add the associated Product to the Product Compare module.

Product Compare Limit – Enter the number of products to allow users to compare. Enter -1 to allow user to compare an unlimited number of products side by side.

[up to contents]