From your idea to a detailed page design
Twicart Page Builder gives you extensive freedom to bring your design idea to life section by section. Create layouts ranging from a simple introduction page to an image-led homepage, product presentations and multi-column content in the same editor.
Build the layout with sections and columns, add content through components, then complete the details with colours, images, animations and interactions. Ready-made designs, manual editing, AI design and Code mode on Pro plans provide different ways to work. Shape both the appearance and how visitors use the page.
Where can you use it?
Use the same section, column and component approach to design different areas of your store with Page Builder.
Tell your brand’s story on a page, arrange the product presentation on your homepage or create the layout of your footer.
See which areas are created during initial setup in the Twi AI guide.
A showcase for each product, an experience for each category
Every product has a different story to tell. You might present a designer chair with large images, explain a technical product through detailed specifications or introduce a collection with a striking opening section. Twicart Page Builder lets you design product and category pages around these different needs.
| Plan | Product and category page design |
|---|---|
| Basic | Product pages use the theme’s design. Custom product page design is not included in Basic. |
| Standart | Product and category page design is available. Create their appearance with Page Builder. |
| Pro | Create multiple product page designs and multiple category page designs. Assign the designs to products or categories to use different presentations. |
Pro: multiple designs with product and category assignments
With Pro, prepare different product page designs for different products and different category page designs for different categories. Create the design, then assign it to the relevant product or category. Give each part of your catalogue a presentation suited to its content and intended shopping experience.
Create an image-led product page with a brand story for furniture, and another product page highlighting descriptions and specifications for a technical item. For categories, design a visual introduction to a new collection and a more informative presentation for technical products. With Pro, assign these designs to the relevant products and categories.
SEO-focused design: highlight the right content on each page
Design freedom gives you room to present content more deliberately for your SEO work. Use product-specific descriptions, clear headings, specifications and links to relevant pages to make useful product information visible. On category pages, incorporate introductions and content describing the product group into the design.
In Twicart’s SEO-focused approach, page design and SEO fields complement one another. Page Builder controls how content is presented, while product and category management provide descriptions and metadata for those pages. Products also have separate index and follow controls. With Pro’s multiple designs, tailor this content approach to individual products and categories.
Three design modes
Manual: place and edit.
Add sections, columns and components yourself. Move elements with drag-and-drop and adjust them using the editing controls.
AI: describe it and let AI design.
Tell the AI what kind of page you want. Create your design through instructions.
Learn about Quick Touch-up for edits using descriptions and annotations.
Express your design using Twicart’s own coding language. This mode is for users who want to create custom designs through code.
Read the Twicart Code Editor subguide.
Page structure
A page has three building blocks: sections, columns and components. A section defines a page area, columns organise its layout, and components hold the content visitors see.
Add columns inside a section. Columns can contain both components and further columns, letting you create distinct content groups within the same section.
Drag-and-drop and editing
Move sections, columns and components with drag-and-drop. The pen icon at the top of each element opens its editing controls; the delete icon removes the element from the design.
The top bar includes Desktop and the combined Mobile & Tablet view so you can inspect your design across screen layouts. It also lets you choose Manual, Design with AI or Code mode and use Publish when your design is ready.
Learn how live preview works when designing with AI.
Twicart pays particular attention to the shopping experience of visitors on mobile and tablet. The widespread daily use of these devices is an important consideration in Page Builder’s design approach. We focus on helping you create readable content, easy-to-follow layouts and user-friendly pages on mobile and tablet. Review your design in the combined Mobile & Tablet view and shape it around how visitors discover products, read information and use links and actions on the page.
Backgrounds and animations for sections and columns
Backgrounds are not limited to the whole page. Add background colours, background images or animations to individual sections and columns to give each area its own appearance. Open the relevant settings using the pencil icon on the element you want to edit.
| Control | Use in your design |
|---|---|
| Background colour | Highlight a section in your brand colour or visually distinguish a column from surrounding content. |
| Background image | Place an image behind a section or column to set the scene for a campaign, brand story or product presentation. |
| Animation | Add motion to sections and columns to bring your design to life alongside text and images. |
Add two columns to a section. Use a solid background with a heading and description in the first, and a background image to highlight the product in the second. Add animation to the relevant section or column to incorporate motion.
Sticky columns that stay visible while scrolling
You can set columns to sticky. As a visitor scrolls, the selected column can remain visible according to the scrolling behaviour of its layout. This helps keep important information in view alongside longer content.
- Place a short product summary alongside a long description.
- Create a layout that keeps contact or navigation content in view beside a content column.
- Review the sticky column in Desktop and the combined Mobile & Tablet view.
Open a modal from your design
You can open a modal from a Page Builder design. This lets you create interactions that present additional content on the same page. Design the modal content with Page Builder too, so it matches the page’s visual style.
For example, design a modal for additional product information, a contact form or campaign details. Creating the modal content and opening it from the page are two parts of the same experience: prepare the content, then configure the corresponding modal call in your design.
Component library
Choose a component to match your content. Names below follow the labels used in the editor.
Products and categories
Text and basic content
Visual and moving content
Contact and visitor interaction
Additional design components
Ready-made designs with Magic Design and Hero Banner
Page Builder offers more than individual basic elements. Components such as Magic Design and Hero Banner include many ready-made design options. Start with a suitable presentation, then adapt the content and design settings to your brand.
| Control | Use in your design |
|---|---|
| Magic Design | Use ready-made design options for different content presentations. Personalise the selected layout with your own text and images. |
| Hero Banner | Build an eye-catching opening area using ready-made designs. Present your brand message, campaign or product introduction there. |
Ready-made component designs complement section and full-page imports. Choose a component design for one area, or use a ready-made section or page as a larger starting layout.
Ready-made designs and archives
Import a ready-made section or page.
Add ready-made Twicart sections to your page or import an entire ready-made page. The imported design becomes a starting point for your own page.
Archive your own design.
Archive your completed page using the archive area at the bottom of the editor and reuse it later. You do not need to recreate the same layout each time.
Browser-friendly HTML on your website
Designs created in Page Builder are rendered as HTML that browsers can display on your website. Headings, text, images and interactions form the actual page content. The sections, columns and components you arrange in the editor become the web page your visitors see.
This approach combines visual design freedom with the content structure of a web page. Shape your headings, descriptions and links as you design. Complete the product information and SEO fields used on product and category pages in their corresponding management screens.
Explore per-product SEO controls
Example page workflow
Basic steps for creating an About Us page in Manual mode:
- Add a section with two columns.
- Add Heading and Text Area to the first column to tell your brand story.
- Place an image in the other column using the Image component.
- Add background colours, images and any desired animations to sections or columns.
- For longer content, set a suitable column to sticky; prepare and open a modal if additional content is needed.
- Drag elements into position and edit them using the pencil icon. Review Desktop and the combined Mobile & Tablet view.
- Archive the design for reuse. Use Publish when ready.
Frequently asked questions
Can I design without writing code?
Yes. Use drag-and-drop in Manual mode or describe your design in AI mode.
Can I put a column inside another column?
Yes. Columns can contain both components and other columns.
Can I reuse my designs?
Yes. Archive your page from the bottom of the editor for later use. You can also import ready-made sections and pages.
Which plans include Code mode?
Code mode uses Twicart’s own coding language and is available only on Pro plans.
Can I add backgrounds to sections and columns?
Yes. Add background colours, background images and animations to sections and columns.
Where can I find ready-made designs?
Components such as Magic Design and Hero Banner contain ready-made designs. You can also import ready-made sections and full pages.
Can I make columns sticky and open modals?
Yes. Set columns to sticky and open a modal from your design. You can design the modal content with Page Builder too.
How is the design displayed on my website?
Your design is rendered as browser-friendly HTML. The content and layout created in the editor become the web page visitors see.
Can I create multiple product and category page designs?
With Pro, create multiple product page and category page designs and assign them to products or categories.
How does product page design work in Basic and Standart?
Basic uses the theme’s product page design and does not include custom product page design. Standart lets you design product and category pages. Creating multiple designs and assigning them to products and categories is a Pro feature.