Left justify all product description text

Store Design
, , , ,

Topic summary

A user needed help left-aligning all text in product descriptions on their Shopify store using the Dawn theme. Some text appeared centered while other portions were left-aligned.

Root Cause Identified:
The mixed alignment stemmed from inline CSS styles applied directly in the product description content at the backend, which overrode external CSS rules.

Solutions Provided:

  • Remove inline styles from product descriptions and apply new CSS rules
  • Add CSS to theme.liquid file above the </body> tag (code snippet provided with visual result)
  • Modify section-main-product.css by adding a rule targeting .product__description.rte.quick-add-hidden * with text-align: left !important;
  • Edit base.css to include left-alignment rules for .product__info-container and .col-md-12.descr classes

Resolution:
The issue was successfully resolved. The user confirmed one of the solutions worked and thanked the community.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Could somebody help please, on my website I need all text to be left justified on the product descriptions.

For example, on this page (https://ultimateliving.co.nz/products/atrium-wood-round-copy) some text is center and some is left. I want everything left justified, including hyperlinks, all heading styles and paragraph styles.

I’ve tried to add code to the base.css and other files but nothing has worked.

The theme is Dawn.

2 Likes
2

Hello @ultimateliving , It comes from the content that you put in product description at back-end side. It comes from the inline CSS that’s why the CSS that you put in your CSS file is not worked. So remove the inline styles from it and apply your new CSS. See the screenshot below.

dws_pvt_ltd_0-1738312377950.png
dws_pvt_ltd_0-1738312377950.png1847×928 270 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

3

Hey @ultimateliving

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

RESULT:

Moeed_0-1738312583297.png
Moeed_0-1738312583297.png1285×900 121 KB

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

Best Regards,
Moeed

4

@ultimateliving

  1. Go to Online Store

  2. Edit Code

  3. Find assets/section-main-product.css

  4. Add the following code in the bottom of the file .

.product__description.rte.quick-add-hidden * {
    text-align: left !important;
}

Thanks!

5

Hello @ultimateliving ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.product__info-container.product__column-sticky,.col-md-12.descr {
    text-align: left !important;
}

ZestardTech_0-1738326363586.png
ZestardTech_0-1738326363586.png1882×650 114 KB

Let me know if you need further assistance!

6

Thank you sooo much!

1 Like
7

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.