How to setup Shipping Timer?
What is the Shipping Timer?
The Shipping Timer displays a real-time countdown to your cutoff time for same-day processing, automatically calculating delivery date ranges. Perfect for creating urgency and setting clear shipping expectations with a modern glassmorphism design and animated truck icon.
Step 1: Create Metafield Definitions
Creation Instructions
- Go to Shopify Admin → Settings → Metafields → Products
- Click "Add definition"
- Create each metafield with the specifications below
- Set appropriate types and validation rules
- Add helpful descriptions
Required Metafields (5 total)
Step 2: Set Metafield Values
How to Set Values
- Navigate to Products → Select Product → Metafields section
- Configure each field according to your shipping policy
- Set realistic cutoff times and processing windows
- Save product
Example Configuration
- Timer Enabled: ✓ (checked)
- Cutoff Hours: 14 (2 PM)
- Cutoff Minutes: 30 (2:30 PM)
- Processing Days: 2 (2 business days)
- Delivery Window: 5 (delivery within 5 days)
Common Cutoff Time Examples
- Morning Cutoff: 10:00 AM (Hours: 10, Minutes: 0)
- Afternoon Cutoff: 2:30 PM (Hours: 14, Minutes: 30)
- Evening Cutoff: 6:00 PM (Hours: 18, Minutes: 0)
- Late Night: 11:59 PM (Hours: 23, Minutes: 59)
Key Features
Usage Notes
- Real-time countdown to cutoff time
- Automatically calculates delivery date ranges
- Glassmorphism design with animated truck icon
- Responsive layout for all devices
- Resets daily at cutoff time
- Ordinal date formatting (1st, 2nd, 3rd, etc.)
- Falls back to block settings if metafields are empty
- Mobile responsive design
- Works with any Shopify theme
Timer Logic
The shipping timer intelligently calculates:
- Time Remaining: Countdown to daily cutoff time
- Processing Days: Business days needed for order preparation
- Delivery Window: Expected delivery timeframe
- Date Formatting: Displays dates with proper ordinals (21st, 22nd, 23rd)
Visual Guide: Setting Up Metafields
Step-by-Step Screenshots
Here's exactly how the metafields look when you're setting them up in Shopify:
Product Metafields View: This shows how the shipping timer metafields appear in your product's metafields section. You can see the boolean toggle for enabling the timer, number fields for cutoff times, and processing configuration.
Creating Boolean Metafield: This screenshot shows the metafield definition setup for the timer enabled field. Note the "Boolean" type and the namespace "custom.jhango_shipping_timer_enabled".
Creating Number Metafield: This shows the setup for number metafields with validation rules. The cutoff hours field includes min/max validation (0-23) and a helpful description.
Frequently Asked Questions
A shipping timer is a dynamic countdown element that displays the time remaining until your daily cutoff for same-day processing. It helps create urgency, sets clear shipping expectations, and can improve conversion rates by encouraging customers to order before the deadline.
No coding experience is required for basic implementation. The tutorial guides you through creating metafields using Shopify's admin interface and setting values for each product. However, adding the snippet to your theme templates may require basic HTML knowledge or developer assistance.
Yes, absolutely! Each product can have unique shipping timer settings. You can set different cutoff times, processing days, and delivery windows through each product's metafields section. This allows you to accommodate products with different processing requirements.
Yes, the shipping timer automatically resets each day at your specified cutoff time. If a customer visits after the cutoff, they'll see the countdown for the next business day's cutoff, ensuring accurate delivery expectations.
If metafield values aren't set for a specific product, the shipping timer will fall back to the default settings configured in the block settings. This ensures consistent functionality across your store while allowing for product-specific customization when needed.
