Homepage Template Editor Guide
Everything you need to customize your Showroom homepage in the live editor — pick a layout, edit copy and images section by section, preview changes instantly, and export a developer handoff when you are ready.
Overview
The Homepage Template Editor is built into every Showroom plan. It lets you configure your public homepage without writing code — headline copy, hero images, category tiles, footer content, and more — while watching a scaled live preview update as you type.
When your draft is ready, use Export handoff to download a ZIP package for your developer or LogicX implementation team. The package includes a PDF brief, layout captures, a JSON specification, and only the images you uploaded (template defaults are documented but not duplicated in the bundle).
Getting started
- From the Homepage templates section on the marketing site, pick McQueen, Classic, or Spotlight and click Open in editor.
- Or open a layout directly:
- Use the left sidebar to edit each homepage section. The preview on the right scrolls in sync when you jump between sections.
- Your work saves automatically in the current browser. Return anytime to continue where you left off.
Editor layout
The editor has three main areas:
- Top toolbar — breadcrumb navigation, template name badge, autosave status, and the Export handoff button.
- Section jump bar — quick links to Header, Hero, and template-specific sections (Featured Categories, Catalog Highlights, Shop by Room, and so on).
- Left panel + live preview — form fields on the left; a full-width homepage preview on the right that scales to fit your screen.
Click any section heading in the sidebar or use the jump bar to scroll both the editor and preview to that part of the page.
Choose a template
Each template is a complete homepage layout with its own sections and styling. Pick the one that best matches your showroom brand.
| Editor name | URL parameter | Best for |
|---|---|---|
| McQueen | design=classic |
Catalog-first showrooms with featured categories, about block, feature cards, product carousels, and a rich footer. |
| Classic | design=gallery |
Gallery-style layout with centered nav, hero mosaic, four catalog highlight tiles, and a four-column footer. |
| Spotlight | design=spotlight |
Modern retail homepage with top banner, search toolbar, hero slideshow, shop-by-room tiles, newsletter, and map footer. |
McQueen sections
Header (banner, logo, main nav) · Hero · Featured Categories · About Us · Feature Cards · Sketch Section · You May Like · Get Inspired · Footer
Classic sections
Header (logo bar, main nav) · Hero · Catalog Highlights · Footer · Copyright
Spotlight sections
Header (banner, logo, search, icons, main nav) · Hero slideshow · What's On Sale · Shop By Room · About Us · Shop By Category · Our Brands · Newsletter · Footer
Editing sections
Most fields update the preview immediately as you type. Common field types:
- Text & textarea — headlines, body copy, button labels, URLs, and footer addresses.
- Color pickers — banner, button, footer, and section background colors where supported.
- Image uploads — click the upload area or file input; a thumbnail appears when the image is set.
- Checkboxes — show or hide sections (for example the sketch block) or individual nav subcategories.
- Repeating link editors — add, rename, reorder, or remove banner links, footer links, and nav items.
Images & uploads
- Upload PNG, JPG, or WebP files using each section's file control. Recommended dimensions are shown next to many fields (for example hero lifestyle images).
- Compress large photos before uploading for faster previews and smaller handoff files. The editor toolbar links to Squoosh for free compression.
- Replacing an image updates the preview right away. Only images you upload are included in the export ZIP — bundled template defaults stay in the template folder on the server.
- Logo uploads typically support PNG or SVG with a max display size noted in the field hint.
Autosave & drafts
Every change is saved automatically to your browser's local storage. You will see brief status messages such as Draft restored when you return to the editor.
- Each template layout has its own saved draft (McQueen, Classic, and Spotlight do not share state).
- Drafts are per browser and per device — clearing site data or switching browsers starts fresh.
- To reset a layout, clear site data for this domain or open the editor in a private window and re-enter your content.
Export handoff
When your homepage draft is complete, click Export handoff in the top toolbar. The editor builds a ZIP file containing:
- PDF brief — human-readable summary of copy, colors, links, and section notes.
- Layout captures — screenshots of major homepage sections for visual reference.
- JSON spec — structured data your developer can use to implement the page.
- Uploaded images only — files you added in the editor, named for easy placement.
Share the ZIP with your web team or LogicX onboarding contact. Template default images that you did not replace are listed in the PDF but not duplicated in the archive.
Tips & troubleshooting
Preview looks cut off or too small
The preview scales to fit the workspace. Resize your browser window or zoom out — the layout reflows automatically.
My changes disappeared
Confirm you are opening the same template URL (design=classic, gallery, or spotlight) and the same browser where you edited. Drafts are not synced across devices.
Export failed or ZIP is empty
Wait for the status message to finish and try again. If the problem continues, refresh the page, confirm your draft restored, and export once more. Very large uploaded images can slow the process — compress them first.
Need more help?
Contact [email protected] or visit the LogicX Support Knowledge Base for platform-wide guides.