Shopify Customer Accounts menu

Shopify Apps
1

Hi Team,

I am developing a shopify remix app using typescript and I wanted to know how we can generate a custome menu in customer account page through our app. Please can anyone help me with this?

2

You can’t directly inject custom menus into the classic customer account page through a Remix app.

But Shopify now supports Customer Account UI Extensions, which let apps add custom links, sections, or pages to the new customer account experience.

You can generate one from your Remix app using the Shopify CLI (shopify app generate extension) and select “Customer Account UI Extension.”

Docs here explain the setup step by step: Customer account UI extensions

3

Hi @thejuolaamt

Thanks for your reply. Can you specify which extension in Customer Account UI Extensions can help me generate a menu.

4

Hi @1256

@thejuolaamt is right! To generate a menu link on the new customer account page, you need to use the customer-account.menu-item.rendera extension target.

This target adds a link to the main navigation and is designed to work with a second target, customer-account.page.render, which is the destination page that loads when the link is clicked. You need to define both in your extension’s configuration.

See this for example:

# The menu link itself
[[extensions.targets]]
target = "customer-account.menu-item.render"

# The page the link goes to
[[extensions.targets]]
target = "customer-account.page.render"
handle = "my-app-page"

import {
  reactExtension,
  CustomerAccountAction,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.menu-item.render',
  () => (
    <CustomerAccountAction
      title="My Custom Menu"
      to="../my-app-page" // This links to the page with the handle defined above
    />
  ),
);

This setup will create the menu link and connect it to your custom page, all within the customer account section.

Hope this helps!

5

Hi @PieLab

Thanks for the reply. I had a doubt regarding the path to be given in the menu. Each time we run the command npm run dev, a dynamic URL is generated, so I wanted to know how we can tackle that problem. How can we specify the path there.