How to add..."Order in the next ??? and it will ship today" on product pages?

Shopify Partner
13 0 4

Is there an app that will do this? I want to display text on my product pages to encourage buyers to place an order before our shipping deadline each day. It should allow me to specify times and days of the week and then display that info on the page:

Example:

Order in the next 3 hours and 23 minutes and it will ship today

 

It should display at week days only and the deadline should be 4:00 PM. Is there an app for this or a way to do it with code?

0 Likes
Shopify Staff
Shopify Staff
47 0 5

Hello Matt!

Paul here, from the Guru team.

We have a bunch of great apps that offer this functionality! "Product Discount" and "Countdown" are two popular ones, check out our countdown apps: https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=countdown

You can see there on our app store the reviews and ratings to assist you in choosing one that works great for you! They have free trials so you can test them out to get just the right fit for what you're looking to do. It sounds like you'll want to set up daily timers for weekdays that expire at 4:00pm and you'll be all set! :)

Cheers,

Paul

0 Likes
Shopify Partner
19 0 4

Hi Matt,

Mat here from the Order Deadline app for Shopify (https://apps.shopify.com/order-deadline)

Our app does exactly what you're asking.  We offer great support and functionality. Four totally different styles of timer to choose from in a selection of color schemes, multi language, customer ip detection, location-based timers, custom messaging and more.

You can override setting on a per-product basis, and even hide the timer automatically if the next dispatch date is too far into the future that you'd rather not advertise it.

Looking for a countdown that looks just like Amazon's? We have a style for that.

Unlike many of the apps listed in the link above, we even calculate the next delivery date, and you can optionally display to your customers the next dispatch date, delivery date or both!  We intelligently work out the time remaining to place orders, which in some cases may span a number of days depending on your dispatch schedule.

Better still, you don't even need to edit a single template file. Just install the app and manage everything from within the simple admin panel.

If you have any questions or need further advice, I'm here to help. 

Thanks

Mat

https://apps.shopify.com/order-deadline

0 Likes
Shopify Expert
91 1 6

If you are looking for a simple lightweight solution, you can check out our DeliveryTimer.

Whilst it isnt as complex as Order Deadline, it is suited to simple stores wanting to achieve the popular "Order in the next .... Receive by ....". The message is customisable and you can choose to have just the order by timer or estimated delivery date.

You can hide it on certain products if you dont want the timer to be shown.

If you need any help setting it up or installing it on a custom theme, just let us know.

You can check it out here: https://apps.shopify.com/delivery-timer

Cheers,

Dan

Shopify Expert, Apps & Support - https://www.launchtip.com
0 Likes

Hi there,

It may helpful for many people as a lot of people were asking for this. Please share it with others as well.

Please pardon me for naming conventions in the script. I have edited countdown.js script to achieve Ships today if ordered in next : 035122S on product details page. It works perfectly on Shopify. Time zone is America/NewYork.

Steps i used to make it work.

1- Paste below code in product-template.liquid file at the bottom or before the schema starts.

<script>
(function($){
var date2 = {{ 'now' | date: '%d' }},
year = {{ 'now' | date: '%Y' }},
month = {{ 'now' | date: '%m' }},
day = {{ 'now' | date: '%e' }},
weekDay = {{ 'now' | date: '%u' }},
hours = {
start: new Date(year, month, day),
end: new Date(year, month, day)
};

// weekDay var [0 = sun, 1 = mon, 2 = tues ... 5 = fri 6 = sat]

// If it's Monday - Friday
if(weekDay >= 1 && weekDay <= 5){

// Start at 7am, end at 8pm
hours.start.setHours(9);
hours.end.setHours(15);
// alert("Hey " + weekDay);

// If it's Saturday
} else if(weekDay == 6){

// Start at 8am, end at 8pm
hours.start.setHours(0);
hours.end.setHours(0);
// alert("Hey2 " + weekDay);
// If it's Sunday
} else {

// Start at 9am, end at 6pm
hours.start.setHours(0);
hours.end.setHours(0);
// alert("Hey3 " + weekDay);
}

function countDown(){

var hours2 = {{ 'now' | date: '%H' }};
var minutes2 = {{ 'now' | date: '%M' }};
var seconds2 = {{ 'now' | date: '%S' }};

var countHours = ('0' + (hours.end.getHours() - hours2)).substr(-2);
var countMinutes = ('0' + (59 - minutes2)).substr(-2);
var countSeconds = ('0' + (59 - seconds2)).substr(-2);

// If it's currently not within the hours, don't show the countdown
if(hours2 < hours.start.getHours() || hours2 > hours.end.getHours()){
$('.countdown').hide();
} else if($('.countdown').not(':visible')){
$('.countdown').show();
}

$('.countdown .hours').text(countHours);
$('.countdown .minutes').text(countMinutes);
$('.countdown .seconds').html(countSeconds);

}

$(function(){
setInterval(function(){
countDown();
}, 1000);
});
})(jQuery);
</script>

2- Placed below code in product-template.liquid file where i wanted it to display.

 

<div class="countdown">Ships today if ordered in next: 
<span class="hours"></span>H <span class="minutes"></span>M <span class="seconds"></span>S
</div>

You can change the timing in countdown.js file as per your needs. 0 to 24 hours format. I didn't want the timer to show on Saturday and Sunday in conditions so i put (0) in both start and end timer.

 

I hope it helps.

Thanks

 

 

0 Likes
New Member
1 0 0

I just tried to implement this, but the timer only updates when i refresh the page?

0 Likes
Highlighted
Explorer
68 2 21

Hi Matt, 

 

It may take some going through to find your specific use case, but we to summarize the list of apps that provide the feature you're after:

Order Deadline

Delivery Timer Order Deadline
Order Before Delivery Deadline

Hope this helps!

Best,
Entaice

Want to make your store sell? Try Entaice: Explore
0 Likes