> 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.&#x20;

### 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F9mh3V2Fmrb2melB8EYEf%2Finstall-required-addons.jpg?alt=media&amp;token=43ff0848-ffdf-46fe-b518-770351e53812" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FwpTCdN2I2694DtMlgZHd%2Fcreate-field-group.jpg?alt=media&amp;token=ff1d8e5b-1e1c-49af-907f-f3c4aeceb030" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F0zBS5C9oG9N2JlAjarli%2Ffield-list.jpg?alt=media&amp;token=c472ba48-6736-48ec-9159-93c6f500acad" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FdAXAu0KcfeGn4gO11GUe%2Fcreate-custom-fields.jpg?alt=media&amp;token=1c13b593-c3fc-4106-b1ec-11df0ce5d975" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FfzlHLmARAbI18vhJKxMf%2Fcreate-inventory-category.jpg?alt=media&amp;token=86f958f2-d61e-49cc-8705-fa5b40f4310b" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2Fv29bm3nN8I7UUcLVGeiT%2Fupload-image-gallery.jpg?alt=media&amp;token=10d02649-1288-4c56-b232-13dc660c08e0" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FB9tE6NySEpJSHtHnZOxd%2Fenter-custom-fields.jpg?alt=media&amp;token=72da6c82-07dd-47a3-8f91-ceb16ce24685" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FLljOxsQAE2MfBwTZky8S%2Fhide-show-custom-fields-in-list-view.jpg?alt=media&amp;token=4b3a387c-a44a-4bad-a4e3-7f1d4f3de267" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FNYwznv9JDE1jaE6uaprd%2Fform-builder2.jpg?alt=media&amp;token=a167aea8-8aa0-4223-9d6c-aaaa901ae161" alt=""><figcaption></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F14QKXLjppbjTLZonJEkm%2Fform-builder.jpg?alt=media&amp;token=1d648756-fe79-4a7c-b300-a57b8c0e080d" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FbawI6uTRYGAraR9jKUrN%2Fpricing-content3.jpg?alt=media&amp;token=c56e0fd6-65a6-4df4-8d55-e2c7f007fd95" alt=""><figcaption></figcaption></figure> <figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FqUFPDY85bPhkLsOnB3uD%2Fpricing-content.jpg?alt=media&amp;token=de78bf96-d952-418f-8702-125b232d825e" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FK53ikC8NhcylYxj9vCBu%2Fedit-portfolio-layout.jpg?alt=media&amp;token=27f4508f-668b-4bb9-a083-72ae8925831f" 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="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FpnOdEG6i5V5L4uqNCWsN%2Finventory-menu.jpg?alt=media&amp;token=4eabdceb-3b0a-4e5c-80a9-4034f9df3b71" alt=""><figcaption><p>Inventory menu item</p></figcaption></figure>

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