"New Products" List on Home Page

Watch the video tutorial! The list of new products on your home page is an example of dynamic content, and consists of live data that is pulled from your product catalog. By default, the “New Products” lists the first eight of the most recently added products. However, it can also be configured to list only the products within a specified date range.

New Products List on Home Page
New Products List on Home Page

Step 1: Set the Date Range for Each Product

To make a product appear in the list by date range, the dates must be specified in the product record. The product then appears in the New Products list for the date range specified.

  1. On the Admin menu, select Catalog > Manage Products.
  2. Find the product you want to feature, and open the record. Then, do the following:
    1. In the Set Product as New From Date field, click the calendar button and select the first date that you want the product to be featured.
    2. In the Set Product as New To Date field, click the calendar button and select the last date that you want the product to be featured.
  3. Set Product Date Range
    “Set Product As New” Date Range
  4. When complete, click the Save button.

    The product will now appear in the New Products list during this date range.

  5. Repeat these steps for each product that you want to feature.

Step 2: Create a Working Copy

The code that determines the content of the list and its placement in your store is generated by the Frontend App tool. To create your own working copy of the New Products list, simply save a copy of the existing app. Your working copy is a new “instance” of the app, and any changes you make will not affect the original.

  1. From the Admin menu, select CMS > Frontend Apps.
  2. Click the Add New Frontend App Instance button.
  3. In the Settings section, select Catalog New Products List. Then, click the Continue button.
  4. Frontend App Type
    Frontend App Type
  5. In the Frontend Properties section, complete the following fields:
    Frontend App InstanceEnter a descriptive title for your app. This title is not shown in your storefront—it is visible only in the administrative back office of your store.
    Sort Order(Optional) Enter a number to determine the order this items appears with others in the same part of the page. (0 = first, 1 = second, 3= third, and so on.)
    Assign to Store ViewsSelect the store views where the app will be visible. You can select a specific store view, or “All Store Views.”
  6. Frontend Properties
    Frontend Properties

Step 3: Select the Location for the List

  1. In the Layout Updates section, click the Add Layout Update button. Then, do the following:
    1. Set Display On to “Specified Page.”
    2. Set Page to “CMS Home Page.”
    3. Set Block Reference to “Main Content Area.”
    4. Set Template to one of the following:
      • New Product Lists Templates
      • New Products Grid Template
  2. Layout Updates
    Layout Updates
  3. Click the Save and Continue Edit button to save your changes.

Step 4: Configure the List

  1. In the panel on the left, select Frontend App Options.
  2. Set Display Products to one of the following:
    All ProductsLists products in sequence, starting with those most recently added.
    New ProductsLists only the products which are identified as &ldqup;New.” A product is considered to be new during the date range specified in the “Set Product As New From” date and “Set Product As New To” date. fields of the product. The list will be blank if the date range expires and no additional products have been set as “New.”
  3. Complete the remaining information as follows:
    1. Set Number of Products to Display to the number of new products you want to include in the list. The default setting is 10.
    2. To provide navigation control for lists with multiple pages, set Display Page Control to “Yes.” Then, in the Number of Products per Page field, enter the number of products you want to appear on each page.
    3. In the Number of Products to Display field, enter the total number of products you want to include in the list.
    4. In the Cache Lifetime (Seconds) field, select how often you want to refresh the list of new products. By default, the cache is set to 86400 seconds, or 24 hours.
    Frontend App Options
    Frontend App Options
  4. When complete, click the Save button.

Step 5: Preview Your Work

  1. From the Admin panel, select CMS > Pages > Manage Content.
  2. Find the published page where you placed the New Products list. Then, in the Action column, click the Preview link.

Removing the “New Products” List

If you don’t want the New Products list to appear on your home page, the code can either be “commented out,” or removed entirely.

To remove the New Products list:

  1. From the Admin panel, select CMS > Pages > Manage Content.
  2. In the list, click to open the version of your home page that is currently published.
  3. In the Page Information panel on the left, click Content. Then, in the Content section, click the Show / Hide Editor button.
  4. As a precaution, before you make any changes to the code, find the closing </div> tag at the end of the text, and insert a carriage return to move it to a separate line. This tag must not be deleted. In most cases, you will find code that is similar to the following, just above the closing </div> tag.
    {{widget type="catalog/product_widget_new"
    display_products="all_products" show_paginator="0" products_per_page="8"
    products_count="8" template="catalog/product/widget/new/content/new_grid.phtml"}}
  5. To remove the list from your home page, do one of the following:
    • Delete the code, including the opening and closing double braces.
    • Comment out the code, by enclosing the entire statement in opening () comment tags, as shown below:
    <!-- {{widget type="catalog/product_widget_new" display_products="all_ products" show_paginator="0"
    products_per_page="8" products_count="8" template="catalog/product/widget/new/content/new_grid.phtml"}} -->
  6. To preview the change in a new browser window, click the Preview button.
  7. When you are satisfied with the results, return to the Manage Content page, and click the Save Page button.

Discussion:

Explore the Knowledge Base