# Dealership Inventory Page

The **Inventory page, Search Results Page,** or **Listings Page** is the listings' archive page, where the users can see the list of available listings and sort them according to the provided options in the theme filter.&#x20;

{% tabs %}
{% tab title="Classic Inventory Desktop View" %}

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FKrQVcL222SaEkV2yLhKt%2FMotors%205.17%20-%20%20Classic%20Inventory%20desktop.png?alt=media&#x26;token=ddc4c06c-6830-47fa-ac8c-038e94a80298" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Classic Inventory Mobile View" %}

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FKqDrx12Zmpen7BaoEaCX%2FMotors%205.17%20-%20%20Classic%20Inventory%20mobile.png?alt=media&#x26;token=9ca810ba-29ff-4878-bbb5-4cee7173a351" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

To get advanced settings of the Inventory page in plugin settings, refer to this documentation:&#x20;

{% content-ref url="../search-filter/search-results-page" %}
[search-results-page](https://docs.stylemixthemes.com/motors-theme-documentation/search-filter/search-results-page)
{% endcontent-ref %}

To include sold listings on the Inventory page please refer manual below:

{% content-ref url="../listing-management/sold-listings" %}
[sold-listings](https://docs.stylemixthemes.com/motors-theme-documentation/listing-management/sold-listings)
{% endcontent-ref %}

## How to create an Inventory page with Elementor

With the Elementor page builder, you can create a Classic Inventory page using the following widgets:

* **Search Filter**
* **Search Result**
* **View type**
* **Sort By**

Dividing the page into two columns is recommended, as shown in our demos.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FHUaSgO4Q8WyIOw1uud1S%2FMotors%205.17%20-%20%20Classic%20Inventory%20Structure.png?alt=media&#x26;token=3cf8d824-a872-42cf-9290-f776543641c9" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The thinner column will be used for the Search Filter. Based on your requirements, you can make the right column thinner.
{% endhint %}

### Usage of the "Search Filter" widget

The Search Filter widget renders a search form with listing categories:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2Fvik6OTFKObCfNxCRJhPX%2FMotors%205.17%20-%20%20Classic%20Inventory%20search%20filter.png?alt=media&#x26;token=a186a6f5-a176-4133-ba8c-a79deaea7451" alt=""><figcaption></figcaption></figure>

To add listing categories to the search filter, you must enable the "**Use on car filter**" option when editing them.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FmJHZMxM9OrgNO4UibXj3%2FMotors%205.17%20-%20%20Classic%20Inventory%20search%20filter%20category%20setting.png?alt=media&#x26;token=f40baf5a-b987-4c62-8222-f84f9e167b0e" alt=""><figcaption></figcaption></figure>

{% content-ref url="../search-filter/inventory-listing-categories" %}
[inventory-listing-categories](https://docs.stylemixthemes.com/motors-theme-documentation/search-filter/inventory-listing-categories)
{% endcontent-ref %}

In the "**Content**" tab of the widget, you can replace default labels and icons:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FbxYd7OJjU4WsmqTK5Fc9%2FMotors%205.17%20-%20%20Classic%20Inventory%20search%20filter%20category%20%20contentsetting.png?alt=media&#x26;token=32512ee3-a695-4b88-850c-51a0bfb2ad7a" alt=""><figcaption></figcaption></figure>

In the "**Style**" tab of the widget, the appearance of the filter can be adjusted both for desktop and mobile views:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2F7OgsgpnZbjWvy2pf2diC%2FMotors%205.17%20-%20%20Classic%20Inventory%20search%20filter%20category%20style%20setting.png?alt=media&#x26;token=4dc1b821-2205-43d8-b111-16f251695770" alt=""><figcaption></figcaption></figure>

The "Advanced" tab is a default feature of Elementor. Give a read to [this Document](https://elementor.com/help/advanced-tab/) to know more about Advanced features and their uses.

{% embed url="<https://elementor.com/help/advanced-tab/>" %}

### "Search Result" widget adjustments

It is required to add a "Search Result" widget to the page to show listings that match filter options.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2F74VLsBPNTfQXzLQY8jU1%2FMotors%205.17%20-%20%20Classic%20Inventory%20search%20results%20widget.png?alt=media&#x26;token=c190219c-18cf-49fd-aa76-87996b81c9e4" alt=""><figcaption></figcaption></figure>

In the "**Content**" tab of the widget, select a number of listings to show in **Grid/List** views:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FBDrh1JLfwLuGH4ddjlgB%2FMotors%205.17%20-%20%20Classic%20Inventory%20search%20results%20widget%20content.png?alt=media&#x26;token=d68c1a1a-48fb-415b-b68e-39e94552a10a" alt=""><figcaption></figcaption></figure>

In the "**Style**" tab of the widget, you can specify the color for pagination buttons.

### Usage of the "View Type" widget&#x20;

To enable users to switch between Grid/List views, the "View Type" widget should be included on the page.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2Fmctq6eNrtc10PGEDvyF3%2FMotors%205.17%20-%20%20Classic%20Inventory%20view%20type%20widget.png?alt=media&#x26;token=1d0316f2-6451-4acd-9601-944eeedabc80" alt=""><figcaption></figcaption></figure>

### Utilization of the "Sort By" widget

The "**Sort By**" widget enables the option to sort listings in ascending and descending order based on numeric categories.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FmCsfvzUlnnhLExRGG8CF%2FMotors%205.17%20-%20%20Classic%20Inventory%20sort%20by%20widget.png?alt=media&#x26;token=f8f2572d-a20c-47af-9a98-b50d837d8db0" alt=""><figcaption></figcaption></figure>

The Sorting options are set from **WP Dashboard > Motors Plugin > Search Filters** section directly:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2F6rUefYJlq97hjOc6Dj7C%2Fimage.png?alt=media&#x26;token=3966a2ef-76b7-4137-9c88-efd2bcb985b2" alt=""><figcaption></figcaption></figure>

{% content-ref url="../search-filter/search-filters" %}
[search-filters](https://docs.stylemixthemes.com/motors-theme-documentation/search-filter/search-filters)
{% endcontent-ref %}

## How to create an Inventory page with WPBakery

The WPBakery Page builder allows you to create an Inventory Page with two styles: Classic and Modern.&#x20;

{% tabs %}
{% tab title="Classic Inventory" %}

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FKrQVcL222SaEkV2yLhKt%2FMotors%205.17%20-%20%20Classic%20Inventory%20desktop.png?alt=media&#x26;token=ddc4c06c-6830-47fa-ac8c-038e94a80298" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Modern Inventory" %}

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FG5z2MGDJ46y4qqz1GuSV%2FMotors%205.17%20-%20%20Modern%20Inventory.png?alt=media&#x26;token=7ab2b450-bbf6-430b-a863-035a9499f0ca" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

These layouts are created using two different WPBakery modules.&#x20;

### Classic Inventory

To create a Classic Inventory with WPBakery Page builder the "STM Classic Filter" module should be added to the page.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2Fn01Md8t1wOdBU1idSHJe%2FMotors%205.17%20-%20STM%20Classic%20Filter%20Widget.png?alt=media&#x26;token=7dcb1c49-912b-4104-825a-f29bbd2deff1" alt=""><figcaption></figcaption></figure>

In the settings of the widget, select a number of listings to show in **Grid/List** views:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2F4PoiUebYKIgFZWWdL4Uy%2FMotors%205.17%20-%20STM%20Classic%20Filter%20Widget%20settings.png?alt=media&#x26;token=f410601e-3d27-4be6-87e7-d716e5fb740b" alt=""><figcaption></figcaption></figure>

### Modern Inventory

To create a Modern Inventory with WPBakery Page builder the "STM Modern Filter" module should be added to the page.

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FeyWmf0ZO5iSGaA7CPLC5%2FMotors%205.17%20-%20STM%20Modern%20Filter%20Widget.png?alt=media&#x26;token=089a977c-7abb-4962-b6ee-f5a2612a60af" alt=""><figcaption></figcaption></figure>

The Modern inventory lacks additional settings and displays all published listings on a single page without pagination.

## Assigning the Inventory Page in Plugin Settings

Search Results (Inventory) page can be indicated by following **WP Dashboard > Motors Plugin > Settings > Pages > Listings Page:**

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FcBGlasHIB4E2WBZXHBfJ%2Fimage.png?alt=media&#x26;token=8bf7851e-36db-4931-b9a2-8c84ebb28d1f" alt=""><figcaption></figcaption></figure>

## Inventory view of different demos

Each dealership demo has its own unique style for the Inventory page.

### Car Dealership One:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FKrQVcL222SaEkV2yLhKt%2FMotors%205.17%20-%20%20Classic%20Inventory%20desktop.png?alt=media&#x26;token=ddc4c06c-6830-47fa-ac8c-038e94a80298" alt=""><figcaption></figcaption></figure>

### Car Dealership Two:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2F4xQR5earVoUwdKzbYp1A%2FMotors%205.17%20-%20Inventory%20Dealer%20two.png?alt=media&#x26;token=74ff61c0-f8cd-404d-b55b-d2f5eb646fc2" alt=""><figcaption></figcaption></figure>

### Electric Vehicle Dealership:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2F23rJqkBRqJbT4KUnMFh6%2FMotors%205.17%20-%20Inventory%20Electric.png?alt=media&#x26;token=0ea51233-1a76-41bd-9aef-03a170568b32" alt=""><figcaption></figcaption></figure>

### Motorcycles Dealers:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2F8isxw2pb2MmIUbrqCxPg%2FMotors%205.17%20-%20Inventory%20Motorcycles.png?alt=media&#x26;token=d45f7eff-04fa-4443-8f72-e0203eb67cf5" alt=""><figcaption></figcaption></figure>

### Boat Dealership:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2Fr1gwo4U8n0V73EgsKInp%2FMotors%205.17%20-%20Inventory%20Boat.png?alt=media&#x26;token=636c5762-9e4e-4d3a-b504-cdb1a3dbe2e0" alt=""><figcaption></figcaption></figure>

### Aircraft:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FJA4sVarBuGQ8iftN7Hvo%2FMotors%205.17%20-%20Inventory%20Aircrafts.png?alt=media&#x26;token=fdf6acdd-d134-4c30-8cf7-bd9058644b2d" alt=""><figcaption></figcaption></figure>

### Equipment:

<figure><img src="https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDP3ivYPbpYO9Rs_wuB%2Fuploads%2FPVadg6MyUwjDkwaMox4X%2FMotors%205.17%20-%20Inventory%20Equipment.png?alt=media&#x26;token=bc97c368-e967-4fd0-9742-7f783e4b7778" alt=""><figcaption></figcaption></figure>
