🗓️Gereral settings

Navigate to the Settings tab, then proceed to the General section. Here, you can configure general settings to ensure your widget, date, and time are calculated and positioned according to your preferences. This includes your time zone, position, and rules. Follow these instructions carefully to make the most of the app.

Pick your time zone

Pick your time zone. All the calendars shown at your storefront & date-time in the app will adhere to this timezone.

Decide where you want to put the date picker widget

You have the option to choose a theme that suits your needs and preferences for installing your app.

Additionally, you can select whether you want to display your date picker widget on either the cart page only or both the product and cart pages.

Note: If you choose to show date picker widget on your product page, the final delivery date may be changed.

If only 1 product's timing is selected, the final timing will be the chosen one.

If multiple items' timing are selected, the final timing will be selected in the cart page.

You also have the flexibility to make it mandatory for customers to select a date before proceeding to checkout.

Decide if non-working days are included in prep-day

DingDoong defines working days as days available for delivery and shown in the date picker. Non-working days, however, indicate when delivery service isn't available, though you can still prep for later delivery on enabled days. This is distinct from holiday closures.

Typically, non-working days are included in prep time calculations. For example, if you enable Mondays and Wednesdays for delivery and allocate 3 prep days within a 5-day delivery window, an order on August 21st gets 3 prep days from August 21st to 23rd. Available dates in the picker would be August 28th (Mon), August 30th (Wed), September 4th (Mon), September 6th (Wed), and September 11th (Mon).

If your business doesn't require prep or delivery on non-working days and you want to exclude them, check the option. With this active, prep time in the above scenario would span August 21st (Mon), August 23rd (Wed), and August 28th (Mon). Available dates would be August 30th (Wed), September 4th (Mon), September 6th (Wed), September 11th (Mon), and September 13th (Wed).

Decide whether add order's date & time to packing slip

Please check the box if you would like to automatically insert the date and time slot into the Shopify order note. This information will be printed on the packing slip.

Date and time will be automatically inserted into the Shopify note

The packing slip will be printed with the note:

Choose fulfillment method for showing date picker

You can turn on and off their date pickers for each method

For shipping, turning date picker off will simply disable it.

For delivery, turning date picker off will keep postal code validator

For pickup, turning date picker off will keep location list.

This provides merchants with more flexibility.

Enter Google Map API

With DingDoong, you can embed a Google map under the date picker so your customers can find the pickup location faster.

Your pickup locations will be shown on map on your website like this:

All you need is to give the app a Google Maps API key so it can fetch the map upon request.

How to get the API key:

Step 1: Choose or create a new project

1. Go to the Google Cloud Console

2. Click the project drop-down and select or create the project for which you want to add an API key

Step 2: Create an API key

1. Click the menu button and select Google Maps Platform > Credentials

2. On the Credentials page, click + Create Credentials > API key

Step 3: Enable Places API

1. Click the menu button and select APIs

2. On the APIs page, choose Distance Matrix API and enable it

You can use the same API key and enable Distance Matrix API if you also use Delivery conditions feature and want to specify permitted areas for delivery by radius or driving distance.

Identify a starting delivery date with multiple rules

It’s not rare that customers add multiple products to carts, each of which is activated by different date and time rules, hence different date ranges for your customer to pick.

Earliest: When having multiple prep day and delivery range, use the shortest prep day rule and the biggest delivery range

Latest: When having multiple prep day and delivery range, use the longest prep day rule and the smallest delivery range

Let’s say a customer picks 2 products to the cart:

Eg:

Product A: Override rules: prep day 1, delivery range: 3

Product B: Override rules: prep day 2, delivery range: 5

The cart (following the earliest date): prep day 1, delivery range 5

The cart (following the latest date): prep day 2, delivery range 3

Add date and time slots on order confirmation email

Add date and time customers selected to the confirmation email sent to them after successful purchase.

This information will be displayed in the order confirmation email as follows:

How to add date and time slots on order confirmation email

Since Shopify doesn’t allow our app to directly modify the emails you send, you can manually insert the date and time customers selected by following these steps:

Step 1: Copy the following lines of code

{% comment %}Start Omega{% endcomment %}
  <table>
    <tr>
      <td class="customer-info__item">
        <h4>Additional details</h4>
        <p>
          {% for attribute in attributes %}
            {% assign attributeName = attribute | first %}
            {% assign attributeValue = attribute | last %}
            {% if attributeName != 'delivery_date_origin'
                and attributeName != 'ot_channel'
                and  attributeName != 'ot_location_id'
                and  attributeValue != '_' %}
              {{ attribute | first }}: {{ attribute | last }}<br>
            {% endif %}
          {% endfor %}
        </p>
      </td>
    </tr>
  </table>
{% comment %}End Omega{% endcomment %}

Step 2: On Shopify admin, go to Setting/Notifications/Order confirmation/Edit code

Step 3: Find Shipping method (Use Ctrl + F and type “Shipping method”)

Step 4: Under the </tr>, paste the lines of code you just copied

Step 5: Save it. You can preview before saving

Add date and time slots on thank you page

Add date and time customers selected to the confirmation email sent to them after successful purchase.

This information will be displayed on the thank you page as follows:

How to add date and time slots on thank you page

Since Shopify doesn’t allow our app to directly modify the emails you send, you can manually insert the date and time customers selected by following these steps:

Step 1: Copy the following lines of code

{% if order.attributes %}
  <script>
    window.addEventListener("DOMContentLoaded", (event) => {
      document.querySelector(".content-box").insertAdjacentHTML("afterend",
      "<div class='content-box' id='otThankyouPage'></div>");
    });
  </script>
  {% for attribute in order.attributes %}
    {% assign attrName = attribute | first %}
    {% assign attrValue = attribute | last %}
    {% if attrName != 'delivery_date_origin'
        and attrName != 'ot_channel'
        and  attrName != 'ot_location_id'
        and  attrValue != '_' %}
      <script>
        window.addEventListener("DOMContentLoaded", (event) => {
          document.querySelector("#otThankyouPage").insertAdjacentHTML("afterbegin",
          `<div class='content-box__row text-container'>
            <div class='-activeos-step__special-description'>
              <p class='os-step__description'>
                <li><strong>{{ attribute | first }}</strong>: {{ attribute | last }}</li>
              </p>
            </div>
          </div>`);
        });
      </script>
    {% endif %}
  {% endfor %}
{% endif %}

Step 2: On Shopify admin, go to Setting/Checkout

Step 3: Under Order status page, find Additional scripts and paste the lines of code you just copied wherever. Just make sure to not to insert it in between any existing lines of codes

Step 4: Save it. You can preview before saving

Reach out to us via the email [email protected] if you stumble upon something hard to solve. Any messages from you guys are greatly appreciated!