Size in text not working in post purchase

[cerz01]

Hi, I’m trying to change the size of the text I use inside the post purchase extension, from the documentation it tells me that a numeric value is fine, but when I apply it I don’t notice any changes, is there a bug or am I doing something wrong? I’m attaching the code

@cerz01

import {
  extend,
  render,
  TextContainer,
  Text,
  useExtensionInput,
} from "@shopify/post-purchase-ui-extensions-react";

<TextContainer>
            <Text size={30} emphasized>
              {title}
            </Text>
          </TextContainer>

I checked via inspect and I note that the default size is applied to the character

[pere01]

@cerz01 Got it Thanks for sharing your code. I see exactly why the text size isn’t changing in your Shopify Post Purchase Extension.

---

The Issue

In @shopify/post-purchase-ui-extensions-react, the <Text /> component doesn’t accept arbitrary pixel values (like 30). The size prop only supports semantic tokens ('small' | 'base' | 'medium' | 'large' | 'extraLarge'). That’s why your size={30} is ignored, and the default is applied.

From Shopify’s docs:

<Text size="large">Hello</Text>

---

How to Fix

Instead of size={30}, use one of the supported values:

<TextContainer>
  <Text size="extraLarge" emphasized>
    {title}
  </Text>
</TextContainer>

Supported sizes (mapped internally to Shopify design tokens):

• "small"

• "base" (default)

• "medium"

• "large"

• "extraLarge"

---

Important Note

You can’t use raw px values (e.g., 30) because the extension runs in Shopify’s controlled environment (post-purchase checkout), where only Shopify’s design tokens are allowed. This ensures visual consistency across themes.

---

If you really need bigger text than extraLarge, you’d have to wrap your text in a Box and apply Shopify’s design tokens for typography, but raw CSS is blocked in this extension context.

[pere01]

@cerz01 You can outreach me anytime