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

[Jayesh-Agarwal]

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:

It will be delivered between to

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

This is how it is displaying:

But i want to display like this:

It will be delivered between

11th January to 13th January

Any suggestions Please…

[DaisyVo]

Hi @Jayesh-Agarwal

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

[TheUntechnickle]

Hey @Jayesh-Agarwal ,

This should work:

It will be delivered between  **to** 

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

[DaisyVo]

Hi @Jayesh-Agarwal

Your code is incorrect, the

should be at the end instead

Could you please re-check it from your end?

[Jayesh-Agarwal]

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

[Jayesh-Agarwal]

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

[DaisyVo]

@Jayesh-Agarwal

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

[LizHoang]

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:

I hope it helps.

Liz

[DaisyVo]

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;
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Jayesh-Agarwal]

Hello The result is still same.

Store url - www.jagstore.in

[Made4uo-Ribe]

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:
• 

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

[AaronMoss]

Hello! I would like to do the same on my site. May I ask where in the product page you placed this code?