Displaying and customizing products

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Displaying and customizing products

Once you have created your products and catalogs, the next step is to insert the products on your site and customize the way they are displayed.

For details on setting up products, see Creating products.

Inserting products on a page

Note: In order for a product to be displayed on a site, it must first be added to a Catalog. Ensure that product has been added to a catalog before inserting it in a page.

There are two ways in which you can insert products on a page:

  • By inserting individual products on a page
  • Or by displaying a Catalog of products
  1. Open the page in editing mode by selecting Site Manager > Pages and clicking the page in the tree view.

  2. Place the cursor in the content editor where you want to insert the product.

  3. In the Modules tab of the Toolbox found on the right of the editor, do one of the following:

    • For individual products, select E-Commerce > Products, and then select the type of product to insert.

    • For a catalog of products, select E-Commerce > Catalogs, and then select the type of catalog to display.

  4. Click Insert.
  5. Save the page by clicking Update.

Customizing product display

If you preview the products you have inserted on the front end of your site, you will see the default layout display for products:

You can customize all aspects of the way a product is displayed on your site. Follow the below instructions to update the layout of products using tags.

Small product view (list of products)

  1. Select Site Manager > Module Templates, and then select Online Shop Layouts.
  2. Select Individual Product - Small. This is the list view of products when being shown in a Catalog.
  3. You can see that each tag dynamically displays the relevant information for each product:
  4. Edit the layout by using the tags available in the Toolbox menu on the right.
  5. Click Save and preview the new layout on the live site.

Large product view (Detailed product page)

When a customer clicks through one of the products on the site, they are taken to the detailed page of the product. The layout of the detail page can also be customized.

  1. Select Site Manager > Module Templates, and then select Online Shop Layouts.
  2. Select Individual Product - Large
  3. As with the small product view, you can edit the layout by using the tags available in the Toolbox menu on the right.
  4. Click Save and preview the new layout on the live site.