Quick start

#Before you start

You need a website in Plangku and the Theme code permission on it (the owner always has it). A website with at least one Hero section on its home page makes step 2 easier to see.

Everything you do here stays in the draft until you press Publish. You cannot break the live site by experimenting.

#1. Open the code editor

There are four ways in. Use whichever is closest.

• Click the </> button in the visual editor's top bar.
• Open your website and choose the Code tab.
• In the visual editor, open the Theme tab and click Edit theme code at the bottom.
• Select a section in the visual editor and click Customize this section's code in its settings. This opens the editor and copies that built-in section for you.

The code editor looks like VS Code. On the left is the Explorer with your files. In the middle is the editor. On the right is the Preview. A new theme has no files yet, so the Explorer is nearly empty.

#2. Customize the built-in Hero

1. In the Explorer, scroll to Built-in sections.
2. Move the pointer over Hero and click Customize.

Plangku creates sections/hero.plang and opens it. From now on, every Hero section on the website renders from this file. It looks exactly the same as before, because the file is a copy of the built-in one.

The file has two parts you care about now: the HTML template at the top and a {% schema %} block at the bottom.

#3. Change the HTML

Find the heading line in the template. It looks like this:

<h1 class="site-heading text-[2.35rem] @3xl:text-[3.3rem] @5xl:text-[3.85rem] text-balance whitespace-pre-line">{{ s.heading }}</h1>

Add a line of text right after it:

<p class="mt-3 text-sm font-semibold text-s-hl">Gratis ongkir se-Jabodetabek</p>

Press ⌘S (Ctrl+S on Windows). The preview on the right reloads and shows the new line.

#4. Add a setting

A hard-coded line is not very useful. Let the owner edit it instead. Add a setting to the schema at the bottom of the file. Put it in the "settings" list, for example right after the first setting:

{ "type": "text", "id": "promo_note", "label": "Promo note", "default": "Gratis ongkir se-Jabodetabek" },

Now change the line you added in the template to use it:

{%- if s.promo_note != blank %}
<p class="mt-3 text-sm font-semibold text-s-hl">{{ s.promo_note }}</p>
{%- endif %}

Save with ⌘S. Then switch to the visual editor, select the Hero and look at the right-hand settings panel. Promo note is there. Type a new value and the page updates.

If you make a mistake, the file is not saved. The Problems panel (⌘J) lists each error with its line. Click an entry to jump to it.

#5. Create a new section

1. In the Explorer, move the pointer over the sections folder and click the new file icon.
2. Type promo and press Enter.

Plangku creates sections/promo.plang from a starter: a heading, three cards with icons and a WhatsApp button. Look at its three parts:

• The template (the HTML at the top).
• {% style %}, the CSS for this section.
• {% schema %}, the section's name, settings and a preset.

Change the section's name and the default heading in the schema:

"name": "Promo hari ini",
"description": "Promo dengan tiga keunggulan dan tombol WhatsApp",

{ "type": "text", "id": "heading", "label": "Heading", "default": "Promo hari ini" },

Also change the preset name at the bottom of the schema to match: "presets": [{ "name": "Promo hari ini" }]. Press ⌘S.

Two shortcuts help here: ⌥⌘S saves every unsaved file, and ⌘P opens any file by name.

#6. Add it to a page

1. Go back to the visual editor. If it was open in another tab, it picks up your new section by itself.
2. In the Sections panel, click Add section.
3. Under Your theme's sections, choose Promo hari ini.

The section appears on the page. Select it to see your settings, and a Section style group (background, pattern, top edge, spacing, anchor) that Plangku adds to every section. See Sections.

#7. Preview and publish

1. In the code editor, check the Preview on the phone and tablet sizes with the device buttons.
2. Click Publish in the top right. Publishing makes the saved draft live: theme code and every page together.

If you see N files not published in the status bar, those files changed since the last publish. A file with an M next to it in the Explorer is one of them.

#What next

• Learn the language: The Plang language and Filters.
• See every setting type: Setting types.
• Add colour and font choices for the whole site: Theme settings.
• Ask the code assistant to write a section for you.
• Copy a complete section from Examples.