Lurox User Guide

What is Lurox?

Lurox is a visual page builder for your storefront. Instead of editing raw HTML, you assemble a page from components — a hero banner, a block of rich text, an image-and-text row, a product grid, and so on — and arrange them by dragging, editing each one in a simple properties panel. Lurox stores your content as structured, typed data, which means clean version history, instant previews at three screen sizes, and pages that stay consistent with your theme.

This very page was built and published with Lurox.

The four building blocks

Lurox has four nouns. Learn these and everything else falls into place.

A typical flow: start from a Template → it creates a Block you edit in the Lurox editor → you Place that block into a storefront slot. Pages are edited the same way, but they live at their own URL.

The editor at a glance

Open any Lurox-managed page or block and you land in the editor. It has four regions:

1. The toolbar (top) — shows whether you're editing a Page or a Block, your plan, the store view you're editing, and the page's Layout and Structure.
2. Components panel (left) — the ordered list of components on the page, with + Add Component at the top. Drag to reorder; each row can be switched off without deleting it.
3. Properties (centre) — select a component to edit its fields here.
4. Preview (right) — a live render of your draft. Toggle M / T / D (mobile, tablet, desktop) to check responsiveness. A yellow DRAFT — NOT LIVE banner reminds you nothing is public until you publish.

Building a page

1. Add a component. Click + Add Component and choose from the picker. Components are grouped by category and labelled Free or Pro.
2. Edit its properties. Select the component; fill in its fields in the centre panel. Every field has a short description. Text fields, dropdowns, image pickers and repeatable lists are all supported.
3. Reorder. Drag components in the left panel to change their order on the page.
4. Show / hide. Toggle a component off to hide it from the storefront while keeping it for later — handy for seasonal content.
5. Preview responsively. Use the M / T / D buttons to confirm the layout works on phones, tablets and desktops.

Page layout & structure

Two page-level choices live in the toolbar:

• Layout — Full width (standard header & footer), Boxed (the page sits in a centred frame), or Landing (header and footer hidden, for campaign pages).
• Structure — Single column, or Two column to add a sidebar beside the main content (it stacks below on mobile). Two-column is a Pro feature.

The component library

Lurox ships a library of typed components. Free components are available on every store; Pro components unlock with a Pro plan.

Some components connect to other Cabbage Patch Studios modules — for example the Testimonials component appears in the picker only when the Testimonials module is active. See the Testimonials User Guide.

Block Templates

You don't have to start from a blank block. The Block Templates gallery (Content → Lurox CMS) offers ready-made blueprints. Choose one, click Use for this store, and Lurox creates a real block seeded with the template's content and opens it in the editor for you to customise.

Built a block you'd like to reuse? Open it in the editor and choose Save as Template. It then appears in the gallery under My Templates, ready to instantiate again — on this store or another.

Placements — putting blocks on the storefront

A block isn't visible until it's placed. Placements (Content → Lurox CMS → Placements) let you assign a block to a friendly, named storefront slot — for example a slot above the footer, or below the header — for a chosen store. No layout XML, no theme editing.

Pick the block, pick the slot, pick the store, and save. The block appears on that store's storefront in the matching position, and respects the store's theme.

Publishing & version history

Nothing you do in the editor is public until you publish. The action bar (bottom of the editor) gives you:

• Save Draft — store your work in progress; the storefront is unchanged.
• Publish to Live — make the current draft the live version.
• Schedule (Pro) — choose a future date and time to publish automatically.
• Share Preview — generate a private link so a colleague can review the draft without admin access.
• Discard — throw away the current draft and return to the published version.

Version history & rollback

Every save and every publish is recorded as a numbered version with the date and the author. Open Version History to see the full trail, compare what changed, and roll back to any earlier version in one click. This is the same versioning that powers the changelog at the bottom of every guide in this library.

Design tokens (Advanced)

Colours, spacing and typography across your Lurox components come from a shared set of design tokens — your theme's design system in one place. Editing a token (say, your primary brand colour) updates every component that uses it, so your pages stay visually consistent without touching each block.

The token editor is the advanced surface for store-wide look and feel. Most day-to-day content work never needs it, but it's there when you want to tune the brand.