Account Page

The account page displays the user's profile and provides navigation to key account sections such as orders, addresses, and logout.

Page ID

The page ID for the Account page is MyAccount. Use this when registering a replacement page in pages/index.js.

import AccountPage from './account';

const pages = {
  MyAccount: AccountPage,
};

export { pages };

Basic page structure

const MyAccount = {
  title: 'My Account',
  attributes: {
    renderType: 'normal',
    renderInScroll: true,
    backgroundColor: '#FFFFFF',
    scrollViewContentContainerStyle: {
      paddingHorizontal: 6,
      paddingTop: 8,
    },
  },
  blocks: [
    {
      name: 'appmaker/shopify-access-token-checker',
      attributes: {
        user: '{{appStorageState.user}}',
      },
    },
    {
      name: 'shopify/profile-card-item',
      attributes: {},
    },
    {
      clientId: 'my-account-menu-orders',
      name: 'appmaker/actionbar',
      attributes: {
        title: 'Orders',
        appmakerAction: {
          pageId: 'OrderList',
          params: {
            pageData: '{{appStorageState.user}}',
          },
          action: 'OPEN_INAPP_PAGE',
        },
      },
      dependencies: {
        appStorageState: ['user'],
      },
    },
    {
      clientId: 'address-list',
      name: 'appmaker/actionbar',
      attributes: {
        title: 'Address',
        __display:
          '{{!checkIfTrueFalse(plugins.shopify.settings.hide_myaccount_address)}}',
        appmakerAction: {
          params: {},
          action: 'OPEN_ADDRESS_LIST_PAGE',
        },
      },
    },
    {
      clientId: 'my-account-menu',
      name: 'appmaker/actionbar',
      attributes: {
        title: 'Delete account',
        __display: '{{__platformOS === "ios" }}',
        appmakerAction: {
          params: {},
          action: 'OPEN_INAPP_PAGE',
          pageId: 'DeleteAccountConfirmation',
        },
      },
    },
    {
      clientId: 'my-account-menu',
      name: 'appmaker/actionbar',
      attributes: {
        title: 'Log out',
        appmakerAction: {
          params: {},
          action: 'LOGOUT',
        },
      },
    },
  ],
};

export default MyAccount;

Basic Blocks

1. appmaker/shopify-access-token-checker

Validates the user's session. Redirects to the login page if the user is not authenticated.

2. shopify/profile-card-item

Displays the user's profile avatar, name and email.

3. appmaker/actionbar

A reusable list item block used to create navigation entries. Each entry has a title and an optional appmakerAction.

Entry	Action	Notes
Orders	Opens OrderList page
Address	Triggers OPEN_ADDRESS_LIST_PAGE	Conditionally shown based on hide_myaccount_address setting
Delete account	Opens DeleteAccountConfirmation page	iOS only
Log out	Triggers LOGOUT

Customization

Block customization can be done by overriding the block.

Eg: Customizing the profile card

Customize the user profile card by overriding the shopify/profile-card-item block. Create a new component in the ./components folder and register it to the block registry in ./blocks/index.js with the same block name.

{
  name: 'shopify/profile-card-item',
  attributes: {},
}