How to Show a Header Menu Item and Display a Custom Page in Shopify Remix App

Shopify Apps

Topic summary

A developer is building a Shopify app using Remix and wants to add a custom header menu item that navigates to a custom page rendered by their app.

Recommended Solution:

  • Use a Theme App Extension to inject the menu item into the storefront header
  • Implement App Blocks or App Embed Blocks to add the navigation link
  • Point the link to a custom route in the Remix app (e.g., /apps/custom-page)
  • This approach is upgrade-safe and doesn’t require direct theme code modifications

Open Questions:

  • Whether the custom page needs manual theme creation or can be generated dynamically by the app
  • How to display Prisma database data on the custom page

The discussion remains ongoing as the developer seeks clarification on implementation details for dynamic page creation and database integration.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m building a custom Shopify app using Remix and I want to add a header menu item (e.g., “Custom Page”) that, when clicked, navigates to a custom page rendered by my app.

Could someone guide me on the best way to implement this?

  • Should this be done using a Theme App Extension to inject the menu item into the header?

  • Or is there another recommended approach to link the menu item to a custom route handled by the Remix app?

I’d really appreciate any advice, examples, or best practices for achieving this functionality.

2

Hi @greeshma

To add a custom header menu item that links to a route handled by your Remix app, the recommended approach is to use a Theme App Extension. This allows you to safely inject app blocks or links into the storefront without directly modifying the merchant’s theme code.

Here’s how you can approach it:

  • Create a Theme App Extension in your app.
  • Use App Blocks or App Embed Blocks to inject the “Custom Page” link into the header or navigation.
  • Point the link to a custom route in your Remix app, like /apps/custom-page.

This approach keeps your integration upgrade-safe and merchant-friendly.

Thanks

1 Like
3

@Dotsquares Thanks for the response.

Do we need to manually create the custom page in the theme, or can it be created dynamically through our app?

Also, on this custom page, how can we display the data that we’ve saved in the Prisma database?