Skip to main content

How the Creala Store Builder Works

A complete walkthrough of Creala's Store Builder, section by section, so you can master it and help guide your customers.

Written by Os Sanchez

The Store Builder (also referred to as the Website Builder) is Creala's tool that lets anyone create their online store in minutes, no code required. This guide walks through how it works, section by section, so you can master it and help guide your customers.

1. What is the Store Builder?

It's a visual editor with a live preview: settings on the left, your site updating in real time on the right. It's purpose-built for selling products online — not a blog or a generic landing page builder. It comes with e-commerce-specific sections out of the box (Marketplace, Product Detail, etc.).

The Store Builder is currently labeled Beta.

2. Creating your first store

When you open the Store Builder section from the main menu:

  • If you don't have any stores yet, you'll see a welcome screen with a + Create my store button.

  • If you already have one or more stores, the list will appear with three actions per store:

    • Visit site: opens your published store in a new tab.

    • Edit My Store: enters the visual editor.

    • Delete: permanently removes the store (this action cannot be undone).

3. The visual editor

Once inside a store, the editor is split into two areas:

Side panel (left)

This is where all editing happens. It has two main tabs:

  • Sections — where you edit the content blocks.

  • Style — where you choose colors and fonts.

Live preview (right)

An iframe that shows exactly how your site will look. It includes:

  • Page selector (top-left): switch between the Home page and the Product Detail page to preview each template.

  • Desktop / Mobile view: two icons in the center to toggle responsive view and confirm everything looks good on any device.

  • Settings (gear icon): opens the SEO and domain modal.

  • Visit site: opens the published version in a new tab.

  • Publish changes: pushes your changes live.

Important: changes are saved automatically as a draft. The preview always shows the draft. The public version only updates when you click Publish changes.

4. Editing sections

The Sections tab lists all editable blocks of the site:

Section

What it controls

Navbar

Brand name and logo (image URL)

Hero

Title, subtitle, button label, and background image

About

Title, body text, and image

Marketplace

Title and subtitle for the product listing

Product Detail

Buy button label, layout (gallery left or top), and show/hide tags

Footer

Tagline, copyright, and social links (Instagram, Facebook, WhatsApp)

Each section has an eye icon to show or hide it from the published site, without deleting the content. This is useful when a customer wants to temporarily turn off, say, the "About" section.

Clicking any section opens the detail panel with its editable fields. The button takes you back to the list.

5. Styling the store

The Style tab offers two global controls applied across the entire store:

Brand palette (Colors)

You can:

  • Pick from 7 preset palettes (rose, amber, lime, emerald, blue, violet, ink).

  • Or customize all 4 colors manually: Primary, Secondary, Background, and Text.

Typography

There are 4 presets that pair a heading font with a body font:

  • Modern: DM Sans + Inter (clean, contemporary)

  • Display: Caprasimo + Inria Sans (expressive)

  • Mono: IBM Plex Mono + Fira Sans (technical)

  • Classic: DM Serif Display + Inter (elegant, editorial)

These changes apply to the entire store instantly. While saving, the controls show a spinner so you know the change is being applied.

6. Site settings (SEO and Domain)

The gear icon opens a modal with two tabs:

Metadata (SEO)

  • Page title: appears in the browser tab and in Google search results.

  • Meta description: the summary search engines display.

  • Social share image URL: the image shown when the link is shared on WhatsApp, Facebook, etc.

Domain

This tab manages two types of address:

a) Free subdomain (assigned automatically)

Every store receives a free address like yourstore.creala.site with no setup required. This is the default address used when you publish.

b) Custom domain (optional)

If your customer already owns a domain (mybusiness.com or shop.mybusiness.com), they can connect it:

  1. Enter the domain and save.

  2. In the domain provider's DNS settings (GoDaddy, Namecheap, etc.), add an A record pointing to the IP 45.79.116.134:

    • For a root domain (mybusiness.com) you need two A records: one with host @ and another with host www.

    • For a subdomain (shop.mybusiness.com) you only need one A record with the corresponding host.

  3. Click Verify DNS.

Until verification succeeds, a yellow Pending verification chip is shown. Once active, it switches to a green Connected chip.

Reminder for customers: DNS propagation can take a few minutes. If verification fails the first time, wait a moment and try again.

7. Publishing changes

The flow is:

  1. Edit → changes are saved automatically as a draft.

  2. Preview → the right-hand view always shows the draft.

  3. Publish changes → the green button promotes the draft to the public site.

When the site is published and there are no pending changes, the button is disabled and reads Published. As soon as you make a new edit, it re-enables.

Did this answer your question?