Shopify: Customer Accounts UI Extensions

New Customer Accounts have B2B support and Shopify provides the same customization mechanism as Checkout, where you can use Checkout UI extensions. But Customer Accounts UI extensions have one significant advantage, they work on all plans (except for B2B features). Checkout UI extensions are only available to online stores with the Shopify Plus plan and higher.

The new customer account UI extensions allow developers to create custom features or pages that store owners can install in designated places (called extension targets) on the sites “Order Index”, “Order Status” and “Profile” in customer accounts or add completely new pages. These extensions are part of the developer preview of Checkout and Customer accounts, so they can be used for testing, but the changes cannot be published before the official release.

API extensions

APIs allow customer account UI extensions to retrieve information about the customer or related objects and perform various actions. For example, you can use the API to retrieve a customer’s previous orders to offer related products as an upsell. Other places from which you can get data are metafields or gift cards. Extensions use JavaScript to read and write data and trigger external services, and natively render UIs created using Shopify’s checkout and customer account components.

UI components

Extensions declare their interface using supported UI components. Shopify renders the UI natively, making it powerful, accessible, and working in all supported browsers. As with the Checkout extension, you can use the predefined components offered along with the Checkout components themselves.

The components are designed to be flexible, allowing you to layer and combine them to create highly customized application extensions that work seamlessly within the customer account environment. Components that adopt merchant branding and CSS settings cannot be changed or overridden. You can use checkout and customer account components to create extensions.

How can you improve your customer account pages?

• Personalized product recommendations
  You can now improve the default order index page that customers go to after logging into their account to see their order history by adding product recommendations to increase conversion. 

• Loyalty program reminders
  The customer profile can be customized to show the customer’s current loyalty points balance. This reminder is a good way to encourage them to make further purchases. At the same time, a banner with a discount code (or other promotional offer) can be added to the order index page.

• New customer service options
  You can also extend the order status page, for example to allow customers to request an exchange or report a problem. This will free up the hands of your customer service and make the customer feel more in control of the order.

• Improved customer profiles
  The more data you have about your customers, the better you can personalize their shopping experience. Consider expanding the profile to include additional data, such as a customer’s favorite color or clothing size.

• Wishlist
  In addition to optimizing existing pages, you can create entirely new ones, such as a “Wishlist” page where customers can save their favorite items as they browse and choose from them later.

Základní kroky pro vytvoření UI extension

Example

Editing the user profile panel

Here is a basic code example for the Customer UI extension that will display a customized user profile panel:

import { extend } from '@shopify/admin-ui-extensions';

extend('Admin::Product::SubscriptionPlan::Add', (root, api) => {
  const group = root.createComponent('Group');
  const textField = root.createComponent('TextField', {
    label: 'Profile bio',
    onChange: (value) => console.log(`New bio: ${value}`),
  });

  group.appendChild(textField);
  root.appendChild(group);

  root.mount();
});

This code creates a text field on the profile page where users can edit their bio. Once the user has inserted the text, the change will be recorded via the console.

For more information and advanced tutorials, you can visit the Shopify Customer UI Extensions documentation.