AI Layout Builder

Author: Jade Abit 999 views

AI Layout Builder is a feature in EComposer that helps you build high-quality page layouts faster and more efficiently. It can generate content structure, text, and layout ideas directly inside the editor, helping streamline the page-building process and improve SEO readiness.

Each time you generate content, AI Layout Builder creates a single layout only. After generation, you still need to manually customize the layout, such as selecting product lists, uploading brand images, adjusting content, and fine-tuning design details to match your store’s needs.

You can explore this feature by clicking the AI logo at the bottom left of the Editor page here:

Then, please follow the steps below to create your page/section by using this feature:

Step 1: Tell Us What You Need

You’ll see a prompt box where you can describe the page or section you want to generate (up to 1000 characters).
Prompt example: Generate an elegant homepage for a luxury fashion brand, ChicAura. The design should be minimalist with a focus on vivid, high-resolution visuals.
The layout must maintain good spacing and be responsive. Ensure there is padding between the image and the product slider.

Step 2: Tweak the Layout

AI will generate a fully structured page in seconds – no coding or design skills needed. The page includes multiple sections that you can also tweak them individually.

You can click the (+) icon if you want to generate more AI sections and then add them to the page.

Move the position of sections by drag-drop blue dots up and down.

Magic Wand icon is for editing a specific section with the AI command, and the Trash Can icon represents the “Delete” section function.

Update prompt: Describe what you want to change on this page.

Step 3: Pick your style

Each section allows you to switch between different designs. Feel free to browse and apply different design styles until you find one that best fits your brand.

After reviewing all sections of your AI page completely, you click Start building now to go ahead to edit the page content.

Insert under the current layout in the editor: Adding AI sections at the bottom of the page.
Keep the default template’s typography: Continue using the typography of these AI sections.

Step 4: Final Touch & Edit

Some AI sections are generated on your page and immediately connected to your store data.
You can continue using our drag-and-drop editor to adjust the design, personalize content, and fine-tune the layout in real-time.

AI tokens (used/ limit): Every time you write an input, it deducts a certain number of tokens. You should pay attention to your token limit to write prompts properly. For more details on the token calculation, please refer to this guide.

Each subscription plan includes a specific monthly limit of AI tokens, so you can also buy more AI layout tokens when you run out to keep creating.