> For the complete documentation index, see [llms.txt](https://docs.stock-counter.jediapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stock-counter.jediapps.com/getting-started.md).

# 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="/files/8ryYxBUKIkBrN85jCwam" 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="/files/FgC7p3qtZEHww8NbYn7b" 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="/files/5N0MNsDIQcM8ztriNpLT" 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="/files/z5dI0Gpdgu2LikUXpNKT" 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="/files/b36PRUWwCtwXY4Br66pU" alt=""><figcaption><p>Click on Save</p></figcaption></figure>
{% endstep %}
{% endstepper %}