Template developers: Development Guide

Rules and workflow for template developers: UI-only changes, repo setup, and what you are allowed to edit.

UI-only rules (must follow)

You are working on a template inside the Web Builder system. You cannot change core code. Your job is UI only:

• Update markup, styling, spacing, and responsive behavior.
• Rearrange and position existing fields/components.
• Adjust copy and visuals based on Figma.

You must not:

• Add or remove pages, sections, or core modules.
• Change routing, data flow, queries, or configuration schemas.
• Modify section type mapping, usePage, renderSections, or CMS contracts.

Scope: Treat the core as a platform. Change presentation only.

---

Create your own repo and push a template

Use this flow to create a new repo for a template derived from a boilerplate.

1. Clone the boilerplate

git clone [email protected]:erxes-web-templates/template-boilerplate.git

2. Create a new empty repo in https://github.com/orgs/erxes-web-templates. Do not initialize with a README.

3. Point your local repo at the new remote

git remote -v
git remote set-url origin [email protected]:erxes-web-templates/your-template.git

4. Push the template

git push -u origin main

---

What you can change

Pages (UI only)

You can update the UI inside existing page files. Common pages include:

• app/products/page.tsx (only ecommerce and hotel)
• app/products/[id]/product.tsx (only ecommerce and hotel)
• app/blog/page.tsx
• app/blog/[id]/page.tsx
• app/checkout/page.tsx
• app/payment/page.tsx
• app/profile/page.tsx and app/profile/_components/
• app/auth/login/ and app/auth/register/
• app/inquiry/page.tsx (only tour)
• app/custom/page.tsx
• app/legal/page.tsx

Do not change routing or how pages load sections.

---

Sections and fields (UI only)

You can update existing section components inside app/_components/sections/. Below is the approved list and the fields each section typically exposes. Keep the data shape intact and adjust UI only.

---

Hero Section

A visually prominent section typically placed at the top of a page to grab user attention.

Fields:

• Background Image: A high-quality image or graphic for the background.
• Title: The main headline text.
• Content: Additional descriptive text or tagline.
• Primary Click-To-Action Button: The main actionable button (e.g., "Get Started").
• Secondary Click-To-Action Button: An optional secondary button (e.g., "Learn More").

---

Banner Section

A compact promotional block with a focused message and CTA.

Fields:

• Background Image: The banner background or texture.
• Title: The main banner headline.
• Content: Supporting text.
• Click-To-Action Button: Primary CTA.

---

Carousel Section

A rotating set of slides for featured content.

Fields:

• Title: The heading of the section.
• Slides: A list of slides with image, title, content, and CTA.
• Auto Play: Whether the carousel auto-advances.

---

About Section

A short intro about the brand or business.

Fields:

• Title: The heading of the section.
• Content: Description or story text.
• Image: Featured image.
• Click-To-Action Button: Optional CTA.

---

Gallery Section

Showcases a collection of images in an attractive format.

Fields:

• Title: The heading of the section.
• Description: Text to provide context or details.
• Images: A gallery of images.

---

Youtube Section

Displays an embedded video with supporting information.

Fields:

• Title: The heading of the section.
• Description: Text to provide context or introduce the video.
• YouTube Video URL: The URL of the embedded YouTube video.

---

Text Section

A simple section for displaying text content.

Fields:

• Title: The heading of the section.
• Content: Main body text.
• Click-To-Action Button: An actionable button.

---

Form Section

Provides an input form for collecting user data.

Fields:

• Title: The heading of the form section.
• Description: Text to explain the form's purpose.
• Form Inputs: Input fields for user interaction.

---

Contact Section

Enables users to get in touch or view contact details.

Fields:

• Title: The heading of the section.
• Description: Additional information about contact options.
• Contact Form: A form to collect inquiries or messages.
• Google Map: Embedded map showing the business location.
• Address: Physical address details.
• Socials: Links to social media profiles.
• Email: Email address for contact.
• Phone: Phone number for contact.

---

Products Section (only ecommerce and hotel)

Displays a list of products.

Fields:

• Title: The heading of the section.
• Description: Supporting text.
• Products: A grid or list of products.
• Read More Button: CTA linking to products or details.

---

Product Categories Section (only ecommerce and hotel)

Shows product categories for browsing.

Fields:

• Title: The heading of the section.
• Description: Supporting text.
• Categories: A list or grid of categories.

---

Last Viewed Products Section (only ecommerce and hotel)

Personalized section showing recently viewed items.

Fields:

• Title: The heading of the section.
• Description: Supporting text.
• Products: A list of recently viewed products.

---

Tours Section (only tour)

Highlights available tours with descriptive details.

Fields:

• Title: The heading of the section.
• Description: A brief overview of available tours.
• Tours: A list or grid showcasing tours.
• Read More Button: A button linking to detailed tour information.

---

Tour Details

Each tour in the list can display the following fields:

• Name: The name of the tour.
• Ref Number: A unique reference number for the tour.
• Group Code: A code representing the tour group.
• Content: A detailed description of the tour.
• Duration: The length of the tour.
• Location: The destination(s) covered in the tour.
• Guides: Information about the tour guides.
• Start Date: When the tour begins.
• End Date: When the tour ends.
• Group Size: The maximum number of participants.
• Status: Current status of the tour (e.g., available, fully booked).
• Cost: The price of the tour.
• Created Date: The date the tour was created or added.
• View Count: The number of times the tour has been viewed.
• Join Percent: The percentage of spots filled.
• Infos: Additional key details about the tour.
• Thumbnail Image: A featured image for the tour.
• Images: A gallery of images showcasing the tour.
• Itinerary: A detailed day-by-day plan of the tour.

---

CMS Posts Section

Displays a selection of posts retrieved from the CMS.

Fields:

• Title: The heading of the section.
• Description: Text introducing the posts.
• Posts: A grid or list of posts retrieved from the CMS.
• Read More Button: A button linking to the full list or post details.

---

Post Details

Each post in the list can display the following fields:

• Type: The type of post (e.g., blog, news, announcement).
• Author: The creator of the post.
• Title: The title of the post.
• Content: The full content of the post.
• Excerpt: A brief summary or snippet of the content.
• Post Reactions: User reactions or engagement metrics (e.g., likes, shares).
• Thumbnail Image: A featured image for the post.
• Images: Additional images related to the post.
• Video URL: A URL linking to an embedded video.
• Documents: Files or documents attached to the post.
• Attachments: Any additional files linked to the post.
• Video: An embedded or uploaded video.
• Created Date: The date the post was published.
• Categories: The categories assigned to the post.
• Tags: Tags associated with the post for better classification.
• Custom Fields: Any additional custom fields specific to the post.

---

Template-specific focus

• Ecommerce templates: Developers change product-related pages and sections only.
• Tour templates: Developers change tour-related pages and sections only.
• Hotel templates: Developers change hotel-related pages and sections only.

Keep all non-related pages/sections untouched unless explicitly requested.

---

Layout (UI only)

You can update the global shell and chrome:

• app/_components/Header.tsx and Header.client.tsx
• app/_components/Footer.tsx and Footer.client.tsx
• app/globals.css (base styles only)

Do not change how theme values, menus, or metadata are loaded.

Edit this page