Last updated: March 2026 Category: Designing Your App
Overview
The Custom component lets you add raw HTML and CSS directly to your app's home screen. It is designed for advanced use cases where the built-in components don't cover your exact needs. With full control over markup and styling, you can create unique layouts, embed third-party widgets, or build highly customized sections.
How to Use
Adding a Custom Component
Drag the Custom component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.
[Screenshot: Custom component in the Phone Preview with a code editor visible in the Inspector Panel]
Writing HTML and CSS
In the Content tab, you will find a code editor where you can write your HTML and CSS:
Enter your HTML markup in the HTML field. This is the structure of your custom section.
Enter your CSS in the CSS field. These styles are scoped to your custom component and will not affect other components on the page.
The Phone Preview renders your HTML and CSS in real time as you type, so you can see the result immediately.
[Screenshot: Content tab with HTML and CSS fields containing sample code, and the rendered output in the Phone Preview]
Example: Custom Promotional Banner
<div class="promo-section"> <h2 class="promo-title">Free Shipping This Weekend</h2> <p class="promo-subtitle">On all orders over $50</p> </div>
.promo-section {
background: linear-gradient(135deg, #667eea, #764ba2);
padding: 24px 16px;
text-align: center;
border-radius: 12px;
}
.promo-title {
color: #ffffff;
font-size: 22px;
font-weight: 700;
margin: 0 0 8px 0;
}
.promo-subtitle {
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
margin: 0;
}
Common Use Cases
Custom promotional sections — Build announcement bars, gradient banners, or styled callouts that go beyond what the Heading and Text components offer.
Third-party embeds — Add embed codes for tools like review widgets, social media feeds, or interactive elements.
Complex layouts — Create multi-column or asymmetric layouts using CSS flexbox or grid.
Animated elements — Add CSS animations or transitions for attention-grabbing effects.
Styled lists or grids — Build icon grids, feature lists, or trust badges with custom markup.
Settings
Padding — Add spacing around the custom component container.
Margin — Add outer spacing to separate the custom component from surrounding sections.
Background color — Optionally set a container background color. You can also control background via your CSS.
Tips
Keep your HTML simple and semantic. Complex or deeply nested structures can cause rendering inconsistencies across devices.
Always test your custom component on the Phone Preview before publishing. What looks good in a browser may behave differently in a mobile app context.
Use relative units (percentages, em, rem) instead of fixed pixel widths to ensure your custom content adapts to different screen sizes.
Scope your CSS class names specifically (e.g.,
.my-promo-bannerinstead of.banner) to avoid accidental style conflicts with other components.Avoid embedding JavaScript in the Custom component. Only HTML and CSS are supported. For interactive functionality, use the built-in components or contact BeyondCart support.
If you find yourself using the Custom component frequently for the same pattern, reach out to BeyondCart support — it may be a good candidate for a future built-in component.
Related Articles