Re: Display Estimated Delivery Date in 2 lines shopify (Dawn Theme)

Solved

Display Estimated Delivery Date in 2 lines shopify (Dawn Theme)

Jayesh-Agarwal
Shopify Partner
39 0 7

Hello

I have added below code to show estimated delivery date on my product page. But it is divided in 4 lines. Whereas i want to show it in 2 lines.

Code which i added:

<p>
<center>It will be delivered between <strong><span id="fromDate"></span> to <span id="toDate"></span></strong></p></center>
{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
<script>
var fromDate = Date.today().addDays(5);
var toDate = Date.today().addDays(7);
document.getElementById('fromDate').innerHTML = fromDate.toString('dS MMMM');
document.getElementById('toDate').innerHTML = toDate.toString('dS MMMM');
</script>

 

This is how it is displaying:

Screenshot_20250106-105112.jpg

But i want to display like this:

It will be delivered between

11th January to 13th January

Any suggestions Please...

 

 

Accepted Solution (1)

LizHoang
Shopify Partner
948 114 148

This is an accepted solution.

Hi @Jayesh-Agarwal 

 

You follow this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

 

 

.accordion__content center {
    text-align: left;
}

.accordion__content strong {
    display: flex;
}

 

here is the result: 

 

LizHoang_0-1736147197460.png

 

I hope it helps. 

 

Liz

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

View solution in original post

Replies 10 (10)

DaisyVo
Shopify Partner
3791 412 499

Hi @Jayesh-Agarwal 

 

Could you please share the store link with us for further checking? 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
DaisyVo
Shopify Partner
3791 412 499

Hi @Jayesh-Agarwal 

 

Your code is incorrect, the <p> should be at the end instead 

Screenshot_1.png

 

Could you please re-check it from your end? 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Jayesh-Agarwal
Shopify Partner
39 0 7

Hello. Thanks for your suggestion. I made the change but still its appearing same.

DaisyVo
Shopify Partner
3791 412 499

@Jayesh-Agarwal 

 

Could you please share the link to that page as well? We can't find this setting on your front store.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
DaisyVo
Shopify Partner
3791 412 499

Hi @Jayesh-Agarwal 

 

I hope you are well. You can follow our instructions below:


1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

 

Here is the code for Step 3:

 

 

div.accordion__content center strong {
    display: flex !important;
}
div.accordion__content center {
    text-align: left !important;
}
div.accordion__content center strong > span {
    padding-left: 0 !important;
}

 

 

image (28).png


Please let me know if it works. Thank you!

 

Best,
Daisy - Avada Support Team.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

TheUntechnickle
Shopify Partner
290 29 86

Hey @Jayesh-Agarwal,

This should work: 

 

<p>
<center>It will be delivered between <strong><span id="fromDate"></span> to <span id="toDate"></span></strong></center>
</p>
<script>
var fromDate = Date.today().addDays(5);
var toDate = Date.today().addDays(7);
document.getElementById('fromDate').innerHTML = fromDate.toString('dS MMMM');
document.getElementById('toDate').innerHTML = toDate.toString('dS MMMM');
</script>

 

 

  1. Removed the line break between the dates by putting them on the same line
  2. Kept the "to" on the same line instead of having it on a separate line

The dates will still be calculated and displayed the same way, just in a more compact format. You'll still need the datejs library reference as you had before:

 

 

{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}

 

 

 

Cheers!
Shubham | Untechnickle

Helping for free: hello@untechnickle.com


Don't forget to say thanks, it'll make my day - just send me an email! 


Get Revize for Free | Let your shoppers edit orders post-purchase | #1 Order Editing + Upsell App

Jayesh-Agarwal
Shopify Partner
39 0 7

Hello. Thanks for your suggestion. I made the change but still its appearing same.

Jayesh-Agarwal
Shopify Partner
39 0 7

Hello The result is still same.

Store url - www.jagstore.in

LizHoang
Shopify Partner
948 114 148

This is an accepted solution.

Hi @Jayesh-Agarwal 

 

You follow this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

 

 

.accordion__content center {
    text-align: left;
}

.accordion__content strong {
    display: flex;
}

 

here is the result: 

 

LizHoang_0-1736147197460.png

 

I hope it helps. 

 

Liz

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

Made4uo-Ribe
Shopify Partner
9876 2353 2951

Hi @Jayesh-Agarwal 

Try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

div#ProductAccordion-collapsible-row-1-template--18090623664286__main center {
    display: flex !important;
    flex-direction: column;
    text-align: left;
}

div#ProductAccordion-collapsible-row-1-template--18090623664286__main center strong {
    display: flex !important;
    justify-content: left;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1736166008814.png

     

 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.