Shopify themes, liquid, logos, and UX
Dear,
I want to change the text allignment on the head image banner on my homepage.
Can you help me with that?
Thank you
Kind regards, Christina
Solved! Go to the solution
This is an accepted solution.
If you want to left align only the text on your image banner, go to section-image-banner.css and change this:
Please share your store URL.
hello @Christinahadi
your store is password protected can you please share your shop preview URL
Done
Hello!
I would like it to be alligned to the left.
Is this possible?
Thanks!
hello @Christinahadi
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
#shopify-section-hero-1 .page-width.text-center{
position: absolute;
left: 0%;
top: 50%;
transform: translate(0%, -50%);
}
Hello
Thx for your tip!
Unfortunately, it did not change things yet..
Am I missing something?
Thank you!
try this
How to centre your headings on Dawn theme — Shopify 2.0 tutorials
All you need to do to center your headings on Dawn (and any theme that is Shopify 2.0) is:
Identify the problem
OK now go to your Shopify back end and edit your theme code:
Press control f and search for h1 then add
text-align: center;
And we’re done
Thanks!
You currently have the debut theme online, not the dawn theme. If you'd like to have the dawn theme customized instead, please put it live so we can check the code.
To align the banner text to the left on the debut theme:@Christinahadi, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.hero__inner *{
text-align: left;
}
.hero .mega-subtitle{
margin-left: 0 !important;
}
Kind regards,
Diego
Hi Diego,
Ah thanks so much for an aha-moment!
I've put the DAWN theme live, so you should be able to see it now.
If you could be so kind to give me the code to align the text to the left, i'm sure it'll work perfectly.
Thanks!
Christina
go to base.css
text-align: left;
If you look at my original post there's a video on where to write it exactly
Once finished if it works please accept the answer with my video on it as an accepted solution in order to allow more people to find it
Hamish
Income stream surfer on Youtube
Hi,
This did not solve my problem unfortunately.
Is there anyone that can help me aligning the text on the top image banner on the homepage TO THE LEFT (DAWN theme)?
Thanks!
Do you mean this image? If not please take a screenshot of which you mean
Yes, it's about that image indeed!
Thanks!
Greetings
Christina
@Christinahadi,
You're welcome.
Kindly make sure to click on the button "Accept as Solution" below whichever answer solved your problem.
This way people with similar issues can also benefit from this in the future.
Kind regards,
Diego
If i'm not mistaken, this issue has not been resolved yet?
The text is not aligned to the left, and i have tried to paste the codes as proposed, but nothing changed.
Can someone still help me out please?
Thanks
sorry I was busy yesterday
Change where it says text-align and write left in place of center
Please make the post with my video on it the accepted solution
Hamish
Thanks, it aligned the text indeed to the left.
But how can i align the text like this example? I have to also change the width and the position?
Thank you
Try to make the text larger
This is an accepted solution.
If you want to left align only the text on your image banner, go to section-image-banner.css and change this:
Thanks for the help!
It was in fact a combination of:
- aligning the text to the left
- enlarge the size (as per your example) to 7rem
- also enlarge the max-width from 51rem to 90rem
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024