Align text on product page

Shopify Discussion
1

How can i align the text (title, price, variant, product description and collapsable text) to the left and not center?

changjojo_1-1748722721070.png
changjojo_1-1748722721070.png925Ă—753 127 KB

2

  1. In the “Product information” section look for the “Product description” block then the “Alignment” setting.

  2. Switch the alignment setting from center to left by selecting the option on the left.

001.png
001.png802Ă—856 119 KB

3

changjojo_0-1748755691975.png
changjojo_0-1748755691975.png388Ă—866 37.6 KB

changjojo_1-1748755714021.png
changjojo_1-1748755714021.png411Ă—868 38.7 KB

I dont have this option on my product information page. Where else can i look for it?

4

What theme are you using?

5

Hello @changjojo To left-align the text elements (title, price, variant selectors, product description, collapsible content, etc.) on your Shopify product page, you’ll need to modify the CSS in your theme.

Here’s how to do it:

Option 1: Use Shopify Theme Editor (for minor adjustments)
If your theme allows custom CSS in the theme editor:

  1. Go to Online Store > Themes.

  2. Click Customize on your active theme.

  3. In the left panel, look for Theme settings > Custom CSS or Additional CSS.

  4. Paste the following CSS:

.product__info-wrapper,
.product__title,
.product__price,
.product__description,
.product-form,
.product__accordion,
.product__media-wrapper {
    text-align: left !important;
    align-items: flex-start !important;
}

Option 2: Edit the CSS in theme files (more control)

  1. Go to Online Store > Themes.

  2. Click Actions > Edit code.

  3. Open your CSS or SCSS file (commonly found under Assets and named something like base.css, theme.css, styles.css, or main.css).

  4. Scroll to the bottom and add:

/* Left-align product text elements */
.product__info-wrapper,
.product__title,
.product__price,
.product__description,
.product-form,
.product__accordion {
    text-align: left !important;
    align-items: flex-start !important;
}

You may need to inspect the exact class names using your browser’s Developer Tools (F12) if your theme uses different ones.

Thank you :blush: