Shopify themes, liquid, logos, and UX
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:
But i want to display like this:
It will be delivered between
11th January to 13th January
Any suggestions Please...
Solved! Go to the solution
This is an accepted solution.
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
Could you please share the store link with us for further checking?
Your code is incorrect, the <p> should be at the end instead
Could you please re-check it from your end?
Hello. Thanks for your suggestion. I made the change but still its appearing same.
Could you please share the link to that page as well? We can't find this setting on your front store.
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.
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>
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
Hello. Thanks for your suggestion. I made the change but still its appearing same.
This is an accepted solution.
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
Try this one.
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;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025