# Custom Theming

Apply a branded theme across product, cart, and checkout components using `customTheme`.

## Example (NPM)

```javascript
import { Elements } from '@liquidcommerce/elements-sdk';

const client = await Elements('YOUR_API_KEY', {
  env: 'production',
  customTheme: {
    global: {
      theme: {
        primaryColor: '#1f4f91',
        accentColor: '#f39c12',
        defaultTextColor: '#1c1c1c',
        buttonCornerRadius: '10px',
        cardCornerRadius: '14px',
        headingFont: {
          name: 'Poppins',
          weights: [400, 600, 700]
        },
        paragraphFont: {
          name: 'Inter',
          weights: [400, 500]
        }
      },
      layout: {
        allowPromoCodes: true,
        inputFieldStyle: 'outlined',
        showPoweredBy: false
      }
    },
    product: {
      layout: {
        addToCartButtonText: 'Add to Bag',
        fulfillmentDisplay: 'popup',
        showOnlyMainImage: true
      }
    },
    cart: {
      layout: {
        drawerHeaderText: 'Your Cart',
        goToCheckoutButtonText: 'Checkout Now'
      }
    },
    checkout: {
      layout: {
        placeOrderButtonText: 'Place Order',
        exitUrl: 'https://yoursite.com/shop'
      }
    }
  }
});
```

> If you use custom fonts, make sure the font is available on the page.

## Related Docs

- [Theming Guide](../guides/theming.md)
- [Configuration Reference](../api/configuration.md)