Product pages & categories

In order to present merchandise items or topical content overviews as dynamic teasers, you have the possibility to create your own product pages. This setup is a prerequisite for using the toujou Product Widget element and should not be confused with the settings to be applied there.

Create new product page Card settings/page properties

Related topics: Create categories Product Widget element

New product pages

Creating product pages should be your first order of business for selling any products or providing content overview. These pages are the basic database all product grids feed off from.

Create a new product page

We have already created a product folder for the tutorial. Product pages can also be placed below landing pages and/or portfolio/overview pages.
Above the page tree you will see all available page type icons. Click on the cube icon (»product page«) and drag-and-drop it to the desired location.
A blue area indicates where the new page will be sorted when you move over the page tree during the drag-and-drop process.
Give the blog entry a title. You can also edit/revise this later.

Enable the page

Right click on the icon of the new product page to open the context menu.
To make the page visible in the front end, click on the Enable option in the context menu.

Create page content

Click on the newly created product page within your page tree.
The page type Product page is divided into four sections, where you can place content elements.
- Header area: The place to upload a header image (optional).
- Teaser area: Here, you are offered all available content elements that are always assembled with a separator/divider in the primary color in the front end (optional).
- Content area: Here, you can find all available content elements that you can select and combine to illustrate your article.
- Other products: Final section of the page to draw attention to more products. This area is always displayed with a preceding separator/divider in the primary color in the front end (optional).

Card settings & page properties

Use these settings to control the appearance of product teaser cards that work in the widget element for the product grid.

Edit article page properties

Click on the middle icon Edit page properties above the content area of your product page.
The tabs for this are explained in detail in the tutorial Edit page properties.
In the steps explained below you will find out which tabs are relevant.

Product relevant tab

Tab »SEO«

Fill in the masks Title for search engines and Description. This snippet preview helps you optimize your product page for search engine results. Read more in the Yoast SEO tutorial.

Tab »Resources«

This tab is also relevant for product pages, as a teaser image must be selected separately for display in the cards (buttons Create new relation/select files and upload).