# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stock-counter.jediapps.com/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.