Appearance and Theme Builder explained
Everything visual about your store lives in one place now. The Theme Builder controls your colours, fonts, header, footer and the actual sections on every page, and it shows you the result as you work. This guide covers what each part does and, more usefully, the order to do things in so you are not fighting the tool.
Where to find it
Open Theme Builder from the sidebar. Two things sit outside it and are worth knowing about up front:
- Your logo and favicon are in Settings, not here.
- The old Customize page is retired. If you have a bookmark to it, it now sends you to the Theme Builder.
How the builder is laid out
Three areas:
The left panel switches between three tabs:
- Pages picks which page you are designing
- Sections lists the blocks on that page, in order
- Global Settings holds colours, fonts, header, footer and the settings that apply everywhere
The centre is a live preview of your store with Desktop, Tablet and Mobile buttons. It updates as you change things.
The top bar has Undo, Redo and Save.
That Save button matters. Your changes are not live for customers until you press it, so you can experiment freely and undo your way back out. Nothing a shopper sees changes while you are still deciding.
Theme presets
The fastest way to a good-looking store. Each preset sets your colours, fonts, layout and page structure in one tap:
| Preset | Built for |
|---|---|
| Default | A clean, balanced, neutral base to build on |
| Volt | Electronics and gadgets, sharp and techy |
| Bloom | Beauty and cosmetics, soft and elegant |
| Fresh | Grocery and daily essentials, clean and fast |
| Haven | Home and furniture, warm and editorial |
| Care | Pharmacy and wellness, calm and trustworthy |
Note: Applying a preset replaces your current layout, and the builder asks you to confirm before it does. Anything you customised by hand is overwritten, so pick your preset first and customise afterwards, not the other way around.
Start with the preset closest to what you sell. Preset first, then colours, then sections, is the order that saves you the most work.
The five pages you can design
| Page | What it is |
|---|---|
| Home Page | Your main landing page |
| Product Page | The detail view for one product |
| Category Page | Products filtered by category |
| Search Page | Search results |
| Checkout Page | The order form and payment |
Every one of them is built from sections, including checkout. That last one is worth knowing about, since small changes to checkout usually move sales more than anything you do to your homepage.
Sections
A section is one horizontal block on a page. Add them, reorder them, change their settings, or delete them.
| Section | Where it belongs | What it does |
|---|---|---|
| Hero Banner | Home | The large opening banner |
| Image Slider | Home | A rotating set of images |
| Product Grid | Home | A block of products you choose |
| Category Showcase | Home | Your categories as visual tiles |
| Banner and Banner Row | Home | Single or side-by-side promo banners |
| Rich Text | Home | Free text, headings and lists |
| Testimonials | Home | Customer quotes |
| Trust Badges | Home, Checkout | Delivery, returns and security reassurance |
| Spacer | Any | Breathing room between sections |
| Product Info | Product | Photos, price, variants, add to cart |
| Product Description | Product | Your full description |
| Related Products | Product | What else to look at |
| Category Header | Category | The category title and intro |
| Category Products | Category | The product listing itself |
| Search Bar and Search Results | Search | Searching and its results |
| Checkout Form | Checkout | Customer details, delivery and payment |
Click any section to open its settings. What appears depends on the section, so a Product Grid asks which products to show and how many columns, while a Hero Banner asks for images, text and a button.
Resist the urge to add everything. A homepage with a banner, a category showcase and two product grids outperforms one with nine sections, because a shopper who has to scroll past six blocks to reach a product usually does not.
Global settings
These apply across your whole storefront.
Store colours
Ten ready-made palettes: Fresh Green, Ocean Blue, Classic Black, Royal Purple, Sunset Orange, Rose Pink, Teal, Crimson Red, Chocolate and Gold on Black. Pick one and every button, link and accent updates together.
If none of them fit your brand, switch on custom colours and set four values yourself: background, text, brand or button, and accent or Buy Now.
A word of advice from watching a lot of stores: the ready-made palettes are tested to stay readable. Hand-picked colours very often are not, and light grey text on white is the most common way a store quietly loses customers who cannot read it comfortably.
Fonts
Bangla fonts include Noto Sans Bengali, Hind Siliguri, Baloo Da 2, Anek Bangla and Tiro Bangla. Latin fonts include Inter, Manrope, DM Sans, Poppins, Nunito, Montserrat and Work Sans, plus display faces like Playfair Display, Lora and Fraunces.
If your storefront is in Bangla, choose a Bangla font. A Latin-only font will fall back to something you did not choose for Bangla text, and the result usually looks slightly wrong without it being obvious why.
Style and layout
- Corner roundness, from sharp corners to fully rounded
- Buttons, their shape and style
- Page width, full width or boxed
- Space between sections
Product card buttons
Controls what appears on each product card in a listing: Add to Cart and Buy Now, Add to Cart only, Buy Now only, or no buttons so the whole card links to the product. You can also reveal the buttons only on hover.
For most Bangladeshi stores, showing Buy Now on the card shortens the path to checkout noticeably. Worth testing against your own numbers.
Discount badge
How the saving is shown on discounted products.
Header
- Style and background, including sticky and transparent options
- Logo position and page width
- Structure, single line or multiline
- Toggles for search, categories and track order
- Logo settings, including maximum width on desktop and mobile separately
Three extras are worth calling out:
Announcement bar is the strip above your header for a message, with an optional link. It is the right place for “Free delivery over 1000 taka” or an Eid deadline. Turn it off when the message is stale, because an out-of-date announcement is worse than none.
Top utility bar adds a thin bar above the header for a phone number and small links.
Header button puts a single call-to-action button in your header with your own text and link.
Footer
The footer is built from blocks, and you choose which ones to include:
| Block | What it shows |
|---|---|
| Store name / brand | Your name or logo |
| Link list (menu) | A column of links |
| Text / about | A short paragraph about your store |
| Image | Any image |
| Social icons | Facebook, Instagram, YouTube, TikTok, WhatsApp, Messenger, X, LinkedIn, Pinterest |
| Contact info | Your phone, email and address |
| Payment methods | The payment options you accept |
| Trust badges | Delivery, returns, secure payment, cash on delivery and similar |
Contact and trust blocks do real work in Bangladesh. A shopper deciding whether a store is genuine looks for a phone number and a returns statement, and finding neither is a reason to leave.
The live preview
The preview is your real storefront rendered with your unsaved changes, not an approximation. Use the Desktop, Tablet and Mobile buttons to check each one.
Check mobile properly, not as an afterthought. The large majority of Bangladeshi shoppers arrive on a phone, so a hero banner with text that only fits on desktop is a problem for most of your traffic. If you only have time to perfect one view, perfect mobile.
A sensible order of work
- Pick a preset that matches what you sell.
- Set colours and fonts to your brand.
- Arrange homepage sections, keeping it short.
- Set up the header, including the announcement bar if you have something to say.
- Build the footer, with contact details and trust badges.
- Check the mobile preview on every page.
- Save.
Doing it in this order means the preset never overwrites your work, since it goes first.
Common questions
| What you notice | Why |
|---|---|
| Your changes are not on the live store | You have not pressed Save yet |
| A preset wiped out your customisations | Presets replace the whole layout. Apply them before customising |
| The Customize page is gone | It is retired, and now redirects to the Theme Builder |
| You cannot find logo or favicon settings | Those live in Settings, not the builder |
| Bangla text looks wrong | You have chosen a Latin-only font. Pick one of the Bangla fonts |
| Text is hard to read | Custom colours with too little contrast. Try a ready-made palette |
| The homepage feels slow to shop | Too many sections before the first product |
In the mobile app
The merchant app has a full native Theme Builder with a live preview of your storefront, so you can change a colour, rearrange sections or edit the announcement bar from your phone and see the result immediately. It is genuinely usable for real work, not just small fixes.
Tips
- Preset first, customisation second. Doing it the other way round means losing your work.
- Keep the homepage short. Every section between the top of the page and a product costs you shoppers.
- Check the mobile preview on every page before saving. Most of your customers are on a phone.
- Use the announcement bar for one clear, current message, and turn it off when it goes stale.
- Put contact details and trust badges in the footer. They convert better than anything decorative.
- Use Undo freely. Nothing you do is live until you press Save.
What’s next
For individual topics in more depth, see customize your store with the Theme Builder, build your homepage, header, footer and menus, and logo and favicon.
Still need help?
Our team is here for you. Reach out and we’ll get you sorted.