I got it to work on only the subscriptions page and mostly properly formatted with the following.
Huge thanks to @pfaffman and @NateDhaliwal for providing the clues necessary for this complete solution to my needs.
Note: This works for my needs, but it’s very hacky.
- Go to Admin
- Go to themes and components
- Choose components tab
- Choose “install”
- Select “new” from options
- Paste in the css (below)
- Alter CSS to meet your needs
- Save
- Enable it (if it isn’t already) and make sure it’s enabled for your specific theme(s) (“include this component on these themes”).
Tip: Need help fine tuning the CSS? Consult an AI model like Gemini, Claude… feed it the CSS and tell it what you want to do.
/* PART 1: The Header (Styled like a native H1) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
content: "This is the Headline";
display: block;
/* Styling to match 'title-wrapper' headers */
font-family: var(--heading-font-family);
font-size: var(--font-up-5);
font-weight: bold;
line-height: var(--line-height-small);
color: #DDDDDD;
/* Space between this header and the text below it */
margin-bottom: 8px;
}
/* PART 2: The Body Text (With spacing below it) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
content: "This is the plain text that goes below the header. \A You can still use backslash-A for new lines here.";
display: block;
/* Styling to match standard body text */
font-family: var(--font-family);
font-size: var(--font-0);
line-height: var(--line-height-medium);
color: #DDDDDD;
white-space: pre-wrap;
/* This creates the empty space (carriage return) below your text */
margin-bottom: 40px;
}
