Skip to main content

Open in AthenaHQ

app.athenahq.ai/shopping-pages/editor

​
Purpose

The Layout Editor is a full-screen visual canvas where marketers can design, customize, and publish the layout of a single product listing page (PLP). It allows users to drag and drop sections, configure product grids, and edit text blocks without needing to write code. Beyond individual page layouts, this editor also manages site-wide branding. Marketers can adjust colors, fonts, and global elements (like the navigation bar and footer), and apply these changes to the entire live site. The editor serves a dual purpose: it is used to edit standard live or draft shopping pages, and it is also used in “variant mode” to design custom “Version B” layouts when running A/B tests (experiments) on a page.

​
What’s on the page

  • Header bar: Features a “Back” breadcrumb link to return to the Shopping Pages list, the title of the page (or experiment) being edited, a status badge (e.g., “Draft”, “Live”), autosave status text (e.g., “Unsaved changes”, “All changes saved”), a “Preview” button, and the primary action button (which will read “Publish changes”, “View live page”, or “Done” depending on the context).
  • Document conflict banner: A warning banner that appears if the specific page layout is changed in another browser tab or by a teammate. It explains the conflict and offers a “Load latest” button to reload the newest draft.
  • Site theme conflict banner: Similar to the document conflict banner, but specifically alerts the user if the site-wide branding draft was changed elsewhere.
  • Blocked notice banner (variant mode): Shown when editing an experiment’s Version B layout if the experiment stops being editable (for instance, if a teammate launched the experiment in another tab). It explains the lock and offers a “Discard and return” button so the user can safely exit.
  • Publish-blocked notice banner (page mode): An informational banner explaining that the “Publish” button is disabled because the page is currently enrolled in a running experiment. (Autosave still works, but the layout cannot be pushed live until the experiment concludes).
  • Puck visual canvas: The central, interactive drag-and-drop workspace where the layout is built. It shows a live preview of the page, including real product tiles.
  • Field panel: Located on the side, this panel displays user-friendly form controls (text boxes, text areas, dropdowns) to edit the properties of whatever section or block is currently selected on the canvas.
  • Site styles panel: A dedicated panel for managing site-wide branding, such as global colors and typography. It features a header slot containing “Generate from site”, “Apply site changes”, and “Discard” buttons, along with a status line indicating if there are staged changes.
  • Preview overlay: A full-screen iframe that overlays the editor to show exactly how the current HTML will render for shoppers.
  • Generate branding dialog: A modal window triggered from the Site Styles panel that allows users to scrape an existing website URL to automatically generate draft site branding.

​
What you can do here

  • Back to Shopping Pages (breadcrumb link): Navigates back to the main Shopping Pages PLP list. If editing an experiment, it returns to the experiment’s detail view.
  • Preview: Compiles the current unsaved document and theme, opening them in a full-screen overlay that exactly matches what the live page will look like.
  • Back to editor: Inside the Preview overlay, clicking this closes the preview and returns you to the editing canvas.
  • Publish changes / Publish: Flushes any pending autosaves and publishes the draft layout live. This opens a confirmation dialog: “Publish this layout?” (The description will clarify if the page is immediately visible to shoppers or if it requires a live URL first).
  • View live page: If there are no unpublished changes and the page has a live URL, the “Publish” button is replaced by this link, which opens the live page in a new browser tab.
  • Done: Replaces the “Publish” button when in variant/Version-B mode. This flushes the final autosave for the experiment’s layout and navigates back to the experiment detail view. If the save fails, it surfaces a toast error and keeps the editor open.
  • Load latest (Document conflict): Inside the document conflict banner, clicking this discards local unsaved edits and remounts the editor using the freshest saved draft from the database.
  • Load latest (Site theme conflict): Inside the site theme conflict banner, clicking this discards local site-branding edits and reloads the latest site theme state.
  • Discard and return: Inside the blocked notice banner, clicking this safely Abandons the blocked editing session and returns to the experiment detail view.
  • Generate from site: Located in the Site styles panel, this opens the Generate branding dialog.
  • Generate: Inside the Generate branding dialog, this triggers the branding scrape. If you already have staged site changes, it will prompt a confirmation: “Replace your staged site changes with the generated draft?”
  • Cancel: Closes the Generate branding dialog without making changes.
  • Apply site changes: Promotes the staged site-branding draft to the live site. Prompts a confirmation: “Apply site changes? Applies your branding changes to every page on your live site.”
  • Discard: Discards the staged site-branding draft. Prompts a confirmation: “Discard site changes? Discards your staged branding changes. Your live site is unchanged.”

​
Data shown

  • Page Layout: The specific layout draft saved for the PLP. If it’s a brand new page, it displays the classic-grid default layout.
  • Site Theme: The website’s live global theme settings, alongside any unapplied (staged) draft changes.
  • Products: The actual products assigned to the PLP (including their names, descriptions, and primary images) are loaded into the canvas tiles.
  • Experiment Draft: When the editor is in variant mode, it loads the parent experiment’s draft “Version B” treatment instead of the standard page draft.

​
Common workflows

Edit and publish a page layout
  1. Open a PLP’s layout editor from the main Shopping Pages list.
  2. Drag, drop, and edit sections or product tiles directly on the canvas. Edits automatically save in the background after about 800 milliseconds.
  3. Click the “Preview” button in the header to verify the rendered output in the full-screen overlay.
  4. Click “Publish changes” and confirm the action in the dialog.
  5. The layout is pushed live, and the primary action button swaps to “View live page” until you make another edit.
Generate and apply site-wide branding
  1. Open the “Site styles” panel on the right.
  2. Click “Generate from site”, enter your desired URL (or leave it blank to default to your own domain), and click “Generate”.
  3. Review the newly generated draft branding directly on the canvas.
  4. Click “Apply site changes” and confirm to push the new branding live across all shopping pages.
  5. (Alternatively, click “Discard” to throw away the draft without affecting the live site).
Recover from a save conflict
  1. If an edit is made while another tab or a teammate has changed the same layout draft, autosave will fail to prevent overwriting their work.
  2. A persistent banner appears at the top of the editor and background autosaving completely stops.
  3. Click “Load latest” in the banner.
  4. The editor will reload the freshest saved draft, safely discarding your conflicting local edits.
Edit an experiment’s version B (variant mode)
  1. From the Experiments tab, click “Edit layout” on a draft experiment’s version B.
  2. The editor opens in variant mode. Your canvas edits will autosave specifically to the experiment’s treatment, never touching the page’s standard draft.
  3. Click “Done” to flush your final edits and return to the experiment detail view.

​
Empty, loading, and error states

  • Loading: A full-page, centered animated loader displays while the app retrieves website contexts, permissions, layouts, or experiment data.
  • Empty:
    • If no active website is selected: “Select a website to edit its pages.”
    • If the PLP or seed document cannot be resolved: “This page could not be found. It may have been archived or deleted.”
  • Error:
    • Transient load failure (before the editor mounts): “Couldn’t load this page. Refresh to try again.”
    • Access denied (feature not enabled): “This page is limited to organizations with Shopping Pages access enabled.”
    • Insufficient permissions: “You do not have permission to edit this page’s layout.”
  • Linked from:
    • The Shopping Pages PLPs list (by clicking the “Edit layout” action on a row or inside the drawer).
    • The Shopping Pages Experiments tab (when choosing to edit an experiment’s Version B layout).
  • Links to:
    • The Shopping Pages PLPs list.
    • The Experiment detail view (when exiting variant mode).
    • The live hosted page (via “View live page”).

​
Common support questions

Why is the “Publish” button disabled? If the page is currently enrolled in a running A/B experiment, publishing is blocked so you don’t accidentally alter the live control page mid-test. You will see an informational banner explaining this. Alternatively, if you have no unpublished changes, the button won’t appear at all, showing “View live page” instead. Why is my work not saving? If a teammate (or another tab) saved changes to the layout while you were editing, a conflict banner will appear. Autosave permanently stops to prevent overwriting their work. You must click “Load latest” in the banner to sync the newest version before you can continue saving. Does “Apply site changes” affect other pages? Yes. While canvas layout edits apply only to the specific PLP you are viewing, actions taken inside the “Site styles” panel (like applying colors or fonts) update the global theme for every shopping page on your live site. Why does the button say “Done” instead of “Publish”? You are editing an experiment’s “Version B” custom layout, not the main page draft. Experiment layouts do not “publish” directly from the editor; they go live when the experiment is started from the Experiments tab. “Done” simply saves your work and returns you to the setup screen.