Shopify: Customer Accounts UI Extensions
Until now, customer accounts in Shopify were part of the template and could be customized freely. But this is changing with the introduction of New Customer Accounts
![customer_accounts_ui_extensions](https://www.magexo.cz/coGhk58axEfl4/uploads/2024/06/ui_extensions_2.png)
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
- Creating a UI extension: Use the Shopify CLI to create the basic structure for your extension. This tool automates common developer tasks and helps you get started quickly.
- Configuring the extension: Each UI extension requires a shopify.extension.toml configuration file, which contains settings for how the extension works and where it will display in Shopify. For more information, see the documentation for configuring app extensions.
- Localization: localizing the UI extension allows you to customize the extension for different languages and currencies, which is useful for stores operating in different regions. You can define how numbers, currencies and texts should be displayed depending on the user’s language settings. For more detailed procedures, see the section on localization.
- Deployment and testing: after development and localization, the UI extension can be deployed and tested within the development store on Shopify. This allows developers to check how the extension behaves in a real-world environment and whether it interacts correctly with other parts of Shopify. For information on deployment and testing, see the deployment documentation.
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.