Page heading not showing in App Home with Polaris web compo

Polaris
1

Hi, I was following the example in Page and I can’t get the page heading to display when the Polaris web component is shown in the app home.

Here is the html. You can also see a hosted version on Polaris Heading Demo

<!DOCTYPE html>
<html>
  <head>
    <title>Polaris Heading Demo</title>
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
  </head>

  <body>
    <s-page heading="Products">
      <s-section>
        <s-text>Hello World</s-text>
      </s-section>
    </s-page>
  </body>

</html>

We see the header when loading the page directly.

Screenshot 2025-12-12 at 8.47.09 PM
Screenshot 2025-12-12 at 8.47.09 PM1438×648 5.15 KB

When I show it on app home, the header does not show.

Screenshot 2025-12-12 at 8.50.06 PM
Screenshot 2025-12-12 at 8.50.06 PM2880×1396 192 KB

I’m using HTML directly with the polaris and app-bridge scripts. Am I doing something wrong?

1 Like
2

Same for me. Can someone give an answer, pleaseeee???

3

Hello @jusleg
Please check if any js error there in the browser console and that is the issue otherwise it is working fine for me.

4

I ran into the same issue after several rounds of testing and debugging. The problem appears to be related to <s-app-nav>.

Below is an example:

<s-app-nav>
  <s-link href="/abc">My page</s-link>
</s-app-nav>

With this setup, when visiting /app/abc, both <s-page heading="Page title"> and <TitleBar title="Page title" /> work as expected.

However, if there is no link inside <s-app-nav>, none of the page titles or headings are shown. That behavior does not make sense.

According to the Shopify developer documentation, the home page should be hidden using rel="home":

<s-link href="/app" rel="home">App home</s-link>

But with this configuration, even the home page of my app cannot display a heading or title.

Is this a bug, or am I missing something?