ENবাং

14.2Theme Builder editor

Adding, arranging and filling the blocks of one layout, checking the page, previewing it, publishing it and going back to an earlier version.

Menu:
Theme Builder
Who:
Owner · Manager
Package:
Depends on the package — a lock on the menu means upgrade
Updated:
2026-10-15

Overview

The layout editor is where a page's blocks are arranged and filled in. On a computer, the blocks list is on the left, the shop frame with the block cards is in the middle, and the blocks panel (or the settings of the block you picked) is on the right.

Every change is saved to the draft as soon as you make it. It reaches the shop only when you press Publish.

Adding, changing settings and removing blocks are done on a computer. On a phone you can view the blocks, change their order and publish.

Only Owners and Managers can view this page. The Theme Builder needs a plan that includes it: Pro or Growth.

Screen tour

This page has no screenshot. The numbers below match the parts of the screen, from left to right.

  1. Top bar — on the left, the All pages link and the layout's name, then a status mark: Draft · unsaved or Published. If the layout is live, the Live on your shop mark appears too. On the right: the mobile and desktop frame buttons, Preview, the Saved automatically note, the version history button and Publish.
  2. Blocks on this page (left) — each block's name. A block that needs attention has a warning triangle. Underneath is the note Drag to reorder.
  3. Shop frame (middle) — the block cards. Each card has a drag grip, the block's name and a one-line summary. Pick a card and a small toolbar appears on it: up and down arrows, Duplicate and Remove.
  4. Right-hand panel — when nothing is picked, the blocks panel with Search blocks and groups of block tiles. When a block is picked, its settings.
  5. Checks (lower right) — a summary of the whole page's problems.

Steps

Add a block

Steps

  1. In the blocks panel, type part of a block's name into Search blocks if you want (optional).
  2. Press a tile in one of the groups: Banners & art, Show off products, Content, Push a sale or Structure.
  3. The block is added to the end of the list, and its settings open on the right.
  4. A number on a tile shows how many of that block the page already has, for example "Used 2×".

The blocks shown depend on the page type:

  • Every page: Announcement bar, Image & text, Rich text, FAQ, Image gallery, Trust badges, Video, Footer.
  • Home page: Hero banner, Five banners, Product grid, Product carousel, Spotlight, Voucher strip, Category showcase, Single product, Countdown, Newsletter.
  • Collection page: Hero banner, Five banners, Product grid, Product carousel, Spotlight, Voucher strip, Single product, Countdown, Newsletter.
  • Product page: Product carousel, Countdown.
  • Search results page: Product grid.
  • Cart: Voucher strip.
  • 404 page: Newsletter.

Reorder blocks

Steps

  1. On a computer, hold the grip icon on the left of a card and drag it up or down.
  2. Or pick a block and press its up or down arrow. The arrows also work on a phone.
  3. The list on the left follows the same order. While the new order is being saved, the words Saving… appear.

Edit one block's settings

Steps

  1. Press a block's card in the shop frame, or its name in the list on the left. Its settings open on the right.
  2. Fill in the fields. The field list below explains each kind.
  3. Press Done. The settings are saved and the right-hand panel returns to the blocks list.
  4. To leave without changing anything, press the arrow at the top left of the settings (Back to blocks).
  5. To remove the block, press the bin icon at the top right of the settings.

Fill a five-frame banner

Steps

  1. In The five frames, each frame is labelled "Frame 1", "Frame 2" and so on. Give each one a picture. A frame with no picture does not show.
  2. In a frame's Image box, press Choose a picture. Choose from the Media Center, upload a picture, or paste a picture link.
  3. Under "Where should frame 1 go?", choose a destination: a category, a product, a promo code or a page.
  4. Under each frame, read the state: "Goes to: …", or "No destination set yet".
  5. Press a frame's number to jump to that frame.

Steps

  1. FAQ (Questions & answers): each row has a question and an answer. To add a row, type into the blank row. To remove a row, empty both of its boxes.
  2. Image gallery: press Choose pictures to pick several pictures from the Media Center, or press Add by link. Type a caption under a picture if you want one. Press Remove this picture to take one out.
  3. Voucher strip: press Choose vouchers and pick from your own promo codes. Use the up and down arrows to change their order, and Remove to take one out. Each voucher shows who can use it: public (sign-in needed to use it), signed-in buyers only, or one named buyer.

Remove or duplicate a block

Steps

  1. On a computer, pick a card. Its toolbar appears: the up and down arrows, Duplicate (copy icon) and Remove (bin icon).
  2. Press Duplicate to make a copy of the block.
  3. Press Remove to delete the block at once. There is no confirmation question.

Check the page

Steps

  1. Look at the Checks panel at the lower right.
  2. If it says "All clear — nothing on this page needs a fix", there is nothing to do.
  3. Otherwise it counts blocks that point at something that no longer exists, blocks only partly filled, and blocks with nothing in them yet.
  4. In the list on the left, a block with a warning triangle needs attention. An empty block shows nothing in the shop, which is normal for a block you have just added.

Preview the page

Steps

  1. Press Preview. The shop's page opens in a new tab.
  2. Preview works only for the home page, the cart and the search results page. For the product page, collection page and 404 page, the button is off, with the words "No preview link for this page yet."
  3. Press the phone or desktop frame button to change the width of the frame on the screen. This only changes the frame size. To see the real look of the shop, use Preview.

Publish the layout

Steps

  1. Press Publish at the top right. On a phone, press it on the bar at the bottom.
  2. Until you publish, the page says: "Not published yet — none of these changes are on your shop."
  3. After you publish, the status reads Published. If the layout is live, the Live on your shop mark is there too.

Go back to an earlier version

Steps

  1. At the top right, press the version history button (the clock-like arrow icon).
  2. The list shows each version by a short ID and its number of blocks. It does not show dates.
  3. Press Restore beside the version you want.
  4. If there are no saved versions yet, the list says: "No versions saved yet."

Work on a phone

Steps

  1. On a phone you can view the blocks, change their order with the arrows or by dragging, and publish.
  2. Adding a block, changing settings and removing blocks are not offered on a phone. The page says: "Add a block or change its settings on a larger screen — on your phone you can view, reorder and publish."
  3. To move a block by dragging on a phone, press and hold the grip for a moment, then drag.

Fields

The settings of a block show a box for each of its fields. The common kinds:

Field kind Examples What it does
Text Heading, Subheading, Button text A plain text box.
Rich text Body A text editor.
Image Hero image, Image & text image Choose a picture — from the Media Center, by upload, or by picture link. Remove takes it off.
Switch Show heading, Image on the right, Use the sale's time window On or off. The label beside it shows On or Off.
Number How many to show How many items the block shows.
Date and time Offer ends at Dhaka time (GMT+6). With "Use the sale's time window" on, the flash sale's times are used instead.
Pick list Category, Spotlight, Product A drop-down or a product picker. "Nothing selected" means none is chosen.
Rows Questions & answers, Gallery images, Badges Rows with two boxes each. Add and remove rows.
Vouchers Vouchers Pick, reorder and remove promo codes.
Banner frames Banners Five frames. Each has a picture and a destination.
Video link Video A YouTube or Facebook video link.

Tips and common mistakes

  • A draft is not the shop. Your changes reach buyers only after you press Publish. After a change to a live layout, the page reads Draft again until you publish.
  • A banner frame with no picture does not show. Give it a picture first.
  • The mark "Saved automatically" means every change is already in the draft. There is no separate Save button on this page.
  • The cards are a plain outline, not the real look of the shop. Use Preview to see that.
  • Incomplete blocks can still be published. The checks show them, and the shop does not show them in full.
  • Removing a block has no undo button. If you need the old version back, use the version history.
  • Without the plan, this page shows the same message as the list, and the editor does not open.
  • The blocks panel is on the right. The empty-page message says "from the panel on the left", but the blocks panel is on the right.
  • Theme Builder list — creating, publishing, renaming, duplicating and deleting layouts
  • Themes — preset themes and switching on the Theme Builder