Checkout Extension How can add inline CSS

Shopify Plus

Topic summary

A developer is seeking to add inline CSS styles to a <TextBlock> component in a Shopify checkout extension but has been unsuccessful with various methods.

Key Response:

  • Checkout UI Extensions do not support class names or inline styles directly
  • Styling relies on global branding settings configured in the checkout experience
  • Shopify Plus merchants can customize branding through the Checkout Styling documentation

Alternative Approach:

  • Use layout components like BlockLayout to adjust properties such as:
    • Spacing
    • Rows
    • Borders
    • Color options
  • These components provide various layout and design controls within the extension framework

Additional Resources:

  • Checkout Styling documentation for branding customization
  • Checkout Security & Constraints documentation for CSS limitations

The original poster acknowledged the helpful response. The discussion appears resolved with a clear explanation of the platform’s styling constraints and available alternatives.

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

Hello, hope you are well,

I would like to add inline styles to a <TextBlock> in the checkout extension. I’ve tried several methods, but nothing seems to work. Could you please share your solution?

Return Statement:

  return (
    
    <>
        <TextBlock>
          We have a 45-day return policy, which means you have 30 days after receiving your item to request a return.
        </TextBlock>
        <TextBlock>
          To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase.
        </TextBlock>
       
        <Button onPress={onClose} style={modalStyles.closeButton}>
          Close
        </Button>
        </>

  );

Thank you in advance

2

Hi @storetransform ,

Checkout UI Extensions don’t support the use of class names or inline styles directly. Instead, they rely on the global branding settings predefined in the checkout experience. For Shopify Plus merchants, you can explore how to customize these branding elements through the Checkout Styling documentation.

For additional information on UI components and CSS constraints, you can check out this link: Checkout Security & Constraints.

That said, UI Extensions still provide various layout, spacing, and color options. For example, components like BlockLayout allow you to adjust properties such as spacing, rows, and borders to help achieve the desired design.

Hope this helps!

Best regards,

Robert

3

Thank you for the help @Robert_Kanaan