> For the complete documentation index, see [llms.txt](https://docs.jollyany.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jollyany.co/templates/autobike/inventory.md).

# Inventory

The inventory page should be built with TZ Portfolio+ component, so you need to make sure the component is installed on your website. 

### Install TZ Portfolio+ addons

You're supposed to install some TZ Portfolio+ addons including Image Gallery, Form Builder, Pricing Content, Video Content, and Leader Price.

* You should go to Admin > Components > TZ Portfolio+ > Addons
* Click install/update button
* Install those mentioned addons one by one

<figure><img src="/files/UvthJSta73OawzXyUX9j" alt=""><figcaption><p>Install required addons</p></figcaption></figure>

### Create the field group "Motorbike"

Go to Admin > Components > TZ Portfolio+ > Field Groups > Add new

Enter the field group's title, choose the field ordering type.

{% hint style="info" %}
Learn more about [how to use field groups](https://www.tzportfolio.com/document/administration/29-how-to-use-group-fields-in-tz-portfolio-plus.html) in TZ Portfolio+
{% endhint %}

<figure><img src="/files/WzeRY2riGHalz575geIT" alt=""><figcaption></figcaption></figure>

### Create custom fields

Go to Admin > Components > TZ Portfolio+ > Fields > Add new fields (Make, Model, Year, Minimum Age, Maximum Speed, and Engine Type).&#x20;

Custom fields may have the same or different types that depend on your needs and utility.&#x20;

{% hint style="info" %}
Learn more about [how to use custom fields](https://www.tzportfolio.com/document/administration/30-how-to-use-fields-in-tz-portfolio-plus.html) in TZ Portfolio+
{% endhint %}

<figure><img src="/files/UAsoyCZBwcwC8N2FdFLP" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RqZHEa6ZPiEfcjT0gKM2" alt=""><figcaption><p>Create custom field</p></figcaption></figure>

### Create inventory category

Go to Admin > Components > TZ Portfolio+ > Categories > Add new

Assign the category to the field group "Motorbike"

<figure><img src="/files/VhVBI7IlPFCi5SkAUuYO" alt=""><figcaption><p>Create a category</p></figcaption></figure>

### Create Portfolio articles

* Go to Admin > Components > TZ Portfolio+ > Articles > Add new
* Assign the article to the Inventory category
* Choose a media type: Image Gallery
* Choose a field group: Motorbike
* Add the motorbike's description to the content box

{% tabs %}
{% tab title="Upload Image Gallery" %}

<figure><img src="/files/YqIpl5NRllVZqrqtKxrT" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Enter custom fields for motorcycle

Enter custom fields' information or choose available options in the drop-down list.&#x20;

<figure><img src="/files/81SCjo9Nq12xpPaKPtkS" alt=""><figcaption></figcaption></figure>

To show or hide a field from the list view or detailed view, you can go to TZ Portfolio+ > Fields > open the field > enable or disable the list view or detailed view options.&#x20;

<figure><img src="/files/vYR16aTTT6FMxbui10rC" alt=""><figcaption><p>Hide or show a field from the list view or detailed view</p></figcaption></figure>

#### Form Builder - Contact Form

* Provide Email & Recipient Options
* Enter Success & Error Message Options
* Configure Redirect, Security & Policy Options
* Configure Button Options and fields in the form <br>

<div><figure><img src="/files/Wy85HJamQTEMYIcdC73G" alt=""><figcaption></figcaption></figure> <figure><img src="/files/hYbkNJydzo1rkv6cmkcL" alt=""><figcaption></figcaption></figure></div>

#### Motorbike's Pricing

We used Pricing Content addon to display the motorbike's pricing. Afte installing the addon, go to edit an article > pricing content tab > Click + to add pricing items

The addon allows you add main price, and price meta, title, meta text and description.&#x20;

In General Options, you can adjust the pricing column's ratios on different devices. Moreover, it's possible to customize the style of price, and price meta as your preference.&#x20;

<div><figure><img src="/files/wCIL4i60L7aVlMrhqODO" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Vs2LCtGMVDNjIhJlvFwZ" alt=""><figcaption></figcaption></figure></div>

### Configure the layout builder of a detailed inventory page

There are a lot of content elements displayed on a detailed inventory page, so how can we organize them to fit our needs? Let's go to TZ Portfolio+ > Layout > Open Elegant - Default.&#x20;

Here you're able to manage the layout of a detailed inventory page by dragging and dropping elements to a suitable position.&#x20;

It allows you to add more or remove any element you want. You can assign the layout to menus, categories, and articles.&#x20;

<figure><img src="/files/5d4vhNxxYiXPWD4Afv4l" alt=""><figcaption><p>Configure the layout builder</p></figcaption></figure>

### Create an inventory menu

After all, it's time to present the inventory page in the front-end by creating a menu item and assigning it to the main menu.&#x20;

* Go to Menus > Mein Menu > Add new
* Menu item type: TZ Portfolio+ > Portfolio
* Choose a category "Inventory"
* Choose a TZ Portfolio+ layout: Elegant default or any other you want
* Template style: tz\_autobike\_default

<figure><img src="/files/xkn19E7gAJ8nGGVwdlUF" alt=""><figcaption><p>Inventory menu item</p></figcaption></figure>

### Go to front-end and check the page again