App form is not showing in theme

Shopify Apps

Topic summary

A developer is building a Shopify app with a form that needs to appear on the storefront via a theme extension. The form displays as a section in the theme editor’s app tab, but the actual form content doesn’t render.

Current Implementation:

  • Using a theme extension with a Liquid block containing a <div> root element
  • JavaScript file attempts to render a React component using ReactDOM
  • Importing the form component directly from app/routes/app._index.jsx (admin route)
  • Wrapping the component in Shopify Polaris AppProvider

Root Cause Identified:
The main issue is attempting to render an admin-side component (app/routes/app._index.jsx) directly on the storefront. These are separate environments with different contexts.

Recommended Solution:

  1. Create a new, standalone React component specifically for the storefront within the extension folder
  2. Avoid using Shopify Polaris or App Bridge in the storefront component
  3. Set up an App Proxy in shopify.app.toml to bridge storefront and backend
  4. Use the fetch() API to POST form data to the proxy URL
  5. Create a corresponding backend route to handle submissions

This approach properly separates storefront and admin logic.

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

Hello, i am creating an one app that has an form but now what i want is i want to show that app in fronted as an section i am using an theme extension for that and its show me the section in app tab but the error is its not showing any form in that how can i fix that because its an task for me and i want to complete i am searching for solution form last one day but i fail to archive anything please give me an solution.

// /extensions/theme-extension-trade-program/assets/theme-extension-trade-program.js

import ReactDOM from "react-dom/client";
import { AppProvider } from "@shopify/polaris";
import enTranslations from "@shopify/polaris/locales/en.json";
import Index from "../../../app/routes/app._index";

// attach to window so Liquid inline script can call it
window.renderTradeProgramForm = () => {
  const container = document.getElementById("trade-program-form-root");
  if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(
      <AppProvider i18n={enTranslations}>
        <Index />
      </AppProvider>,
    );
  }
};



// /extensions/theme-extension-trade-program/block/trade-program-form.liquid


<div id="trade-program-form-root" {{ block.shopify_attributes }}></div>

<script src="{{ 'theme-extension-trade-program.js' | asset_url }}" async></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.renderTradeProgramForm) {
      window.renderTradeProgramForm();
    }
  });
</script>
{% schema %}
{
  "name": "Trade Program Form",
  "target": "section"
}
{% endschema %}


and main form is in  app/routes/app._indiex.jsx all my form actions and other functionality is here.

Thank you in advance.

1 Like
2

Hi @user198

I believe that the core problem is that you’re trying to render a component from your app’s admin (app/routes/app._index.jsx) directly on the storefront. These are two separate environments and that will not work.

Here is what you can try:

  1. Create a New Component: Inside your extension folder (/extensions/theme-extension-trade-program/), create a new, simple React component specifically for the storefront form. Do not use Shopify Polaris or App Bridge in it.
  2. Update Your JS: In your theme-extension-trade-program.js file, import and render this new component instead of the one from your app/routes.
  3. Use an App Proxy: To handle the form submission, set up an App Proxy in your shopify.app.toml file. This creates a secure URL bridge from the storefront to your app’s backend.
  4. Fetch Data: In your new React component, use the fetch() API to POST the form data to your App Proxy URL (e.g., /apps/trade-program/submit). You will then need a corresponding backend route to handle this request.

This pattern correctly separates your storefront logic from your admin logic.

Hope this helps!

1 Like