How to align collapsible row text to the left

Store Design
, , , , , ,

Topic summary

A user wants to left-align text within collapsible rows on their Shopify product page, which currently appears centered.

Proposed Solution:

  • Navigate to Admin ā†’ Theme ā†’ Customize Code ā†’ assets ā†’ component-rte.css
  • Add CSS rule: .product__accordion .accordion__content.rte p { text-align: left; }

The discussion includes a product URL example (brain-boost.co.uk) using the Dawn theme. The solution involves a straightforward CSS customization to override the default text alignment for accordion content paragraphs.

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

Iā€™d like to align the collapsible row test to the left (rather than being central).

Any advice is really appreciated.

URL: https://www.brain-boost.co.uk/products/chocolate-powder

Theme: Dawn

BraxtonEcom_0-1698100563445.png
BraxtonEcom_0-1698100563445.png3048Ɨ1608 333 KB

1 Like
2

Hi,

To solved, you can change the style for it by go to:

Admin ā†’ Theme ā†’ Customize Code ā†’ assets ā†’ component-rte.css

And then add the code to this file:

.product__accordion .accordion__content.rte p{
   text-align: left;
}