Last updated: March 2026 Category: Designing Your App
Overview
Creating a new template is the first step to designing your app's home screen. This guide walks you through the full process — from naming your template to adding components, configuring their content, and saving your work.
Step-by-Step Guide
Step 1: Open the Template Builder
Navigate to Designing Your App → Template Builder in the BeyondCart dashboard. You will see a list of your existing templates, if any.
[Screenshot: Template Builder list page with the "Create Template" button highlighted]
Step 2: Create a New Template
Click the Create Template button in the top-right corner. The Template Builder editor opens with an empty phone preview in the center.
Step 3: Set Template Details
Before adding components, configure the template's basic settings:
Name — Enter a descriptive name (e.g., "Spring Collection Launch"). This is for your internal reference only and is not shown to customers.
Start Date — Optionally set a future date and time when this template should go live.
Filter — Optionally assign a customer filter if you want this template to appear only for specific segments.
isActive — Leave this off while you're building. Toggle it on when you're ready to publish.
[Screenshot: Template settings panel showing name, start date, filter, and isActive fields]
Step 4: Add Components
Browse the Component Palette on the left side of the screen. To add a component:
Find the component type you want (e.g., Slideshow, Products, Button).
Drag it from the palette into the Phone Preview area in the center.
Drop it at the position where you want it to appear.
The component appears in the preview immediately. You can add as many components as you need.
[Screenshot: Dragging a Slideshow component from the palette into the phone preview]
Step 5: Configure Each Component
Click on any component in the Phone Preview to select it. The Inspector Panel on the right displays its settings, organized into tabs:
Content — Set the component's text, images, links, or data source.
Layout — Adjust spacing, alignment, columns, and sizing.
Settings — Control behavior options like auto-play, visibility, and animations.
Fill in the required fields for each component. For image-based components, use the Media Library picker to upload or select images.
[Screenshot: Inspector Panel showing the Content tab for a Slideshow component]
Step 6: Arrange Your Layout
Reorder components by dragging them up or down within the Phone Preview. Place your most impactful content — like a hero slideshow or promotional banner — at the top.
Step 7: Preview and Save
Review your layout in the Phone Preview. When you are satisfied:
Click the Save button to store your template as a draft.
When you are ready to make it live, toggle the isActive switch to on.
Your template is now saved and can be activated at any time.
Tips
Build your template in stages. Save frequently so you don't lose work.
Start with a rough layout of all your components, then go back and fine-tune the content and styling for each one.
If you're preparing a template for an upcoming event, set the Start Date in advance and toggle isActive on — the template will automatically go live at the scheduled time.
Duplicate an existing template if you want to create a variation without starting from scratch.
Related Articles