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

# Onboarding

{% hint style="success" %}
Do you know? Businesses using delivery date pickers report a **15–20% reduction in cart abandonment**, as customers no longer face the friction of uncertain delivery timelines
{% endhint %}

{% hint style="warning" %}
DingDoong uses embedding approach to display date picker on your site 
{% endhint %}

{% stepper %}
{% step %}

### Choose theme to embed DingDoong app 

{% hint style="warning" %}
For Shopify's beginners, **embedding app** is integrating an app directly into the Shopify admin dashboard, allowing merchants to access and use the app's features seamlessly within the Shopify interface without leaving
{% endhint %}

<figure><img src="/files/kcPHUVhj0qO6EUPsuIz2" alt=""><figcaption><p>Choose theme to integrate </p></figcaption></figure>

You need to choose theme you want DingDoong appear here. For the one who dont want to test before live, you can try DingDoong in test theme. [How to create a test theme?](/how-to-create-a-test-theme.md)
{% endstep %}

{% step %}

### Click Embed > Turn on app > Save

<figure><img src="/files/DOQsLSdMBRfNDlBxZyRq" alt=""><figcaption></figcaption></figure>

Clicking **"Embed app" and make sure to save it**

{% hint style="success" %}
By default, date picker position will display on cart page (This is the most recommended position).

However if you want date picker to appear on only Product page, you can change in Widget position
{% endhint %}

<figure><img src="/files/EE4BgqFHrv5TPOtti2sw" alt=""><figcaption></figcaption></figure>

If you want to display on Both positions, please Contact us&#x20;
{% endstep %}
{% endstepper %}