Product Pages

Products

Products Directory

The default collection name for products is products, so create a _products directory to hold your product pages.

Custom Collection Directory

Added in v1.0.4

You can override the default and create a folder with your own collection name. For example, using a collection of books would require you to create a folder called _books.

Product Pages

Create a new page for each product, such as product1.md. In the front matter for this page you can set the standard settings, such as your title, subtitle, description (for meta-description), hero_image, as well as the additional product settings such as price, product_code, image, features, and rating.

title: Product 1 Name
subtitle: Product 1 tagline here
description: This is a product description
hero_image: /img/hero-img.jpg
product_code: ABC124
layout: product
image: https://via.placeholder.com/640x480
price: £1.99 + VAT
features:
    - label: Great addition to any home
      icon: fa-location-arrow
    - label: Comes in a range of styles
      icon: fa-grin-stars
    - label: Available in multiple sizes
      icon: fa-fighter-jet
rating: 3

The text you write for the page content will be displayed as the product description.

View example Product page

Product Collections

Next, add the following to your _config.yml to use collections to process the product pages and output them as individual pages.

collections:
  products: 
    output: true
    layout: product
    image: https://via.placeholder.com/800x600
    show_sidebar: false

You can also set default product page values here if you like, such as the layout or image.

If you use a custom collection name then update products to your custom collection name. In the example above for the _books folder use books as the collection name.

For more information on collections, please refer to the Jekyll documentation.