# 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, and Video Content.&#x20;

* 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&#x26;token=43ff0848-ffdf-46fe-b518-770351e53812" alt=""><figcaption><p>Install required addons</p></figcaption></figure>

### Create the field group "Bicycle"

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

Enter the field group's title, and 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%2FjROAtz8VbWDg9cLhxNFX%2Fbicycle-field-group.jpg?alt=media&#x26;token=23f64783-9d7a-4069-a830-396863c82921" alt=""><figcaption><p>Add a new field group</p></figcaption></figure>

### Create custom fields

Go to Admin > Components > TZ Portfolio+ > Fields > Add new fields (Color, Material, Seatpot, Weight, Torque, Frame Size, Chain, Brand).&#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%2FhYF7TMUq9QCZaJBPxRuM%2Fbicycle-custom-fields.jpg?alt=media&#x26;token=e2c495f8-3e55-450c-834f-b1ab2ce4c459" alt=""><figcaption><p>Custom fields list</p></figcaption></figure>

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FCtczH9w3Q4fNXZN7Vxeh%2Fbicycle-custom-field2.jpg?alt=media&#x26;token=aa001b8b-1ff9-4f93-a34f-cd2819c1cdf2" alt=""><figcaption><p>Add a new custom field</p></figcaption></figure>

### Create inventory category

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

Assign the category to the field group "Bicycle"

<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&#x26;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: Bicycle
* Add the bicycle'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%2F11sZZPqLOZSRA3BiW8gl%2Fbicycle-upload-image-gallery.jpg?alt=media&#x26;token=f2759af8-69b1-43b0-9ce4-328bbed072db" alt=""><figcaption><p>Upload image gallery</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Enter custom fields for a bicycle

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%2FdbbTO7ny9FqzLFUGg6T7%2Fbicycle-input-fields.jpg?alt=media&#x26;token=3bb7e703-83d7-4be1-992c-565ccb645496" alt=""><figcaption><p>Input the custom fields</p></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&#x26;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 \


<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&#x26;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&#x26;token=1d648756-fe79-4a7c-b300-a57b8c0e080d" alt=""><figcaption></figcaption></figure></div>

#### Bicycle's Pricing

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2F9aKKOvC2uPWWGKNFAC7B%2Fbicycle-price2.jpg?alt=media&#x26;token=2832ff72-b263-4e37-8c88-844b1fe76509" alt=""><figcaption></figcaption></figure>

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

The add-on allows you to add the main price, 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;

<figure><img src="https://3301969549-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBBXF4uM9fQS8Kd3Rdft%2Fuploads%2FnFbjsF22KagWi6OFW5gc%2Fbicycle-pricing-content.jpg?alt=media&#x26;token=6bb7b907-f25c-4b1f-9235-b175aa07e22f" alt=""><figcaption><p>Configure the pricing content addon</p></figcaption></figure>

### Configure the layout builder of a detailed bicycle 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&#x26;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\_probike\_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&#x26;token=4eabdceb-3b0a-4e5c-80a9-4034f9df3b71" alt=""><figcaption><p>Add an Inventory menu item</p></figcaption></figure>

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

It's time to have a look at your inventory page and detailed bicycle pages. If there is any problem or they don't look the way you expect, feel free to contact us.&#x20;



