Last updated: March 2026 Category: Designing Your App
Overview
The Template Builder is your visual design studio for crafting the home screen of your BeyondCart mobile app. With a drag-and-drop interface, you can arrange components, customize styling, and preview your layout in real time — no coding required.
Every template you create defines what your customers see when they open your app. You can build multiple templates, schedule them for specific dates, and swap between them to match promotions, seasons, or campaigns.
How the Template Builder Works
The Template Builder uses a three-column layout designed to keep everything accessible while you design.
[Screenshot: Full Template Builder interface showing the three-column layout]
Component Palette (left column) — Lists all available component types. Drag any component from here into the Phone Preview to add it to your template.
Phone Preview (center column) — A live preview of your app's home screen. Components appear here in the order your customers will see them. You can reorder components by dragging them up or down within the preview.
Inspector Panel (right column) — Displays settings for the currently selected component. The Inspector has three tabs: Content, Layout, and Settings. Each tab gives you control over different aspects of the component.
Available Component Types
BeyondCart provides 12 component types you can mix and match to build your ideal home screen.
Slideshow — A rotating carousel of images with links, auto-play, and navigation dots.
Banners — A grid of banner images arranged in 1 to 3 columns, each with its own link.
Products — Displays products from a Shopify collection, specific picks, most recent, or most wishlisted.
Heading — A large text block for section titles or announcements.
Text — A rich text block with formatting options for descriptions or instructions.
Button — A tappable button that links to any screen or URL via deep links.
Countdown — A timer that counts down to a specific date and time.
Video — Embeds a YouTube or Vimeo video directly in your app.
Testimonials — A carousel of customer reviews with names, ratings, and photos.
Search — A search bar so customers can find products quickly.
Divider — A horizontal line separator to visually break up sections.
Custom — A raw HTML/CSS component for advanced or unique layouts.
How Templates Work
Each template represents a complete home screen layout. Templates have a few key properties:
Name — A descriptive label so you can identify the template in your list.
Start Date — The date and time the template becomes active.
Filter — Optional conditions to target specific customer segments.
isActive — A toggle that controls whether the template is currently live.
Only one template can be active at a time. When you activate a new template, it replaces the current home screen for your customers.
Tips
Start with a Slideshow or Banners component at the top to create a strong visual first impression.
Use the Products component to surface your best sellers or seasonal collections without manual updates.
Preview your template on different screen sizes before publishing to ensure it looks great everywhere.
Name your templates clearly (e.g., "Summer Sale 2026" or "Holiday Homepage") so your team can find them quickly.
Related Articles