Skip to Content
FeaturesTheme Editor

Theme Editor

Overview

The Theme Editor is Siyahfy’s visual customization tool that lets vendors personalize their storefront without writing code. It provides a drag-and-drop interface for rearranging sections, a live preview that shows changes in real time, and controls for colors, fonts, images, and layout options. The editor works with whatever theme is installed from the Theme Marketplace, reading the theme’s section schema to generate the appropriate settings UI.

How It Works

Section Schema System

Each theme section defines its own schema using JSDoc annotations in the React component code. The Theme Editor reads these schemas to dynamically generate settings forms. For example, a Hero Banner section might expose settings for:

  • Heading text
  • Subtitle text
  • Background image
  • Button text and link
  • Color scheme
  • Layout (left-aligned, centered, full-width)

Configuration Storage

Theme configurations are stored as JSON in the database. Each page (home, product, collection, etc.) has its own ordered list of sections with their settings. When the vendor publishes, this configuration is served to the storefront renderer.

The Theme Editor also includes a menu builder for creating navigation menus (header nav, footer nav, mobile nav). Each menu item can link to a page, collection, product, blog, or external URL.

Key API Endpoints

Storefront Data (Public)

GET/api/storefront/resolve-domain

Resolve a custom domain to a store slug

GET/api/storefront/:store_slug/theme

Get the active theme configuration for rendering the storefront

GET/api/storefront/:store_slug/menus

Get all navigation menus for the storefront

GET/api/storefront/:store_slug/menus/:handle

Get a specific menu by handle (e.g., header, footer)

GET/api/storefront/:store_slug/pages

Get all published pages for the storefront

GET/api/storefront/:store_slug/pages/:slug

Get a single page by slug

GET/api/storefront/:store_slug/policies

Get store policies (privacy, terms, refund, shipping)

GET/api/storefront/:store_slug/media-items

Get media library items for the storefront

Theme Editor Configuration

GET/api/theme-editor/configAuth Required

Load the current theme editor configuration (all pages, sections, settings)

PUT/api/theme-editor/configAuth Required

Save the full theme editor configuration

PATCH/api/theme-editor/config/sectionAuth Required

Update a single section's settings within a page

POST/api/theme-editor/config/sectionAuth Required

Add a new section to a page

DELETE/api/theme-editor/config/sectionAuth Required

Remove a section from a page

PUT/api/theme-editor/global-settingsAuth Required

Update global theme settings (colors, fonts, logo, favicon)

PUT/api/theme-editor/renameAuth Required

Rename the active theme configuration

Publishing & History

POST/api/theme-editor/publishAuth Required

Publish the current editor configuration to make it live

GET/api/theme-editor/historyAuth Required

Get version history of published configurations

GET/api/theme-editor/history/:idAuth Required

Get a specific historical version of the configuration

GET/api/theme-editor/menusAuth Required

List all navigation menus

GET/api/theme-editor/menus/:idAuth Required

Get a specific menu with its items

POST/api/theme-editor/menusAuth Required

Create a new navigation menu

PUT/api/theme-editor/menus/:idAuth Required

Update an existing menu and its items

DELETE/api/theme-editor/menus/:idAuth Required

Delete a navigation menu

Image Management

POST/api/theme-editor/upload-imageAuth Required

Upload an image for use in theme sections

DELETE/api/theme-editor/delete-imageAuth Required

Delete an uploaded image from storage

Token Management

POST/api/theme-editor/extend-token

Extend the editor session token to prevent timeout during editing

Database Tables

TablePurpose
theme_editor_configsActive theme configuration per store — JSON with pages, sections, global settings
theme_editor_historyVersion history of published configurations
store_menusNavigation menu definitions (header, footer, mobile)
store_menu_itemsIndividual menu items with links, nesting, and order
marketplace_themesTheme metadata referenced by the editor config
Theme MarketplaceDeveloper Studio