E-commerce member components and functions-Domain Names(Domain)-阿里云帮助中心

Add e-commerce member components

In the designer, click Function > E-commerce Member, and select components such as the login control, registration control, login status control, shopping cart control, favorites control, or the mobile-specific Me control.

Note

These components are typically used with the e-commerce member feature in the website backend. For more information, see Configure e-commerce settings for a website.

Configure login control

Select the login control to open the Quick Settings panel, where you can configure its Style, Edit, animation, and layout.

Click the Edit tab. In the panel on the right, you can configure the Set current page as login page switch, text fields under Text Edit (including Account, Password, Login, Register New User, and Forgot Password), the redirection page under Select redirection page after login (for example, the member center), and the Registration link.

Style: Adjust the style for the default and hover states.
Edit: Edit text, set the redirection page after login, specify the registration page link, and configure the opening method.
Animation: Set animation effects.
Layout: Set the size and position.

Configure registration control

Select the registration control to open the Quick Settings panel, where you can configure its Style, Edit, animation, and layout. In the designer, select the registration form component to enter edit mode. The registration form includes input fields for Username, Verification code, Password, and Confirm password, as well as a Register button and a Have an account? Login button. The editing panel on the right provides the following settings: the Set current page as registration page switch, a Registration items list (which includes username and password by default; click Add registration item to add more fields), and the Login link (which defaults to /login).

Style: Adjust the style for the default and hover states.
Edit: Edit text, configure registration items, set the login page link, and configure the opening method.
Animation: Set animation effects.
Layout: Set the size and position.

Configure login status control

Note

The login status control is typically placed in the website header. It is essential for managing access to member-only pages and enabling e-commerce features. To use this control, you must have login and registration pages. The login page must contain a login control, and the registration page must contain a registration control.

Select the login status control to open the Quick Settings panel, where you can configure its Style, Edit, animation, and layout. After selecting the login status component, click the Edit tab. In the Text Edit panel on the right, you can configure the display text for the Login, Register, and Logout fields. In the Login link section, enter the link address (for example, /login) and set the opening method to Open in current window. Similarly, configure the link address and opening method for the registration page in the Registration link section.

Style: Adjust the default and hover styles for the login button, registration button, username text, and logout button.
Edit: Edit text, set the links for the login and registration pages, and configure the opening method.
Animation: Set animation effects.
Layout: Set the size and position.

Mobile: Configure Me control

Note

After a member logs in, they can click this control to open the member center.

When designing for mobile, select the Me control. Click Me or Settings to open the Quick Settings panel, where you can configure its Style, Data, animation, and layout. In the bottom navigation bar of the mobile preview area, click the Me control to enter edit mode. On the Style tab of the properties panel on the right, you can configure properties such as icon style, icon color, font size, and icon size.

Style: Set the icon style, text color, and size.
Data: Edit the text content.
Animation: Set animation effects.
Layout: Set the icon size and position.

Configure shopping cart control

Select the shopping cart control to open the Quick Settings panel, where you can configure its Style, Edit, animation, and layout. After selecting the shopping cart component, click Edit in the toolbar above the component to open the Text Edit dialog box. Enter the display text in the text input field (for example, "My Shopping Cart"). In the Opening Method drop-down list, select an option, such as Open in current window.

Style: Adjust the style for the default and hover states.
Edit: Edit text and configure the opening method.

Note
You can edit the shopping cart page in the product detail page editor. After setup, users can click the shopping cart control on your site to view their cart and proceed to checkout. For more information about product detail pages, see Product Detail Page Settings.
Animation: Set animation effects.
Layout: Set the size and position.

Configure favorites control

Note

When a member is logged in, they can click the favorites control to view their favorite articles and products. To enable this, you must add the 'Favorite Article' control to article detail pages and the 'Favorite Product' control to product detail pages.

Select the favorites control to open the Quick Settings panel, where you can configure its Style, Edit, animation, and layout. After selecting the favorites control, click the Edit tab in the floating toolbar to open the Text Edit dialog box. Modify the display text in the text input field. In the Opening Method drop-down list, select an option, such as Open in current window.

Style: Adjust the style for the default and hover states.
Edit: Edit text and configure the opening method.
Animation: Set animation effects.
Layout: Set the size and position.