Skip to main content

Experience Manager Beginner's Survival Guide

Target Audience: New Administrators, Store Operators, Marketing Managers, Support Leads
Purpose: If you are completely new to OptimaOrbit's Experience Manager, this guide explains the core mental model and answers the top 10 questions where new users typically get stuck.

1. The Core Mental Model (3 Golden Rules)​

Before making any changes, keep these 3 golden rules in mind:

  1. Chrome vs. Content:

    • Chrome is the outer frame that stays the same as you move from page to page (Header, Logo, Navigation Menu, Footer). You edit Chrome under Organization / Project ➔ Surface ➔ Menu & Header/Footer.
    • Content is the body of a specific page (Hero banners, product grids, text articles). You edit Content inside the Page Builder Studio.

  2. Save Draft vs. Publish:

    • Clicking Save Draft saves your work so you can come back later. It does NOT change your live website.
    • Clicking Publish pushes your changes to the live customer site immediately.

  3. Pages Don't Automatically Appear in Menus:

    • Creating and publishing a page makes it accessible via its URL slug, but does not automatically add a link to your header navigation.
    • To add a link to your new page, navigate to Menu & Header/Footer, add a new menu item, select Link Type = Page, and pick your page.

2. Top 10 Struggles & Quick Solutions​

  • Why it happens: Your project has a Custom Override (project:storefront:brand) active for its storefront, which overrides the global Organization default logo.
  • How to fix it:
    1. Open Experience Manager and select Project in the left rail.
    2. Select your active project in the Project Selector dropdown.
    3. Expand Storefront and click Brand.
    4. Update the logo image under Project Brand, OR clear the project override so it inherits the Organization default logo.

❓ Struggle 2: "I created a new page, but I can't find it in my website header menu!"​

  • Why it happens: Creating a page in Page Builder does not automatically attach it to your navigation bar.
  • How to fix it:
    1. Open Experience Manager and navigate to Organization (or Project) ➔ Storefront (or Marketing) ➔ Menu & Header/Footer.
    2. Scroll to the Header Menu Items section and click + Add Item.
    3. In the Link Type dropdown, select Page.
    4. In the Target Page dropdown, select your newly published page and click Save.

❓ Struggle 3: "I published my page, but when I visit the URL it shows 404 Page Not Found!"​

  • Why it happens: Either the page is_enabled toggle is switched Off, or the page URL slug has a typo or collision.
  • How to fix it:
    1. Open the page in Page Builder Studio.
    2. Ensure the top status toggle is set to Enabled (Green badge).
    3. Check the Route Slug box in the header bar. Verify there are no red collision warnings (slugCheck).
    4. Click Publish again to ensure the published payload is generated.

❓ Struggle 4: "Why can't I see the Marketing or Resolve (Support) tab in Experience Manager?"​

  • Why it happens: Either your organization subscription plan does not include that package (pkg_mrkt_suite or pkg_orbit_resolve), or your logged-in user role is missing the required permission key.
  • How to fix it:
    1. Check your active plan under Settings ➔ Subscription & Packages.
    2. If the package is active, ask your platform administrator to grant your account the required permission (mkt.pages.view or org.servicedesk.pages.view).

❓ Struggle 5: "My Storefront menu is showing up on my Blog and Help Center!"​

  • Why it happens: You authored navigation links inside the Storefront surface instead of using separate surfaces.
  • How to fix it:
    • Each surface has its own dedicated menu:
      • Storefront Menu: Edit under Storefront ➔ Menu & Header/Footer (Shop, Cart, Orders).
      • Marketing Menu: Edit under Marketing ➔ Menu & Header/Footer (Blog, Guides, Subscribe).
      • Resolve Menu: Edit under Resolve ➔ Menu & Header/Footer (Help Home, Submit Ticket, FAQs).

❓ Struggle 6: "My page looks great on desktop, but text and images overlap on mobile phones!"​

  • Why it happens: Components were configured without responsive device rules.
  • How to fix it:
    1. Open the page in Page Builder Studio.
    2. Click Preview Mode and switch the device preview toggle to 📱 Mobile (375px).
    3. Click any overlapping block on the canvas to open the Property Inspector.
    4. Under Level 4: Responsive Visibility, select Hide on Mobile if the block is desktop-only, or adjust column widths under Level 3: Layout & Spacing.

❓ Struggle 7: "I clicked Deep Translate, but some text on my page is still in English!"​

  • Why it happens: Custom raw HTML blocks or non-standard custom fields are not marked as translatable string keys.
  • How to fix it:
    • Standard components (hero_banner, rich_text, cta_banner, faq_accordion, product_list) translate automatically.
    • For custom HTML blocks (safe_html), open the block inspector and manually enter localized content or use the inline editor's multi-lingual tab bar (TranslationLangChips).

❓ Struggle 8: "My custom HTML block shows an error when I try to save!"​

  • Why it happens: To protect your website from security vulnerabilities (XSS), OptimaOrbit blocks <script> tags, inline JavaScript handlers (onclick, onload), and external images/fonts from un-whitelisted domains.
  • How to fix it:
    1. Remove <script> tags and inline JavaScript event handlers from your HTML code.
    2. Ensure external stylesheets or fonts come from whitelisted CDN domains managed under Settings ➔ Media & Script Allowlist.

❓ Struggle 9: "I accidentally deleted a component block or ruined my page layout — how do I undo?"​

  • Why it happens: Unintentional edits during canvas layout builder sessions.
  • How to fix it:
    1. If you haven't clicked Save Draft, simply refresh your browser page to reload the last saved draft.
    2. If you clicked Save Draft, click Version History in the top action bar of Page Builder Studio.
    3. Browse past snapshots, view diffs, and click Rollback to restore a previous working version.

❓ Struggle 10: "What is the difference between Organization Scope and Project Scope?"​

  • Organization Scope: Global baseline defaults shared by all projects (e.g. global company logo, master Privacy Policy, baseline Storefront menu).
  • Project Scope: Specific overrides for an individual project (e.g. a sub-brand store logo, project-specific marketing landing pages).

3. Step-by-Step Guide: Building Your First Page​

Follow this simple 5-step checklist to build and launch a new page:

  1. Navigate to Pages: Go to Experience Manager ➔ Organization (or Project) ➔ Storefront (or Marketing/Resolve) ➔ Pages.
  2. Create Page: Click + Create Page, enter your Page Title (e.g. Summer Campaign), and verify the URL Slug (e.g. summer-campaign).
  3. Choose Template: Pick a preset starting template (Blank Canvas, Modern E-commerce, Feature Showcase, High-Converting Landing).
  4. Design Page: In Page Builder Studio, click + Add Component to add Hero Banners, Product Lists, Image Galleries, and CTAs. Customize styling in the Inspector.
  5. Publish & Link: Click Publish at the top right. Then go to Menu & Header/Footer and add a header link to your new page.