Theme Editor Preview

The Theme Editor opens the storefront in an iframe. A preview popup opens the storefront in a new tab. In both cases the platform adds a query parameter to the URL. The theme must forward the parameter to the page call. Without this change the editor shows the live page and not the draft.

Query parameters

Parameter	Set by	Meaning
isEdit	The Theme Editor iframe	The page is open inside the editor
previewId	The preview popup of the Theme Editor	Load the draft version with this identifier

isEdit turns off section filters. The merchant must see every section in the editor, including a section that a filter hides on the live storefront.

Changes in lib.js

export async function pageDataResolver(pageResolverData) {
  const { fpi, router, themeId, query } = pageResolverData;

  const state = fpi.store.getState();
  const pageValue = getPageSlug(router);

  const APIs = [];
  const currentPageInStore = getPageValue(fpi.getters.PAGE(state));
  const company = fpi.getters.THEME(state)?.company_id;
  const requestHeaders = {};

  const { isEdit, previewId } = query;

  if (pageValue && pageValue !== currentPageInStore) {
    const params = {
      pageValue,
      themeId,
      requestHeaders,
      company,
    };

    // Skip section filters in edit mode
    if (isEdit) params.filters = "false";

    // Load the draft version in preview mode
    if (previewId) params.previewId = previewId;

    APIs.push(fpi.theme.getPage(params));
  }

  return await Promise.all(APIs).catch(console.log);
}

Pass filters as the string "false", not as the boolean false.

The name of the page method depends on the FDK Store version. Some versions name it getPage, and some versions name it fetchPage. Confirm the name for the version that your theme installs.

Verification

1. Open the theme in the Theme Editor. Confirm that every section appears.
2. Add a section, and confirm that the iframe shows it without a publish action.
3. Open the preview popup. Confirm that the new tab shows the same draft.
4. Open the live storefront. Confirm that the draft section does not appear.