Need Coding Help for a custom delivery estimate

Store Design
, , , , , ,

Topic summary

A user seeks help creating a custom delivery estimate timeline display on their Shopify store to avoid paying for a subscription app. The desired design shows three stages: “Ordered” (current day), “Order Ready” (following 3 days), and “Delivered” (10-20 days from today).

Initial Solutions Provided:

  • Two community members (Asad-Mahmood and DaisyVo) offered HTML/CSS code snippets using custom liquid sections
  • DaisyVo’s solution appears to closely match the reference image, with proper mobile responsiveness

Implementation:

  • Code should be added via Shopify Admin > Online Store > Theme > Customize > Custom Liquid section
  • The solution uses flexbox layout with icons, labels, and dynamic date calculations via JavaScript

Current Status:

  • User is satisfied with DaisyVo’s implementation
  • Minor enhancement requested: adding shadow effects for a more professional appearance and centering the logo
  • Discussion remains open for these final styling adjustments
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

IMG_7882.jpeg
IMG_7882.jpeg400×304 14.1 KB

I would like it to look exactly as shown in the picture ordered (The day we are in) order ready(The following 3 days) delivered (10 to 20 days from today) please help me find the code to make it exactly as the picture as I don’t want to use the app and pay a monthly subscription

2

Add a custom code section there and paste this below code there


    

        

        

        Ordered

    

    
        

        

        Order Ready

    

    
        

        

        Delivered

AsadMahmood_0-1735076321961.png

3

IMG_7887.jpeg
IMG_7887.jpeg1170×960 55.2 KB

Thank you so much for the reply, anyway to make it more identical to my app for mobile?

4

please share your store url
and reference store url

1 Like
5

Lexxyy.com thank you again

https://lexxyy.com/products/choso-piercing-blood-vintage-oversize-t-shirt

6

your store url ?

7

https://lexxyy.com/products/choso-piercing-blood-vintage-oversize-t-shirt
(Where it shows the delivery estimation)

http://ee3dc1-3.myshopify.com

8

If there is anything I can do to help please let me know

9

Hi @leoking

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Add Customer Liquid https://prnt.sc/3o0vZFefK98r
  2. Add this code in the Custom Liquid part

    

        

        Ordered

        

    

    
        

        

        Order Ready

        

    

    
        

        

        Delivered

Here is the result:

image_360.png
image_360.png278×360 14.1 KB

image_720.png
image_720.png720×437 45.1 KB

I hope this helps

Best,

Daisy

1 Like
10

You just made my Christmas gift thank you so much! I hope I’m not being greedy but will it be possible to give a shadow type reflection so it can give a more professional look and make the logo to the center, if not i am 100% fine with this thank you so much