ShopEngine を使用すると、顧客がダッシュボードを表示したり、注文やダウンロードを追跡したり、アカウントのアドレスや詳細を編集したりできる「マイ アカウント」ページを簡単に作成できます。このページから、顧客は Web サイトのアカウントにログインしたり登録したりすることもできます。 

通常、「マイ アカウント ページ」には、アカウント ダッシュボード、アカウントの注文、アカウントの注文の詳細、アカウントのダウンロード、アカウントの住所、アカウントの詳細、アカウントのログイン/登録ページが含まれます。 

Let’s get to know how to create each of these pages to create a complete “my account page” for your users with a friendly WooCommerce my account page builder.

1. アカウントダッシュボードページの作成 #

First, you need to create the My Account Dashboard page.

ステップ1: 必要なウィジェットを有効にする #

• ShopEngineへ移動-> ウィジェット
• Make sure that the アカウントダッシュボード そして アカウントのナビゲーション ウィジェットは 有効.
• Click Save Changes

ステップ2: ダッシュボードテンプレートを作成する #

• ShopEngineへ移動-> ビルダー テンプレート
• クリック 新しく追加する

Now, you have to create a マイアカウントダッシュボード template –

• テンプレートを提供する 名前
• Select Template Type: マイアカウントダッシュボード

• を切り替えます Template Activation ボタン
• Select a template or start with a blank template
• クリック Elementorで編集する

Step 3: Customoze My Account Dashboard #

In the editor you can see the account dashboard template and customize it accordingly.

のために account navigation part, you’ll see these settings.
Navigation List –

• List Item Padding: Here, you can adjust the inner spacing of each nav item.
• List Item Margin: Controls the outer spacing around each nav item, currently left empty/unset.
• 枠線の種類: The style of the border is set to Solid.
• 枠線の幅: You can set the border thickness as you wish.
• ボーダの色： The color of the border, currently not set.
• 境界線の半径: Controls how rounded the corners of the nav items are, currently not set.
• List Item Background: The background color of each nav item, currently not set.
• List Item Hover Background: The background color shown when hovering over a nav item, currently not set. Show Circle
• Indicator: A small circle marker before/beside each item is turned on.
• List Color: The overall text/icon color of the list, currently set to gray.

Adjust navigation container –

• ボーダの色： Sets the border color of the navigation container, currently not set.
• Container Padding: Sets the inner spacing of the navigation container as you want.

Similarly, you can style the account dashboard part.

Dashboard Style –

• テキストの色: Sets the color of the general dashboard text, currently set to dark/black.
• Text and Link Font Weight: Adjust the font weight of text and links if you want.
• User color: Sets the color used for the username text, currently set to dark/black.
• User Font Weight: Lets you set the font weight of the username text.
• Link color: Sets the color of links within the dashboard text, currently set to blue.
• Link Hover color: Here, you can change the color of links when hovered, currently set to a lighter blue.
• Link text decoration: Sets the underline style for links, currently set to None.
• タイポグラフィ： Controls the font family, size, and other text styling settings.

Step 4: Preview Dashboard Page #

Once you are done editing your Account Dashboard page, save or publish it.

さあ、に行ってください マイアカウントページ of your website, click on ダッシュボードこれは、顧客がデバイスからアカウント ダッシュボードをどのように表示するかのプレビューです。

However, to build the Account Dashboard page from scratch, you’ll need to drag and drop the アカウントのナビゲーション そして アカウントダッシュボード widgets. And the rest of the customization steps are the same.

2. Create My Account Order Details Page #

ステップ1: 必要なウィジェットを有効にする #

• ShopEngineへ移動-> ウィジェット
• 有効にする 注文詳細 widget are
• Click Save Changes

Step 2: Create a My Account Dashboard Template #

今、 click Add New from ShopEngine’s Builder Templates.

Then, create a マイアカウントダッシュボード template –

• テンプレートを提供する 名前
• Select Template Type: 私のアカウントの注文詳細

• を切り替えます Template Activation ボタン
• 選択する a template or start with a blank template
• クリック Elementorで編集する

Step 3: Customoze My Account Order Details #

Now, you are in the Elementor editor. Here you can customize the template as you wish.

Let’s see, what you can adjust in the order details part.

• 見出し： Controls the styling of the “Order Details” heading, including highlight color, heading color, typography, etc. Also sets the margin below the heading.
• Table and Title: Controls the text color, background, and typography of the order table and title. Also sets horizontal padding (40px) and vertical padding (15px) for the heading.
• Table Body: Controls text color, link color/hover, typography, etc. for the table body content. Also sets border type (Solid), border width (bottom 1px), and row color.
• Download Buttons: Controls padding, margin, border radius, typography, box shadow, color and background (normal/hover) for the download buttons.
• Order Again Button: Controls margin, padding, border radius, typography, box shadow, color and background (normal/hover) for the “Order Again” button.
• Address section: Controls the text color and typography of the address section shown in order details.
• グローバルフォント: Sets the overall font family (currently Barlow) used across this specific widget.

However, to build the Account Dashboard page from scratch, you’ll need to drag and drop the アカウントのナビゲーション そして アカウントダッシュボード widgets. And the rest of the customization steps are the same.

Step 4: Preview Order Details Page #

• さて、My アカウントページ of your website –
• クリック 注文
• クリック ビュー from the right-end side of any order

That’s a preview of how your customers will see the Order details page from their devices.

3.  Create My Account Downloads Page #

ステップ1: 必要なウィジェットを有効にする #

• ShopEngineへ移動-> ウィジェット
• Make sure that the アカウント ナビゲーション そして アカウントのダウンロード ウィジェットは 有効

ステップ2: アカウントダウンロードテンプレートを作成する #

次、 click Add New from ShopEngine’s Builder Templates.

Then, create a マイアカウントダッシュボード template –

• テンプレートを提供する 名前
• Select Template Type: マイアカウントのダウンロード

• を切り替えます Template Activation ボタン
• 選択する a template or start with a blank template
• クリック Elementorで編集する

Step 3: Customoze Account Doenloads Template #

Your account downloads template is ready to personalize from the Elementor editor.

Let’s see, what you can change in the account downloads part.

• Table Heading: Controls the styling of the “Product, Downloads remaining, Expires, Download” header row. Includes text color, background, and typography.
• Table Body: Controls the styling of the table content rows (product name, link, etc.). Includes body background, text/link colors, border type/width, and row stripe settings.
• Download Buttons: Controls the styling of the individual download buttons (like the “Sunglasses” button). Includes padding, border radius, typography, box shadow, and color/background (normal/hover).

Once you are done editing your Account Downloads page, save it by clicking on 公開.

Step 4: Preview Account Downloads Page #

• さあ、に行ってください 私のアカウント page of your website
• クリック ダウンロードこれは、顧客がデバイスからページをどのように表示するかのプレビューです。

4. Create My Account Address Page #

ステップ1: 必要なウィジェットを有効にする #

• Go to ShopEngine ウィジェット
• Make sure that the アカウント ナビゲーション そして アカウントアドレス ウィジェットは 有効

ステップ2: アカウントの住所テンプレートを作成する #

Go to ShopEngine ビルダー テンプレート そしてクリックしてください 新しく追加する –

• テンプレートを提供する 名前
• 選択する テンプレート タイプ： 私のアカウントアドレス

• 有効にする Elementorで編集する

Step 3: Customize Account Address Template #

You can customize account address template in the Elementor editor.

You can utilize these controls to customize account address template.

• Account Address: Lets you choose which type of address form to preview/style – Default, Billing Address Form, or Shipping Address Form.
• Billing & Shipping Address: Controls the styling of the message, title, and address text shown for billing/shipping. Includes color, font size, line height, spacing, and margin for each element.
• Form: Title: Controls the form title shown above the address fields. Includes toggle to enable/disable, color, font size, and margin.
• Form: Label: Controls the styling of field labels (like “First Name”, “Address”). Includes label color, required (*) color, font size, and margin.
• フォーム: 入力: Controls the styling of input fields in normal/focus states. Includes font size, padding, color, background, border type/width/color.
• Form: Submit Button: Controls the styling of the form’s submit button in normal/hover states. Includes typography, padding, color, and background.
• グローバルフォント: Sets the overall font family used across this specific widget.

Once you are done editing your Account Address page, save it by clicking on 公開.

Step 4: Preview Account Address Page #

• さあ、に行ってください 私のアカウント page of your website
• クリック 住所. This is the preview of how your customers will see the page from their devices.

5.  Create My Account Details Page #

ステップ1: 必要なウィジェットを有効にする #

• ShopEngineへ移動-> ウィジェット
• Make sure that the アカウント ナビゲーション そして アカウント詳細 ウィジェットは 有効.

ステップ2: アカウント詳細テンプレートを作成する #

Go to ShopEngine ビルダー テンプレート そしてクリックしてください 新しく追加する –

• テンプレートを提供する 名前
• 選択する テンプレート タイプ： 私のアカウントの詳細

• 有効にする Elementorで編集する

Step 3: Customize Account Details Page #

You are now in the Elementor editor. From here, you can customize the account details template to suit your needs.

Use these controls to customize the account address template.

• ラベルスタイル: Lets you style the field labels with Label Color, Required Color, Typography, Margin etc.
• 入力スタイル: Here you can customize the input fields, adjusting Typography, Input Padding, Text Color, Background Color, Border Type/Width/Color, Border Radius etc.
• 形状： This section controls the form’s legend styling with Legend Color, Typography, Form Outline Color.
• ボタン： Use this to style the submit button, including Button Font Size, Button Color, Background, Border Type/Width/Color/Radius, Padding etc.
• グローバルフォント: Simply lets you set the Font Family for this widget.

Step 4: Preview Account Details Page #

• さあ、に行ってください 私のアカウント page of your website
• クリック アカウント詳細. Here’s a preview of how your customers will see this page on their devices

7. アカウント作成ログイン/登録ページ #

Follow the simple steps.

ステップ1: 必要なウィジェットを有効にする #

• Go to ShopEngine’s ウィジェット
• Make sure that the アカウント ナビゲーション, アカウントフォーム登録、 そして アカウントフォームログイン ウィジェットは 有効.

ステップ2: アカウントログイン/登録テンプレートを作成する #

Go to ShopEngines ビルダー テンプレート and ckick 新しく追加する. Now follow the steps –

• テンプレートを提供する 名前
• 選択する テンプレート タイプ： マイアカウント ログイン/登録

• Activate the Template
• クリック Elementorで編集する

Step 3: Customize My Account Login/Register Template #

You can now customize the account login/register template right from the Elementor editor.

• Account form login: Style the login form’s Label (Color, Required Indicator Color, Font Size, Margin), Input, Button, and Lost Password link.
• Account register form: Style the register form’s Label (Color, Required Indicator Color, Font Size), Input, Message, and Button.

ステップ5: アカウントログイン/登録ページのプレビュー #

さあ、に行ってください 私のアカウント page of your website

に行く ダッシュボード -> をクリックします ログアウト. That shows a preview of how the page will appear to your customers on their devices.