Using the website builder
Every part of the Storelib website builder: what each button, panel and setting is, what it changes, and where it lives. The settings on this page are drawn from the same lists the builder reads, with their defaults, so what you see here is what you see in the editor.
The builder opens from Websites in your dashboard. Pick a website and press Edit website.
The screen#
A window narrower than 768px is treated as a phone: the preview is the phone preview and the sidebar becomes a sheet with three tabs, Sections, Pages and Settings.
The top bar#
From left to right on a computer:
Shortcuts: ⌘Z or Ctrl+Z undoes, ⌘⇧Z, ⌘Y or Ctrl+Y redoes. In the code editor, ⌘S or Ctrl+S saves.
The sidebar#
Sections#
The page's sections, top to bottom.
- The header and footer sit in their own boxes at the top and bottom. They are the same on every page: change them on one and every page changes. They can be hidden with the eye, but not moved, copied or deleted.
- Every other section has a grip to drag it up or down (press and hold on a phone, or use the arrow keys), and a … menu with Duplicate, Hide or Show, and Delete. Right-clicking the row opens the same menu.
- A hidden section is drawn faded in the list and is left out of the page. Delete takes effect at once; Undo brings it back.
- A thin line between two rows shows a + under the pointer: press it to add a section at exactly that point.
- Add section, at the end of the list on a computer and the start on a phone, adds a section above the footer.
Adding a section#
Add section opens the library: a search box, the categories down the side, and a card for each section drawn small with its real content. Sections you or Ask AI coded are under Created by you. Pick one and it is placed, selected and scrolled to.
The library's categories are Hero, Products, Features, Content, Social Proof, CTA, Media, About, FAQ and Marketing.
Blocks#
Some sections hold repeated items: questions in an FAQ, columns in a footer, slides in a gallery. These are blocks, listed under the section's settings. Each block can be moved up or down, duplicated, deleted, and opened to edit its own settings. Add adds another until the section's limit, and clicking a block in the canvas opens it in the list.
Pages#
Pages lists the website's pages: Home, About, Contact, Shop and Search, the pages you made, and a product page for each product. The switcher in the top bar does the same with a search box, and Create page asks for a title and makes a page at an address taken from it. A new page starts with the header and footer and nothing between.
Every website comes with a Refund Policy, a Privacy Policy and Terms of Service page. Edit them like any other page before you publish.
A section's settings#
Click a section, in the canvas or the list, and its settings open in the sidebar.
- Colour scheme comes first: pick one of the website's schemes and every colour in the section follows it. Advanced colors overrides single colours (background, text, heading, accent, border, and the two buttons) for this section only. Reset to scheme undoes that.
- Text picks the heading and body styles from General Settings, or Custom to set font, weight, size per screen, line height, letter spacing and case for this section.
- The section's own settings follow, in the order its file declares them, each with its help text.
- Blocks, if it has any.
- Hide, Duplicate and Delete are pinned along the bottom.
With the inspector on, a selected section also shows a small toolbar at its top right: Ask AI, Move up, Move down, Duplicate, Hide and Delete.
Every control a section can have#
A section declares its settings in its schema, and each type is drawn as one control. This is every type, drawn as the builder draws it. To write one, see Schema.
Headingtext
A single line of text. A one-line box. A text setting whose id or label says gradient is drawn as the gradient editor instead.
Bodytextarea
Several lines of plain text. A box that grows as you type.
Contentrichtext
Formatted text. Stored as sanitised HTML; output with the raw filter. A small editor with Paragraph, Heading 2 to 4, Bold, Italic, Link, bulleted and numbered lists. Pasting brings in plain text.
Columnsnumber
A number typed in. A number box that keeps to its min, max and step. With responsive, a Desktop, Tablet, Phone switch sits above it.
Show badgetoggle
On or off. A switch.
Require agreementcheckbox
On or off, drawn as a checkbox. Prefer toggle for a single switch. The same switch as toggle. Prefer toggle in new sections.
Layoutselect
One of a list, drawn as a dropdown. A dropdown.
Button styleradio
One of a short list, every option visible. Buttons side by side when there are three options or fewer, a dropdown when there are more.
Paddingrange
A number on a slider. A slider with the number and unit beside it. Can be responsive.
Backgroundcolor
A hex colour. A swatch and its hex. It opens in place with a colour field, a hue slider, the hex and the colours already on the page. Hidden in a section panel, where colours come from the scheme.
Colour schemecolor_scheme
One of the theme's named colour schemes, by key: the built-in white, light, dark, black and highlight (Light, Soft, Dark, Brand and Accent in the editor) or one the creator added. The editor offers every scheme the theme has; see docs/theme/16-design-tokens.md. The scheme picker at the top of the section panel, each scheme painted in its own colours, with Edit beside each one.
Heading fontfont_picker
A font family from the theme's font list. A dropdown whose options are drawn in their own font.
Alignalignment
Left, centre or right. Three buttons: left, centre, right. Can be responsive.
Imageimage_picker
One image from the media library. Stored as an asset reference, rendered as a URL. A dashed box: Add Image, click to upload or drag in. Filled, it shows the picture with Replace and Remove. JPEG, PNG, GIF, WebP, SVG or AVIF under 5 MB.
Imagesimage_gallery
Several images, in order. A stack of image pickers, with an empty one at the end to add another.
Background videovideo_picker
A video file from the media library, or a hosted video URL. The video, with an X to clear it, and a box to paste a hosted video link.
Downloadable filefile_picker
Any file from the media library. A box for a file's address.
Iconicon_picker
One icon from Storelib's icon library, by name. A searchable grid of icons.
Button linkurl
Where something links to: a page of the site, a product, or any address. The link picker: a search over your pages and products, or any address typed in (/about, https://…, mailto:).
Pagepage_picker
One of the site's pages, by key. A dropdown of the site's pages.
Productproduct_picker
One of the creator's products, by id. A dropdown of your products.
Communitycommunity_picker
One of the creator's communities, by id. A box for a community id.
Contentheader
A heading in the sidebar. Holds no value. A small heading that divides a long panel. Holds no value.
Paragraphparagraph
A line of help text in the sidebar. Holds no value. A line of help text in the panel. Holds no value.
Dividerdivider
A rule between groups of settings. Holds no value. A line across the panel. Holds no value.
The header's own panel#
The header has a panel of its own, in three parts.
- Store Logo: the logo, its height, a nudge left or right, and a separate logo and height for phones.
- Navigation Links: up to eight links, each with a label, where it goes, and whether it opens in a new tab. Drag to reorder. Each link can hold one level of sub-links.
- Header Settings: the layout on a computer (logo left, nav inline, nav centred, or logo centred) and on a phone; the colour scheme; how menu links react to the pointer; width and spacing; sticky and transparent behaviour; a bottom border and shadow; which icons show (search, account, wishlist, cart); and an optional button with its own text and link.
General Settings#
The settings that belong to the whole website. Open them with the gear in the top bar, or Settings on a phone.
Colors#
Every section picks one colour scheme. Change a scheme here and every section using it changes with it. A website starts with five:
Aa Light
Body text on this scheme.
whiteAa Soft
Body text on this scheme.
lightAa Dark
Body text on this scheme.
darkAa Brand
Body text on this scheme.
blackAa Accent
Body text on this scheme.
highlightPick a scheme to edit it: its name, whether new sections start on it, and its seventeen colours in five groups (surface, text, primary button, secondary button, inputs). If a pair of colours is hard to read, it says so and by how much. A scheme can also lay a gradient over its background. Add scheme makes another; a scheme you made can be deleted, and the sections on it move to another.
Page colors, under Colors, are the colours of the page itself, behind and between sections:
Primaryprimary_color
The page's main colour, outside any section.
Primary hoverprimary_hover_color
The main colour under the pointer.
Secondarysecondary_color
A second colour for the page's own parts.
Accentaccent_color
Small highlights outside sections.
Page backgroundbackground_color
The page behind every section.
Surface / cardsurface_color
Cards and panels outside sections.
Surface altsurface_alt_color
A second, slightly different surface.
Heading texttext_color
Headings outside sections.
Body texttext_secondary_color
Body text outside sections.
Muted texttext_muted_color
Captions and quiet text outside sections.
Borderborder_color
Lines and borders outside sections.
Link colorlink_color
Links outside any section.
Link hoverlink_hover_color
Those links under the pointer.
Successsuccess_color
Confirmations, such as a sign-up that went through.
Errorerror_color
Errors, such as a form that needs fixing.
Branding#
The store's name, logo and its height, an optional smaller logo for phones, the favicon and a tagline. The logo is kept in step with the header's Store Logo: change it in either place.
Store namebrand_name
The store's name, used by the header when there is no logo and in the page title.
Logo imagelogo_url
The logo in the header. Kept in step with the header's own Store Logo.
Logo heightlogo_width
How tall the logo is drawn. The Branding panel shows it as Logo height.
Faviconfavicon_url
The small icon in the browser tab. A square image, 64 by 64 or larger.
Taglinetagline
A line under the store's name, where a section or the footer shows it.
Typography#
Three fonts, and nine text styles every section uses unless it sets its own.
Heading fontfont_heading
The font every heading style uses unless a style says otherwise.
Body fontfont_body
The font for body text and buttons.
Accent fontfont_accent
A third font a text style can pick. Empty means the heading font.
The text styles, with their defaults. Each can be changed: font, weight, a size for desktop, tablet and phone, line height, letter spacing and case. A dot marks a style you changed, and Reset style puts it back.
Buttons#
Default stylebutton_style
What a button looks like before a section changes it: filled, outlined or text only.
Button shapebutton_shape
Square corners, rounded, or fully round ends.
Border radius (px)button_border_radius
Exactly how round a rounded button is.
Default sizebutton_size
The default padding and text size of a button.
Font weightbutton_font_weight
How heavy button text is.
Button shadowbutton_shadow
A soft shadow under every button.
Hover animationbutton_transition
What a button does under the pointer.
Layout#
Max page widthpage_width
The widest the content of a section gets on a large screen.
Side paddingcontent_padding_x
The space between content and the screen's edges.
Section gapsection_gap
Space added between every two sections.
Spacing scalespacing_scale
Multiplies every section's own spacing: below 1 tighter, above 1 roomier.
Card border radiusborder_radius
How round the corners of cards are.
Card shadowcard_shadow
How much shadow a card casts.
Image border radiusimage_border_radius
How round the corners of images are.
Animations#
Enable scroll animationsanimations_enabled
Sections ease in as they scroll into view. Visitors who ask their device for less motion never see it.
Animation styleanimation_style
How a section arrives: rising, fading, sliding or growing.
Duration (ms)animation_duration
How long the arrival takes.
Stagger delay (ms)animation_stagger
The delay between items arriving in a row, such as cards.
Announcement bar#
Show announcement barannouncement_bar_enabled
A thin bar across the top of every page.
Messageannouncement_bar_text
What the bar says.
Link textannouncement_bar_link_text
The words of the link at the end of the bar.
Link URLannouncement_bar_link_url
Where that link goes.
Backgroundannouncement_bar_bg
The bar's colour.
Text colorannouncement_bar_color
The colour of the bar's text.
Scrolling marqueeannouncement_bar_scrolling
The message moves across the bar instead of standing still.
Allow dismissannouncement_bar_dismissible
Visitors can close the bar with an X.
Social links#
Twitter / X URLsocial_twitter
Your X profile, for the social icons.
Instagram URLsocial_instagram
Your Instagram profile.
YouTube URLsocial_youtube
Your YouTube channel.
TikTok URLsocial_tiktok
Your TikTok profile.
LinkedIn URLsocial_linkedin
Your LinkedIn page.
Discord URLsocial_discord
Your Discord server invite.
Facebook URLsocial_facebook
Your Facebook page.
Pinterest URLsocial_pinterest
Your Pinterest profile.
Twitch URLsocial_twitch
Your Twitch channel.
GitHub URLsocial_github
Your GitHub profile.
Show icons in headersocial_show_in_header
Shows an icon for each filled-in profile in the header.
Show icons in footersocial_show_in_footer
Shows them in the footer.
Shipping#
Free shipping threshold ($)free_shipping_threshold
The order total above which shipping is free. 0 turns it off.
Show free shipping progress barfree_shipping_bar
Shows the cart how far it is from free shipping.
SEO#
Default page titleseo_title
The title search results and browser tabs show when a page has none of its own.
Meta descriptionseo_description
The sentence search results show under the title.
Social share image (OG)seo_og_image
The picture a link to your site shows when it is shared.
Twitter card typeseo_twitter_card
A small or a large picture when a link is shared on X.
Allow search indexingseo_robots
Off asks search engines not to list the site.
Cookie and privacy#
Use my own words and colourscookie_banner_enabled
Every site asks visitors before storing anything optional, and a visitor can change their answer from Cookie preferences in the footer. On, the banner uses the words and colours below instead of Storelib's.
Banner textcookie_banner_text
What the banner says, in place of Storelib's sentence.
Accept button textcookie_accept_text
The words on the accept button.
Decline button textcookie_decline_text
The words on the decline button.
Banner backgroundcookie_bg
The banner's colour.
Text colorcookie_text_color
The banner's text colour.
The canvas#
The canvas is your page, drawn the way a visitor sees it.
With the inspector on, a section shows a faint ring under the pointer and a solid one when selected. Clicking selects a section, or a block inside it. Clicking into a form field lets you type in it rather than selecting the section. Hovering the gap between two sections shows Add a section here.
With the inspector off, the canvas is a plain preview: links inside the website open that page in the builder.
Either way, the builder never leaves itself:
- A link to a page of the website opens that page in the builder. A link to a page that does not exist yet offers Create this page.
- Links to other websites, email links and phone links do nothing.
- Forms do not submit, and nothing can be bought. A sign-up box in the canvas does not subscribe anyone.
A section that fails to draw says so in its place, with the error and Try again. The rest of the page is unaffected.
Ask AI#
Ask AI has two modes.
- Change this page: describe a change and it is made with the same sections, blocks and settings the panels use. It is one step of Undo, and nothing is saved until the builder saves. Select a section first and it can be limited to that one.
- Code a section: describe a section the library does not have. It is written as a section file, compiled, and only kept if it compiles; a file that does not compile is sent back to be fixed, up to three times. While it is being written, the panel says what it is doing (Starting, Thinking, Writing the section, Checking it, Fixing a detail), the spot it will fill shows code being typed, and the finished section takes its place. If it still cannot get it right, it says so in plain words with Try again, never with the compiler's report.
Both modes answer rather than guess. A greeting, a question, or a request too unclear to act on gets a short reply saying what it understood and what to ask for, and nothing on the page changes.
You can attach up to four pictures (PNG, JPEG, WebP or GIF) of something you want built. Pressing Enter while it is working queues the next request.
The code editor#
Code, in the top bar, opens every file of the website's theme: the section files, the templates, the settings, the styles and the scripts. The list marks files you changed in blue and unsaved ones in amber.
- Save (or ⌘S) compiles a section file first. If it does not compile, nothing is saved, and each error is listed with its line; press one to jump to it, or Solve with AI.
- A save is a draft: the live website changes when you publish.
- History lists every save of a file; open any of them to bring it back.
- Revert puts a theme file back to how the theme shipped it. Your own files can be renamed, duplicated and deleted; the editor warns first if a page uses the section.
- Unsaved edits are kept in the browser, and offered back when you return.
The language section files are written in is the Storelib Builder Framework.
Website settings#
Website Settings, in the top bar, is a page of its own, with nine subjects down the left. On a phone they are a list, and each opens with its own Back. The tabs above the live website's cover on the Website page (Pages, Domain, SEO, Publishing, Settings) open the matching one.
Every website has its own settings. Anything marked below as part of the draft is saved with the website's other changes, can be undone, and reaches visitors when you publish.
A creator keeps up to three websites: one live and two drafts. Add theme, Duplicate and Import all refuse a fourth, on the server.
Saving and publishing#
- Every change is saved as a draft a moment after you make it. There is no save button to remember while editing.
- The live website does not change until you Publish. On a website that is live, the button in the top bar says Publish, with a bright dot when the draft is ahead of the live site.
- The Publish panel shows the website's address, when it was last published, and Preview, which makes a private link that shows the draft to anyone you send it to.
- Publishing makes every page's draft, the theme settings and the saved code files live at once, and keeps a backup.
- A website that has never been published has a Save button instead, since there is nothing live to update yet.
