Skip to main content

Overriding the My Account Page

The My Account page is the central hub for user profile management. You can override this page to show custom user details (including metafields) and add personalized navigation links.

Key Hooks​

  • useCurrentUser: Fetches the current user's profile data, tags, and metafields.
  • useUser: Provides authentication status and login/logout methods.

Customization Guide​

1. Define the Page Schema (page.schema.js)​

Decide which blocks you want to show on the account page. A common setup includes a profile header and a list of links.

const MyAccountSchema = {
  blocks: [
    {
      name: 'shopify/profile-header',
      attributes: {},
    },
    {
      name: 'custom/account-links',
      attributes: {},
    },
  ],
  title: 'My Profile',
};
export default MyAccountSchema;

2. Map the Blocks (blocks.schema.js)​

Map the block names to your custom React components.

import ProfileHeader from './components/ProfileHeader';
import AccountLinks from './components/AccountLinks';

const MyAccountBlocks = [
  {
    name: 'shopify/profile-header',
    View: ProfileHeader,
  },
  {
    name: 'custom/account-links',
    View: AccountLinks,
  },
];

export default MyAccountBlocks;

3. Build the Profile Header (ProfileHeader.js)​

Use useCurrentUser to display data like the user's name or loyalty points (stored in metafields).

import React from 'react';
import { useCurrentUser } from '@appmaker-xyz/shopify';
import { Layout, ThemeText } from '@appmaker-xyz/ui';

const ProfileHeader = () => {
  const { data: user, isLoading } = useCurrentUser({});

  if (isLoading) return null;

  return (
    <Layout>
      <ThemeText size="xl" fontFamily="bold">
        Hello, {user?.firstName}
      </ThemeText>
      <ThemeText>{user?.email}</ThemeText>
    </Layout>
  );
};

export default ProfileHeader;

Theme Integration​

For complex themes, follow this modular structure to manage your pages and blocks efficiently.

1. Collect Your Page Schema (src/pages/index.js)​

Export all your custom page schemas in one central object:

import MyAccountSchema from './MyAccount/page.schema';

export const pages = {
  // ... other override pages
  MyAccount: MyAccountSchema,
};

2. Collect Your Block Components (src/blocks.js)​

Merge your block definitions into a single array for the entire theme:

import MyAccountBlocks from './pages/MyAccount/blocks.schema';

export const blocks = [
  // ... blocks from other pages
  ...MyAccountBlocks,
];

3. Register the Theme (src/index.js)​

Assemble everything in your main entry point and register the theme:

import { registerTheme } from '@appmaker-xyz/core';
import { pages } from './pages';
import { blocks } from './blocks';

const Theme = {
  id: 'my-theme',
  pages,
  blocks,
  activate: () => {
    // Theme activation logic
  },
};

registerTheme(Theme);