How to Edit the Landing Page (Home Page) of Your Shopify App

Once you’ve created your Shopify app using the Remix template, the default landing page lives inside the file:

app/routes/_index.jsx

This file is responsible for what the user sees when they open your app inside the Shopify Admin. Here’s how you can locate and edit it:

📁 Step 1: Navigate to the File

1. Open your app folder in Visual Studio Code.
2. In the file sidebar, expand the app folder.
3. Then open the routes folder inside it.
4. Look for a file called _index.jsx — this is your home page.

Shopify uses the Remix framework, and in Remix, the _index.jsx file under routes acts like the homepage (/).

✏️ Step 2: Edit the Content

The page is built using Shopify’s Polaris component library and uses a React-based structure. Here’s a quick look at how the file is set up:

export default function Index() {
  return (
    <Page>
      <TitleBar title="Remix app template">
        <button variant="primary">Generate a product</button>
      </TitleBar>
      <Text as="h2">Congrats on creating a new Shopify app 🎉</Text>
      {/* More Polaris components follow... */}
    </Page>
  );
}

You can change the heading, edit the buttons, add your own content, or completely replace the layout with your own design.

For example, to change the heading:

<Text as="h2">Welcome to Beatifyy License Manager 🌟</Text>

💡 Pro Tip:

You can also add custom logic in this file, such as fetching data, handling GraphQL mutations, and more.

Example: You might see code like this already included to generate a product:

const generateProduct = () => fetcher.submit({}, { method: "POST" });

Feel free to remove, customize, or expand this based on what your app should do on the home page.

✅ You’re in Control

Now that you know where the landing page lives, you can customize it to reflect your app’s branding, purpose, and features. Whether it’s showing license stats, a user dashboard, or links to features — it all starts with editing _index.jsx.

Happy editing! 🎨