Customisation

Layout Studio

Layout Studio is an administrator-only workspace for trying storefront layout alternatives before committing them to the WordPress Control Center. Its switches update the real storefront chrome and page templates in the current browser session, making it possible to compare arrangements without changing the configuration seen by visitors.

Open Layout Studio

Sign in with an account that has the WordPress manage_options capability, then open /layout-studio on the public storefront. Anonymous visitors and users without the required capability receive the normal not-found experience.

Use a staging or draft storefront when reviewing extensive changes. Although Studio preferences are session-local, the preview controls affect the current browser tab’s storefront while the Studio session is active.

Recommended workflow

1. Open Layout Studio in one browser tab.
2. Change one group of related controls at a time.
3. Browse to representative pages in the same session to inspect the result.
4. Check desktop, tablet and mobile widths, light and dark colour modes, and reduced-motion behaviour.
5. Record the preferred values or select Export config.
6. Apply the reviewed values in Appearance > FunkyCommerce.
7. Save the Control Center and reload the storefront to verify the canonical configuration.

What you can preview

Site chrome and global presentation

• announcement-bar visibility and scrolling behaviour;
• sticky-header behaviour, header arrangement and logo treatment;
• navigation search, mobile-menu dimensions and cart trigger;
• header icons and account, language, currency, reading-list, wishlist and cart controls;
• content maximum width, border radius, breadcrumbs and brand palette;
• newsletter pop-up layout and cooldown;
• back-to-top placement, style and icon.

Footer

• footer visibility and column arrangement;
• newsletter, feature panel and brand-logo layouts;
• AI assistant and Spotify placement and visibility;
• payment methods, social links and copyright presentation;
• bottom-bar and extra-wrapper layouts.

Commerce layouts

• product-page composition, description order and wishlist treatment;
• related-product placement and column count;
• product-card and product-archive hero variants;
• cart layout, summary position and promoted products;
• checkout store mode, coupon, payment and order-summary positions;
• optional checkout fields, order notes, terms and privacy presentation;
• wishlist, authentication and other customer-page layouts.

Content and community

• homepage hero and post-archive hero variants;
• post table of contents, sharing, author biography and discussion layouts;
• community and author profile headers;
• community-feed layout, loading method, page size and tag filters.

Preview changes across the storefront

Studio controls change the actual React layout preferences for the browser session rather than displaying a separate static mock-up. After changing a value, scroll through the current page or navigate to the relevant route. For example, inspect a product route after changing product-page options and open checkout after changing checkout composition.

Keep the Studio tab available while testing. Reloading clears the preview and restores values fetched from WordPress. If the result unexpectedly changes after a reload, that confirms the preview value was not yet applied in the Control Center.

Export the configuration

Select Export config after the backend configuration has loaded. Layout Studio downloads a dated JSON file containing the current schema version and the complete previewed layout.

The exported file is a review and hand-off aid. Downloading it does not update WordPress, deploy the storefront or create a backup of unrelated Control Center settings. Keep it with the implementation ticket or send it to the administrator who will apply the approved values.

Apply approved values

Open Appearance > FunkyCommerce and reproduce the accepted values in their corresponding Control Center sections. Save the settings, then reload the storefront without the Studio preview.

Some Studio controls combine several backend fields into one visual decision. Apply them carefully instead of pasting JSON into WordPress. Where a control belongs to WooCommerce, a shortcode instance, the Site Editor or another plugin, update it in the owning system.

Acceptance checklist

• Header, mobile navigation and footer remain usable at supported widths.
• Menus, logos, search and utility controls appear only where intended.
• Products, archives, posts, profiles, cart and checkout use the approved layouts.
• Long titles, translated labels, empty states and loading states do not overflow.
• Keyboard focus, dialogs, drawers and sticky elements remain accessible.
• Light mode, dark mode and reduced motion remain coherent.
• The final values survive a reload because they were saved in the Control Center.
• A production build or live SPA refresh reflects the saved configuration.

Troubleshooting

Layout Studio shows a not-found page

Confirm that the current WordPress viewer is authenticated and has manage_options. The route is deliberately hidden from ordinary visitors.

Export config is disabled

Wait for the backend layout configuration to finish loading. Check the browser network panel and confirm that the storefront is connected to the intended WordPress GraphQL endpoint.

Changes disappear after reload

This is expected. Studio changes are session-local previews. Apply approved values in the Control Center if they must persist.

Saved values do not appear publicly

In dynamic SPA mode, reload after the backend configuration refreshes. In static-first SSG mode, publish a new storefront build when the changed setting is part of generated output. Also check browser, CDN and deployment caches.

Next: review Visual design, Brand and identity, or Free and Pro theme settings.