Enable date and time on Thank you / Order status page

There are 2 ways to add selected date and time on Order Status page / Thank you page

Via Bird App
Via Shopify Admin

Via Bird App ( Easy way )

Navigate to our App's Settings -> Enable (Date / Time on thank you page).


RESULT

Via Shopify Admin ( Advanced way )

Navigate to Shopify settings -> Checkout -> Additional Scripts (Scroll down to the bottom of the page to find it).

Add Custom Content

Copy & Paste this script in additional script section shown above, to add additional information like (Order Instructions, Pickup Location) etc.

<script>
    {% if first_time_accessed %}
    setTimeout(() => location.reload(), 3000);
    {% endif %}

    // Capture Details from shopify
    {% if checkout.order %}
        {% assign attributes = checkout.order.attributes %}
    {% else %}
        {% assign attributes = checkout.attributes %}
    {% endif %}

    // Render this layout on thankyou page
    const BirdRenderLayout = (information) => {

        let deliveryMethod = resolveMethod(information.useShopifyMethod);

        /************** CHANGE HTML HERE TO MODIFY LAYOUT *******************/
        Shopify.Checkout.OrderStatus.addContentBox(
            '<h2> Your Preferences </h2>',
            `
            <style> .lh-2 { line-height : 1.5em; margin-top : 0.4em; } </style>

            <div class='section__content'>
                <div class='section__content__column section__content__column--half'>` + 
                    (information.deliveryMethod ? `<h3 class='heading-3'> Selected Method </h3> <p class='lh-2'> ${deliveryMethod} </p>` : '') + 
                    (information.deliveryDate ? `{% if order.attributes['Delivery Date'] != '' %} <br/> <h3 class='heading-3'> Selected Date </h3> <p class='lh-2'> {{ order.attributes['Delivery Date'] }} </p> {% endif %}` : ``) + 
                    (information.deliveryTime ? `{% if order.attributes['Delivery Time'] !='' %} <br/> <h3> Selected Time </h3> <p class='lh-2'> {{ order.attributes['Delivery Time'] }} </p>{% endif %}` : ``) + 
            `   </div>

                <div class='section__content__column section__content__column--half'>` + 
                    (information.pickupLocation ? `{% if order.attributes['Delivery Location'] %} <h3> Pickup Location </h3> <p class='lh-2'> {{ order.attributes['Delivery Location'] }} </p> </br>{% endif %}` : ``) + 
                    (information.orderInstructions ? `<h3 class='heading-3'> Order Instructions </h3> <p class='lh-2'> {% if order.note == nil %} <b>Reload Page to see</b> (if provided) {% else %} {{ order.note | newline_to_br}} </p> {% endif %}` : ``) + 
            `   </div>
            </div>
            `
        );
    }

    // To use delivery method selected from Shopify or from our app
    const resolveMethod = (useShopifyMethod = false) => {
        if(!useShopifyMethod) return `{{ order.attributes['Delivery Method'] }}`;
        return (Shopify.checkout && !Shopify.checkout['shipping_address'] && !Shopify.checkout['shipping_rate']) ? 'Pickup in store' : 'Local Delivery';
    }

    const BirdShow = (details) => setTimeout(BirdRenderLayout, 2000, details);

    /**************** CHANGE BELOW HERE : SET TRUE TO SHOW OR FALSE TO HIDE INFROMATION *******************/
    BirdShow({
        deliveryMethod : true,
        deliveryDate : true,
        deliveryTime : true,
        pickupLocation : true,
        orderInstructions : false,
    });

</script>

Optional: Look for the below code in script and set the value of information to true, to include it in the result, otherwise false!

BirdShow({
  deliveryMethod : true,
  deliveryDate : true,
  deliveryTime : true,
  pickupLocation : true,
  orderInstructions : true,
});

Updated on: 04/09/2024