14. Frontend Shop

After you have added some products, it is time to display them at the frontend of the site. There are two view: (i) Products to display list of products in a category and (ii) Single product from where visitors and buy the product.

1. Menu Item

Create a new Menu Item for TF Shop -> Products.

Category: Select the category for the products.

Options Tab

Columns: Select the number of products to display in one row.

Buttons: There are three action buttons you can enable or disable. For each button, you can enter the caption text and style it by adding CSS class.

  1. Details Button - This is displayed at the Products view. On clicking it, single product is displayed.
  2. Buy Button - This is displayed at the single product page. The visitor can directly buy the product by clicking it.
  3. Cart Button - This is displayed at the single product page. The visitor can add the product to the cart.

The cart is used to purchase one or more products in multiple quantities. The Buy Button is used used to purchase single product directly.

2. Component Options

2.1 Products Tab

These setting apply for the list of products page.

Order Column: Select the column for ordering the products. The options are id, title, created, modified, ordering, random.

Order Direction: Select the direction - ascending or descending.
 
Show Title: Toggle switch to display or hide the product title.

Show Description: Toggle switch to display or hide the product description.

Show Image: Toggle switch to display or hide the product image.

Show Search: Toggle switch to display or hide the search field for the products.

RSS Feed Link: Toggle switch to display or hide the feeds.

2.2 Product Tab

These settings apply for single product page.

Layout: Select the layout to display the product information.

  1. Plain or Simple
  2. Accordion
  3. Tabs

Special Prices: Toggle switch to display or hide the special (smart) prices.

Discount Code Form: Toggle switch to display or hide the field where users can enter the discount code.

Record Hits: Enable or disable to record page views or hits for the product.

Enable Structured Data: Toggle switch to enable or disable the structured data for SEO.

Prepare Content: Toggle switch to run content plugins before displaying the description of the product.