Skip to main content

Open in AthenaHQ

app.athenahq.ai/shopping-pages/editor/pdp

​
Purpose

The Edit PDP Layout page is a full-screen, drag-and-drop visual editor designed for creating and publishing the layout of a single Product Detail Page (PDP) within Shopping Pages. It allows marketers to arrange the specific elements of a product’s page, such as image galleries, buyboxes, descriptions, specifications, and FAQs, without needing to write code. While this editor is visually similar to the Product Landing Page (PLP) editor, it serves a different purpose in the customer’s workflow. Because PDPs focus on converting a single product rather than displaying a collection of items, this editor does not support A/B testing or experimental variants. Instead, it provides a straightforward, dedicated workspace to perfect a single product’s presentation and manage the overarching site branding.

​
What’s on the page

  • Header bar: The top navigation bar contains a breadcrumb link back to the main Shopping Pages tab, the current page’s name, a status badge (e.g., Draft, Live), and a text indicator of the current save status (e.g., “Saving…”, “All changes saved”). It also houses the primary actions: Preview and Publish changes (or View live page).
  • Left panel (blocks/outline): A navigation menu for the component tree. Customers use this panel to drag new page sections onto the canvas, reorder existing sections, or select specific elements to edit.
  • Puck canvas: The central workspace where the page layout is built. It visually renders the PDP’s sections (gallery, buybox, description, specs, FAQ) using the live site’s theme styling.
  • Field panel / Site styles panel: The right-hand sidebar. When a section is selected on the canvas, this panel displays form fields (text boxes, dropdowns) to edit that section’s content. Under the Site styles tab, customers can edit the shared site-wide branding (colors, fonts, logo, copy, chrome) and access controls to Generate, Apply, or Discard these global brand changes.
  • Document conflict banner: An amber alert banner that appears at the top of the canvas if a page-layout autosave fails because another teammate (or another browser tab) saved a newer version of the page. It offers a Load latest button to resolve the conflict.
  • Site theme conflict banner: A separate amber alert banner that appears if a site-wide branding change hits a similar save conflict. It also offers its own Load latest button.
  • Preview overlay: A full-bleed, full-screen overlay that appears when clicking Preview. It displays the exact rendered HTML that shoppers will see on the live site, based on the current in-progress draft.

​
Drilldowns

  • Preview button: Clicking this trigger opens the in-page full-screen preview overlay (an iframe). It shows the exact HTML the live shop host would serve for the currently unsaved document and theme.

​
What you can do here

  • Back to Shopping Pages (breadcrumb): Navigates back to /shopping-pages?tab=pdps, preserving the active website selection context.
  • Puck canvas: add/reorder/delete section, edit field values: Mutates the in-progress PDP document. Any changes made here are autosaved in the background via a slight delay (debounce).
  • Preview: Fetches and shows a full-screen rendered preview of the current document and site theme in an iframe.
  • Back to editor (inside preview): Closes the preview overlay and returns the user to the Puck canvas.
  • Publish changes: Flushes any pending edits and publishes the draft layout live to the internet.
    • Confirmation: “Publish this layout?” (The description varies: it promises live propagation if the page already has a reachable URL, otherwise it warns that shoppers can’t see the page yet).
  • View live page: Opens the hosted PDP URL in a new browser tab. This button replaces “Publish changes” when there are no unpublished edits staged and a live URL already exists.
  • Load latest (document conflict banner): Refetches the saved layout draft from the server and remounts the editor on it, intentionally discarding any local unsaved layout edits.
  • Load latest (site theme conflict banner): Refetches the shop context and resets the site branding draft to the fresh server state, discarding local unsaved branding edits.
  • Generate from site (Site styles panel): Opens a dialog to enter a URL (or use the site’s own domain) to AI-generate a draft site theme. This action is not destructive.
  • Generate (inside Generate-from-site dialog): Runs the AI branding generation.
    • Confirmation: “Replace your staged site changes with the generated draft?” (Only shown if unsaved site changes already exist).
  • Apply site changes: Promotes the staged site-branding draft to become the live theme across the entire site, re-hosting any brand images to Athena storage.
    • Confirmation: “Apply site changes? Applies your branding changes to every page on your live site.”
  • Discard (site changes): Drops the staged site-branding draft, leaving the live theme completely untouched.
    • Confirmation: “Discard site changes? Discards your staged branding changes. Your live site is unchanged.” (Destructive action).

​
Data shown

  • PDP detail: Product metadata, representative images, and variant names pulled from your tracked catalog.
  • PDP layout draft document: The saved layout sections and configuration for the page currently being edited.
  • Shop context: The live site theme, any staged theme draft, and the hosted subdomain for your Shopping Pages.
  • Live preview rendering: The dynamically generated HTML used for the full-screen preview overlay.

​
Common workflows

Edit and autosave a PDP layout
  1. Open a PDP by clicking the “Edit layout” link from the Shopping Pages PDPs tab.
  2. The visual canvas loads with your saved draft (or the classic-detail default if no draft exists yet).
  3. Drag, drop, and edit sections or fields using the canvas and the right-hand field panel.
  4. Your changes will automatically save about 800ms after your last edit. The header will cycle through “Unsaved changes”, “Saving…”, and “All changes saved”.
Preview the in-progress layout
  1. Click the Preview button in the top header.
  2. The editor quickly saves any in-flight edits and generates the preview.
  3. A full-screen overlay renders the exact HTML shoppers will see.
  4. Click Back to editor in the top right to return to your workspace.
Publish a layout
  1. Make an edit to the canvas so the Publish changes button becomes enabled.
  2. Click Publish changes.
  3. Confirm your choice in the dialog box.
  4. The editor flushes the pending save, then publishes the draft live.
  5. On success, a “Layout published” toast appears. If the page is live, the button turns into a “View live page” link.
Recover from a save conflict
  1. If an autosave fails because another tab or teammate saved a newer draft, an amber conflict banner appears.
  2. Further autosaves are halted to prevent overwriting their work.
  3. Click Load latest on the banner to pull down the fresh draft.
  4. On success, the editor reloads with the new draft and the banner clears.
Edit and apply site-wide branding from within the PDP editor
  1. Open the Site styles tab in the right-hand panel.
  2. Click Generate from site to have AI build a branding draft from a URL, or manually tweak colors, fonts, logos, and copy.
  3. Once changes are staged, Apply and Discard controls appear alongside a status line.
  4. Click Apply site changes to push the branding live across all your Shopping Pages, or Discard to abandon the tweaks.

​
Empty, loading, and error states

  • Empty: If accessed without an active website selected, the page shows: “Select a website to edit its pages.”
  • Loading: A full-page animated loader displays while access permissions, website data, or the draft document are fetched. It also shows briefly when a saved draft is being refetched.
  • Error:
    • “This page is limited to organizations with Shopping Pages access enabled.” (Shown if the feature is disabled for the organization).
    • “This page could not be found. It may have been archived or deleted.” (Shown if the PDP no longer exists or returns a 404).
    • “Couldn’t load this page. Refresh to try again.” (Shown for transient network or read errors).
    • “You do not have permission to edit this page’s layout.” (Shown if the user lacks write permissions).
  • Linked from: The Shopping Pages PDPs tab list (specifically via the “Edit layout” link inside a PDP’s detail drawer).
  • Links to:
    • The breadcrumb links back to /shopping-pages?tab=pdps.
    • The Preview button loads data from the /api/shopping-pages/preview-pdp endpoint.
    • The “View live page” button links directly to the public-facing URL of the PDP.

​
Common support questions

Why can’t I see the “Publish changes” button? The “Publish changes” button only appears if you have made edits that haven’t been published yet. If your layout is fully published and up to date, this button is hidden. If your page has a live URL, it will be replaced by a “View live page” link. What happens if two people edit the layout at the same time? Athena detects if the underlying draft has changed since you opened it. If someone else saves an edit, your editor will show an amber conflict banner and pause your autosaves. You will need to click “Load latest” to sync their changes before you can continue saving. Why is the “View live page” link missing for a page marked as Live? If the product associated with this PDP goes ‘stale’ (meaning it has no active, non-stale variants in your catalog), the page automatically serves a 404 hidden from search engines. The status badge will still say “Live”, but the view link is suppressed because there is currently nothing for shoppers to see. Why did my navigation links disappear after saving? If you leave a navigation or footer link row “half-filled” (for example, entering a label but no URL, or vice versa), the editor will silently drop that incomplete link when saving to prevent broken links on the live site. Does this page support A/B experiments? No. Unlike Product Landing Pages (PLPs), Product Detail Pages do not enroll in A/B experiments. This editor is purely for designing a single layout.