Theme code

#What theme code is

Theme code lets you write the HTML and CSS of a website's sections yourself. It works a lot like a Shopify theme. A section is one file. The file holds the markup, the styles and a list of settings. The owner then fills in those settings in the visual editor.

Theme code is written in Plang, Plangku's own template language. If you have used Liquid, the syntax looks familiar: {{ value | filter }} and {% if %}. The objects and filters are Plangku's own, and only Plangku's engine runs them. See The Plang language.

Theme code is for:

• Web agencies that build a look once and install it on client websites.
• Technical owners who want one section to look exactly right.

You do not need theme code to build a Plangku website. Most owners never open it.

#How it fits with the visual editor

The visual editor and theme code do different jobs.

So the owner keeps editing visually. Your code decides what there is to edit. When you add a setting to a schema, it appears in the right-hand settings panel of the visual editor.

#The theme folders

A theme is a small set of files in four folders, plus an optional theme.json.

theme.json                      name, version, author (optional)
config/
  settings_schema.json          theme settings, shown in the Theme tab
assets/
  site.css                      CSS for the whole website
  logo.png                      images (only from a theme package)
sections/
  promo.plang                   a section: markup + schema + style
  hero.plang                    a section named like a built-in replaces it
snippets/
  product-card.plang            reusable pieces

The details are on Files and structure.

#The workflow

You always work on a draft. Visitors see your changes only after you publish.

1. Edit. Open the code editor and change a file.
2. Save. Press ⌘S (Ctrl+S on Windows). A file is saved only if the whole theme has no errors.
3. Preview. The preview panel in the code editor reloads after every save. It shows the saved draft, rendered the same way the live site is.
4. Publish. Press Publish. Theme code and pages go live together.

Every save is kept in the file's history, so you can compare and restore. See Saving, history and publishing.

#Built-in sections you can customize

Plangku's own sections are written in Plang too. You can copy one into your theme and change it. It looks the same until you edit it.

You can customize these sections: Hero, Keunggulan (features), Menu, Katalog Produk (products), Layanan & Harga (services), Paket Harga (pricing), Galeri, Testimoni, Tentang Kami (about), Angka (stats), Cara Pesan (steps), FAQ, Ajakan (CTA), Lokasi & Kontak (contact), Tim (team), Marketplace & Ojol, Logo Partner (logos), Article, Teks (text), Video, Header and Footer.

Once you customize a section, every section of that type on the website renders from your file. Delete the file to go back to the built-in version. The settings keep working because the copy includes the built-in section's full schema.

Sections that need server features cannot be replaced: forms, data lists, imported content and AI sections. See Sections.

#Uploading theme packages

You can build a theme in your own editor and upload it as a .zip. A package can also carry starting colours, fonts, a header, a footer and whole pages. See Theme packages.

#No download, no CLI, no JavaScript

Some things are deliberate:

• There is no download and no command-line tool. Themes are edited here, or uploaded here. They run only on Plangku's engine, so there is nothing to run locally. Keep your own copy of a package if you want a source of truth.
• There is no JavaScript. Customer websites run without it. Theme output is cleaned: <script>, on... attributes and forms are removed. Use CSS, <details>, :target and the popover attribute for interaction. See Security and limits.
• Theme CSS is scoped. It can restyle the website but never the editor around it.

#Who can use it

Opening the code editor needs the Theme code permission. The owner has it. A team member gets it when the owner ticks it, and it also requires the permission to edit pages and design. Changes made in the code editor stay in draft. Publishing needs the separate Publish permission.

The code editor is only available on the app's own address, not on a customer's website address.

#Where to start

• New here? Do the Quick start. It takes about ten minutes.
• Want to see finished themes? Read Examples.

#All theme pages

• Quick start: customize the Hero and add your own section.
• Files and structure: folders, names, theme.json and limits.
• Sections: the schema, the wrapper, presets and replacing built-ins.
• Setting types: every setting type and the value a template gets.
• Theme settings: config/settings_schema.json and CSS variables.
• Theme packages: the .zip format and the two upload modes.
• Saving, history and publishing: conflicts, restore and going live.
• The code assistant: the AI chat in the code editor.
• The Plang language: syntax and tags.
• Objects: what templates can read.
• Filters: every filter.
• Snippets: reusable pieces and platform snippets.
• Styling: colour variables, containers and scoping.
• Collections and data: showing products, menus and articles.
• Translations: making theme text translatable.
• Security and limits: what is allowed on the page.
• Examples: complete sections to copy.