Last updated: March 2026 Category: Designing Your App

Overview

Every component in the Template Builder includes styling options that let you control its appearance without writing any code. For more advanced customization, each component also provides a Custom CSS field where you can write your own styles. This guide covers the General styling tab, the Custom CSS field, and the design tokens available across the Template Builder.

How to Use

The General Styling Tab

When you select any component in the Phone Preview, the Inspector Panel includes styling options across its tabs. Common styling properties shared by most components include:

Background color — Set the background fill for the component container.
Padding — Control the inner spacing between the component's content and its edges. You can set padding uniformly or per side (top, right, bottom, left).
Margin — Control the outer spacing between the component and its neighbors. Like padding, margins can be set per side.
Border radius — Round the corners of the component container. A value of 0 gives sharp corners, while higher values create rounded or pill shapes.
Border color — Add a visible border around the component.
Border width — Set the border thickness in pixels.
Opacity — Adjust the component's transparency from 0 (invisible) to 1 (fully visible).

[Screenshot: General styling options in the Inspector Panel showing padding, margin, border radius, and color pickers]

The Custom CSS Field

For styling that goes beyond the built-in options, each component has a Custom CSS field:

Select a component in the Phone Preview.
In the Inspector Panel, scroll to the Custom CSS section (typically at the bottom of the Layout or Settings tab).
Write your CSS rules in the text field.

Custom CSS is scoped to the selected component, so your styles will not bleed into other components.

[Screenshot: Custom CSS field in the Inspector Panel with example CSS rules]

Example: Custom CSS for a Products Component

.product-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.product-title {
  font-family: 'Georgia', serif;
  letter-spacing: 0.5px;
}

Design Tokens

BeyondCart provides a set of design tokens — predefined CSS variables — that reflect your app's theme settings. Using these tokens ensures your custom styles stay consistent with your overall brand.

Available design tokens:

--color-primary / --color-secondary — Your brand's primary and accent colors.
--color-background / --color-text / --color-text-secondary — Background and text colors.
--color-border — The default border color.
--font-family — Your app's primary font family.
--font-size-base / --font-size-heading — Base and heading font sizes.
--spacing-sm / --spacing-md / --spacing-lg — Small, medium, and large spacing units.
--border-radius — The default border radius.

Using Design Tokens in Custom CSS

Reference tokens with the var() function:

.my-custom-section {
  background-color: var(--color-primary);
  color: var(--color-background);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  font-family: var(--font-family);
}

This approach ensures that if you update your app's theme colors or fonts, your custom-styled components update automatically.

Key Concepts

Scoped styles — Custom CSS written in a component's CSS field applies only to that component. You don't need to worry about accidentally changing the look of other components.
Specificity — Custom CSS overrides the component's default styles. If a built-in option and a custom CSS rule target the same property, the custom CSS rule wins.
Design tokens vs. hard-coded values — Use design tokens when you want styles to adapt to theme changes. Use hard-coded hex values or pixel sizes when you want a fixed appearance regardless of theme.

Tips

Start with the built-in styling options. They cover most common needs and are easier to manage. Only use Custom CSS when you need something the built-in controls don't offer.
Use design tokens whenever possible to keep your home screen visually consistent with the rest of your app.
Test your Custom CSS in the Phone Preview before saving. Small syntax errors in CSS can cause unexpected results.
Avoid using !important unless absolutely necessary. It makes future style changes harder to manage.
Keep your Custom CSS concise. If you find yourself writing extensive CSS for a component, consider whether the Custom component (raw HTML/CSS) might be a better fit.
Document your custom styles with CSS comments if multiple team members work on your templates. A short note like /* Match the holiday campaign palette */ helps others understand your intent.