How can I add a line under rich text?

Store Design

Topic summary

Goal: add a horizontal separation line to a Shopify Rich text section (sometimes below, sometimes above), not an underline on the text itself.

Context: Store link and multiple screenshots provided; visuals are central to the desired style of the divider.

Proposed solutions:

  • CSS underline on the entire rich text ([data-section-type=“rich-text”] { text-decoration: underline; }) was suggested but does not match the need (it underlines text, not a section divider).
  • Another suggestion to add custom code in theme.liquid was attempted; the requester reported it did not work.
  • Latest update: CSS targeting headings (h2.heading.h1 { border-bottom: 2px solid; padding-bottom: 20px; }) to create a line under the section title was proposed.

Notes:

  • CSS refers to styling code; theme.css and theme.liquid are Shopify theme files where custom styles can be added.
  • It remains unclear if the divider should apply to the entire Rich text block or only its heading, and how to toggle above vs. below per instance.

Status: no confirmation that the latest CSS solves the requirement; discussion appears open with unresolved placement/selector details.

Summarized with AI on January 15. AI used: gpt-5.
4

Hi @tboudier

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

[data-section-type=“rich-text”] {

text-decoration: underline !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly