Change font size for collapsible row content

Store Design
,

Topic summary

A user seeks to modify the font size of collapsible row content (excluding headings) on their Shopify store using the Dawn theme.

Two solutions provided:

Solution 1 (Nobbel):

  • Navigate to: Shopify Admin → Online Store → Themes → Actions → Edit code
  • Open Assets → base.css or component-accordion.css
  • Add CSS targeting .accordion__content with custom font-size (e.g., 16px) and optional line-height
  • Save and preview, adjusting values as needed

Solution 2 (Bang_T):

  • Add CSS to Theme settings → Custom CSS
  • Targets .product__accordion elements specifically
  • Uses Dawn’s CSS variables (--font-heading-scale) for both <h4> and <p> tags within accordion content

Both approaches use custom CSS since Dawn doesn’t offer built-in settings for collapsible content font sizing. The discussion remains open with no confirmation from the original poster on which solution was implemented.

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

Hello, i would like to change the font size for my collapsible row content (content, not headings)

Screenshot 2025-08-15 at 18.15.40
Screenshot 2025-08-15 at 18.15.40957×899 80.4 KB

my store is www.antico-abito.com , theme is dawn

1 Like
2

Hi @ads18922

I understand — you want to change the font size for the content inside your collapsible rows on your Dawn theme (not the headings). By default, Dawn doesn’t provide a setting for this in the theme editor, but you can fix it with a small CSS tweak.

Here’s how:

  1. Go to Shopify Admin → Online Store → Themes → Actions → Edit code.

  2. Open Assets → base.css (or component-accordion.css in newer versions).

  3. Add this at the bottom of the file:

/* Change font size for collapsible content */
.accordion__content {
    font-size: 16px; /* adjust as needed */
    line-height: 1.6; /* optional for readability */
}
  1. Click Save and preview your store. Adjust the 16px value until it looks right.

Tip: You can also add color or font-family inside the same CSS block if you want to style the text further.

I Hope it’s HELP

Best

Nobbel

3

Hello @ads18922

Please add this code to Theme settings > Custom CSS

.product__accordion .metafield-rich_text_field h4,
product__accordion .accordion__content.rte h4{
    font-size: calc(var(--font-heading-scale) * 1.2rem);
}
.product__accordion .metafield-rich_text_field p{
    font-size: calc(var(--font-heading-scale) * 1.2rem);
}