Using app proxy with response liquid loads the header and footer before loading the proxy html and styles causing a glitch in appearance

Shopify App Store
1

Hi everyone,

We’re building a custom UI that’s served through Shopify App Proxy.

Currently, the UI is rendered externally with the proxy - returned as text/html — it interacts with the Shopify store using the Cart AJAX API, and in some cases redirects back to the storefront.

We want to load the UI inside the merchant’s storefront domain (via the app proxy), while hiding the theme header and footer so that only our custom interface is visible.

:white_check_mark: Possible setup

Serving the React build through our app proxy, returning a Liquid response that includes a block to hide all theme elements:

<style>
  /* Hide Shopify theme elements */
  .shopify-section-header,
  .shopify-section-footer,
  .site-header,
  .site-footer,
  .header,
  .footer,
  .announcement-bar,
  .breadcrumb,
  .page-header {
    display: none !important;
  }
</style>

This works correctly across all tested themes — except for one issue.

:warning: The problem

The app proxy Liquid content (our HTML) is rendered after the theme header and footer have already appeared.

As a result, the theme header briefly flashes on screen for a moment before being hidden by our block.

We’d like to prevent that flicker and have the proxy response load before or above the theme content, so that the header/footer are never visible at all.

:test_tube: What we tried

We found that updating the theme.liquid file and conditionally injecting the same block there works perfectly:

{% if request.path contains "<app-proxy-path>" %}
  <style>
    /* Hide Shopify theme elements */
    .shopify-section-header,
    .shopify-section-footer,
    .site-header,
    .site-footer,
    .header,
    .footer,
    .announcement-bar,
    .breadcrumb,
    .page-header {
      display: none !important;
    }
  </style>
{% endif %}

However, this requires updating theme files via the Theme API, which we’d prefer to avoid for maintainability and merchant safety reasons.

Is there any supported way to:

  • Make an app proxy response render before the theme content, or

  • Inject styles or logic early enough to prevent the header/footer flash,

    without modifying the theme files?

1 Like
2

Hi there,

This is an quite an interesting problem! I imagine it’s more evident on devices with a slower internet connection.

Have you tried supplementing your app proxy with a theme app extension?

I imagine an app embed with "target": "head", that renders a snippet with the CSS you shared will work well since it will have loading priority that way :slight_smile:

More information on theme app extensions here.