How do I fully justify text for all Shopify blog posts and / or entire Shopify site?

Ideally, we would like all of our text on the site to be fully justified (clean edges on both sides). However, the codes I’m able to find in the forum related to this topic are from more than a year ago and the best one only justified a single paragraph of a specific blog post.

With a couple of lines of CSS, we’ve been able to justify everything on our WordPress site. It would be great to find a similar solution for our Shopify site.

Is there code we can use to justify all of the text on our site?

If not, is there at least a way to justify all of our blog post text (not being able to do that is what prompted this entire goose chase!). It seems odd that the ability to justify text is offered here in the forum with a simple button click, but not for blog posts or site body text. :confused:

We’re currently using Dawn 14.0.0 and are open to moving to other themes if Dawn is the actual problem here.

If examples are needed:

Left-aligned text: Looks just like this and what you normally see around the internet. This includes many blogs, web pages, social media posts, and the like. The left side of the text is aligned so that, if you were to put a ruler or other straight edge to the left of the text block, nothing would be obscured or cut off. However, on the right side, each paragraph would have “ragged” edges. This is created by each line having a slightly different length based on how many words are on that particular line.

Right-aligned text: Looks like the mirror opposite of left-aligned text. All of the words leave a crisp, straight edge on the righthand side of the post or paragraph. But then this leaves the left side ragged because of the varying lengths of each of the lines included in that paragraph. The same “ragged” edge is there, it just makes its home on the opposite side. Often used for attributing quotes to a specific source (celebrity, politician, etc.).

Center-aligned text: Places everything in the center of whatever writing space is being used (a digital page, an enclosed text box, etc.). It’s more often used for poetry, song lyrics, or headings than large blocks of text. In this case, both sides of each paragraph would appear “ragged” with there being no straight edge available since everything is being aligned toward the middle.

☼ (What we want!) Justified text: Provides a clean, straight edge along both sides of each paragraph. The exception would be the final line of each paragraph since the last line won’t necessarily be as long as the other lines in the paragraph. In this case, the last line is often left-aligned though some software / settings may try to simply spread the remaining short line across the same amount of space as the line before it, which can look odd and be difficult to read.

Any help is appreciated. Thanks!

Hey @WUShop

If you want to justify your entire website text, then you may try this code although it’s a bit risky code so you can try and if anything goes wrong then you can revert the changes.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

2 Likes

Yay! Thank you so much! I’ve tried that code before, but I think where the instructions said to place it may have been the problem. This worked perfectly for the text all over the site, including the blog posts. Thank you, thank you, thank you! :heart::heart::heart:

1 Like

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.