Your storefront is often the first interaction customers have with your brand. Adding visual sections like a homepage banner, informative pages like an About page, or functional sections like a Contact form helps you communicate clearly, build trust, and guide customers toward action.
Commerce Cloud’s theme builder makes this easy by letting you add and manage these sections visually—without writing any code.
Before You Begin
Before you can design custom sections like a homepage banner, About page, or Contact form in the Theme Builder, you must first create the page in Commerce Cloud.
Step 1: Create a New Page
- From the Commerce Cloud left navigation, go to Sales Channels > Your Store > Pages
- Click Add New Page.
- On the Create Page screen, fill the required fields.
- Click Save.
Once saved, you will see a confirmation that the page has been created successfully.
Page Field Overview
Section | Field Name | Description |
|---|
Page Details | Title | Enter the name of your page (for example, About Us, Contact Us, or Returns Policy). |
| Content Editor | Add basic text or placeholder content. This acts as fallback content; the final layout and structure are typically built in the Theme Builder. |
Page Settings | Page Status | Set this to Active so the page can be selected and displayed on your storefront. |
| Page Template | Select the default Page template unless you are using a custom page template. |
SEO Settings (Required) | SEO Title | The title shown in search engine results. It should clearly describe the page and include relevant keywords. |
| Meta Description | A short summary used by search engines to understand the page content and display it in search results. |
| URL Handle | Mandatory. Defines the page URL. Use simple, readable text such as about-us or contact-us. |
Step 2 — Design the Page in the Theme Builder
Once you have created a page, you can move move to adding visual elements and designing how your page will look on the store front.
Once the page exists, you design how it looks using your theme.. This is where you visually control how your content appears on the storefront.
1. Open Themes for the same Sales Channel
- Go to Themes
- Locate the theme you want to work on (Choose Active theme to use current Store design)
2. Open the Theme Builder
Understanding Pages in the Theme Builder
The Theme Builder allows you to design different pages of your storefront visually. At the top of the builder, you’ll see a page selector dropdown. This control is important because it determines which page you are currently editing.
Each page on your website has its own layout, content, and purpose. The page selector helps you switch between these pages so you can customize them individually without affecting others.
Common pages include:
- Home
- About
- Contact
- Collection pages
- Product pages
- Blog pages
Best practice: Always make sure to the correct page before you add sections or edit content. Otherwise, you might build on the wrong page.
Page Structure and Content Hierarchy
Before you start designing, it helps to understand how content is structured inside the Theme Builder. Pages in Commerce Cloud follow a clear, layered hierarchy that keeps layouts flexible, consistent, and easy to manage.
Every page is built in this order:
Page → Sections → Elements (Blocks)
1️⃣ Page – The Canvas
A page is the overall container for your content.
Examples include:
- Home
- About Us
- Contact Us
- Product page
- Collection page
When you select a page from the dropdown at the top of the Theme Builder, you are choosing which canvas you are working on.
Pages do not contain design by themselves — they hold sections.
2️⃣ Sections – The Layout Building Blocks
A section defines a major layout area on a page.
Think of sections as rows or content zones stacked vertically from top to bottom.
Examples of sections:
- Image Banner
- Text + Image
- Featured Collection
- Contact Form
- Multi-column layout
Key points about sections:
- A page can have multiple sections
- Sections are added top to bottom, drag the section to move up/down in sequence.
- Each section controls layout-level settings, such as:
- Width and height
- Background color or image
- Spacing and alignment
You must add a section before you can add or edit content.
3️⃣ Elements (Blocks) – The Content Inside Sections
Elements, also called blocks, live inside sections.
They hold the actual content your customers see and interact with.
Common elements include:
- Headings
- Paragraph text
- Images
- Buttons
- Forms
- Product or collection references
How elements work:
- Elements cannot exist on their own — they must belong to a section
- Each element has its own settings (text, links, fonts, colors)
- Editing an element updates only that specific piece of content
Step 3: Create or Update an About Page
The About page helps customers understand who you are and why they should trust your brand.
Steps to Edit the About Page
- Select About from the page dropdown
- Click Add Section
- Each category contains pre-designed section layouts. You can rearrange sequence of sections/blocks by dragging them in the Layers panel.
When you click on a category (for example, Multicolumn):
- A new panel opens showing available Multicolumn layouts
- Each layout includes a visual preview so you can see how it will look on the page
- Review the structure (number of columns, image placement, text blocks)
Example use cases for Multicolumn sections:
- Our Story / Founders / Values
- Brand pillars
- Company highlights
Once you find a layout that fits your content:
- Click the layout to insert it into the page
Step 4: What Gets Added to the Page
After inserting a section:
- The section appears in the Layers panel on the left
- It becomes part of the page structure
- Inside the section, you’ll see elements such as:
- Headings
- Paragraphs
- Info cards
- Buttons or images (depending on layout)
At this stage, you can:
- Update text directly
- Replace placeholder headings (e.g., “Our Story”, “Founders”, “Values”)
- Adjust layout and styling using the section settings panel
Tip: Write in a conversational tone—customers want to know why your brand exists, not internal company details.
Step 5: Save and Publish Your Changes
- Save: Stores your changes without making them live
- Publish: Makes your changes visible to customers
Common Issue: If you don’t see changes on the live site, make sure you’ve clicked Publish, not just Save.
