How to customize your app with the theme builder
Semblor's drag & drop theme builder lets you design your mobile app's home screen without writing any code. You can add, remove, and reorder sections — and see every change instantly in the live phone preview on the right.
The builder has three parts:
- Section list (left panel) — add, remove, and reorder your sections.
- Live preview (right panel) — real-time phone preview of your home screen.
- Section editor — customize the properties of the selected section.
Opening the builder
After installing Semblor from the Shopify App Store and entering your app name, you land directly in the builder. Your Shopify products and collections are automatically synced in the background.
Design sections
Below is a detailed explanation of every section you can add to your home screen.
1. Header
Logo · Store name · Search bar · Cart icon with item count
The top bar of your app. Displays your store logo, app name, a search icon, and a cart icon with item count badge. The header style adapts to your chosen theme automatically.
- Upload your logo (circular or rectangular depending on theme)
- Set your app/store name displayed in the header
2. Announcement Bar
Customizable background color, text color, and promo message.
A thin scrolling strip at the top of the screen, perfect for promotions and shipping notices (e.g. "Free shipping on orders above $49").
- Customizable background color
- Customizable text color
- Custom promotional message text
3. Banner / Hero
delivered
The main visual section of your home screen. Supports three display types:
- Single — one full-width image with optional title, subtitle, and CTA button.
- Carousel — multiple slides that auto-scroll, each with its own image, text, and CTA.
- Big Hero — a tall, immersive banner for maximum visual impact.
Each slide supports: title, subtitle, image URL, CTA button text, and CTA link. Height can be set to Small, Medium, or Large.
4. Collections
Displays your Shopify collections as browsable category buttons. Auto-populated from your synced collections.
- Horizontal scroll — swipeable row of categories.
- 2-column grid — two-column layout for a more visual browse experience.
- Per-category: custom title, background color, and image.
- Section title is customizable.
5. Product Grid
Shows a curated grid of products from your Shopify store. Auto-populated from your synced products.
- Choose 2 or 3 column layout
- Set how many products to show (6–9)
- Toggle price visibility
- Toggle wishlist heart icons
- Out-of-stock badges shown automatically
- Customizable section title (e.g. "Featured Products")
6. Flash Sale
A high-urgency section with a countdown timer and a horizontal scroll of sale products. Great for limited-time offers.
- Customizable section title (e.g. "🔥 Today Only")
- Custom badge text displayed on products
- Countdown timer (HH:MM:SS)
- Red gradient background for visual urgency
7. Spacer
Adds visual breathing room between sections. Set the height in pixels to control spacing between any two sections.
Customizing brand colors & logo
In the builder's style settings, you can set:
- Primary color — used for header background and key UI elements.
- Secondary color — used for CTA buttons and accents.
- Logo — upload your store logo (shown in the header).
These settings apply globally across the entire app.
Reordering sections
Drag any section up or down in the section list to reorder it. The live preview updates instantly.
Saving your design
Click Save in the top bar after making changes. Your design is saved immediately and reflected in your app the next time customers open it.