# Getting Started!

***

## 🗂️ <mark style="color:blue;">Overview</mark>

***

Get started with the **Jedi - Stock Counter** app! Quickly display a stock counter widget on the product page whenever needed to prioritize transparent communication with your customers regarding product availability!

***

## 📄<mark style="color:blue;">Introduction</mark>

***

Failing to display a stock counter on the products page can lead to customer frustration, missed sales opportunities, increased inquiries, negative user experience, decreased trust, inventory management challenges and damage to the brand's reputation.&#x20;

In order to overcome these difficulties, we have developed an app which displays a stock counter widget on the products page as and when required, so that merchants can now prioritize transparent communication about products availability by displaying stock counter widget, which can provide a positive shopping experience and helps in maintaining customer satisfaction.

***

## 📌 <mark style="color:blue;">How To Get Started?</mark>

This section guides you through the essential steps to efficiently display the stock counter widget on your product page.

{% hint style="success" %}
All the images in this section can be enlarged by clicking on them
{% endhint %}

***

### 📂 <mark style="color:blue;">Step 1: Configure Widget Design And Display Rules</mark>

***

{% stepper %}
{% step %}
Get started by clicking on the **Edit Settings** option of the default widget or add an alternate widget. Upon clicking, you will be taken to the **Widget Design And Display Rules** section.

<figure><img src="https://3161421442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwb8PEiGiO5ymBdO4Re8h%2Fuploads%2F9anRDoShHKaWvo6g628l%2F1.png?alt=media&#x26;token=0f931549-308a-4c81-ba15-9c504fa5c543" alt=""><figcaption><p>Edit Settings</p></figcaption></figure>
{% endstep %}

{% step %}
Now, configure the design and display rules of the stock counter widget based on the requirements of your store.
{% endstep %}

{% step %}
Once you are satisfied with the widget's design and display rules, click on the **Save** button to proceed to the next steps.

<figure><img src="https://3161421442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwb8PEiGiO5ymBdO4Re8h%2Fuploads%2F1U78FXgSclcnrfyDgv8n%2F2.png?alt=media&#x26;token=506fe280-c886-4a44-8da2-7481b285b1a1" alt=""><figcaption><p>Widget Design &#x26; Display Rules</p></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Please note that the Design and Display Rules of the stock counter widget vary based on your subscription plan
{% endhint %}

***

### 🗃️ <mark style="color:blue;">Step 2: Enable And Add The Widget On Store's Active Theme</mark>

***

{% stepper %}
{% step %}
Next, you just need to enable the stock counter widget you have created.

<figure><img src="https://3161421442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwb8PEiGiO5ymBdO4Re8h%2Fuploads%2FFRFcDYyLrwPNgg6EBCwh%2FUntitled%20design.png?alt=media&#x26;token=b8538876-2d94-429e-b1a6-f19da0b4e60e" alt=""><figcaption><p>Enable the widget</p></figcaption></figure>
{% endstep %}

{% step %}
Now, simply navigate to your **Shopify Theme Editor** and open the **Default Product** page. In the left-side navigation panel, click on **Add block** within the **Product information** section.&#x20;
{% endstep %}

{% step %}
After that, select the Jedi - Stock Counter app and simply drag and drop it to your preferred location on the page for seamless integration.

<figure><img src="https://3161421442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwb8PEiGiO5ymBdO4Re8h%2Fuploads%2FYfVowKjW2gr1f5vPtIB0%2F4.png?alt=media&#x26;token=e83c9753-e603-4de6-8993-8e1cfc5ba5a0" alt=""><figcaption><p>Add Stock Counter Widget on product page</p></figcaption></figure>
{% endstep %}

{% step %}
Finally, click **Save** in the Theme Editor to ensure all your changes are applied successfully

<figure><img src="https://3161421442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwb8PEiGiO5ymBdO4Re8h%2Fuploads%2FkNDQFCn5hROVRS4R5933%2F5.png?alt=media&#x26;token=f3455399-f56b-4fc3-8860-c401ef1c6644" alt=""><figcaption><p>Click on Save</p></figcaption></figure>
{% endstep %}
{% endstepper %}