Designing The "My Account" Page

My Account is customers’ personal hub, where they can find their personal information, orders, and membership, and set up preferences. You can customize the layout and content displayed on this page and set up links to other pages, allowing you to showcase information that customers care about and what you want to present to them.

Accessing the My Account Page Editor

From your SHOPLINE admin panel, go to Apps > Shopper App > App Design and click the Design button to access the design editor. From the dropdown menu at the top, select My account.

In the My Account editor, you can configure the features described in the following sections.

Setting Up the Top Navigation

The Top navigation module allows you to customize the components that appear in the header of your My account page. The module includes three configurable sections: Top left icon, Center, and Top right icon. Each section is designed to enhance navigation and improve user engagement.

Available Components for Each Section

Configuring Top Navigation Components

You can configure the Top navigation module by following these steps:

1. Go to the My account page, then click Top navigation to expand the menu.

2. Select the section you want to configure: Top left icon, Center, or Top right icon.

   

3. From the Component type dropdown, choose the component you want to add:

• • Icon: Click + Add icon to insert up to 3 predefined options. 
  • Image: Upload a branding or promotional image as needed.
  • Search bar: Add the predefined search bar to provide customers with a convenient way to browse your site.
  • Page title: Display the title of the My account page.

4. Click Save or Publish to apply your settings.

Announcement Bar

The Announcement bar is positioned at the top of the page and cannot be rearranged. You can choose to sync it with the announcement bar of the homepage, or set it up separately.

• Synchronized from the Announcement bar on the home page: The text, color, and other settings will inherit those set on the homepage and cannot be edited.
• Independently set: you can add up to three announcements, customize the text, color, and other settings, set the publish time, and hide individual announcements.

Registration/Login

You can customize the text on the registration/login card. However, you can’t reposition or hide it

Content Displayed on the Page

You can modify the preset components or add custom ones, with a maximum of 50 components allowed.

• Preset components: The table below lists the preset components along with the actions you can take. Please note that the Member and Message components will only work when the corresponding apps are installed.
  

  Component	Rename	Add Icon	Delete	Reposition	Hide
  Personal Information	✔	✔	✘	✔	✘
  Member	✔	✔	✘	✔	✔
  Order	✔	✔	✘	✔	✘
  Settings	✔	✔	✘	✔	✘
  Help & Information	✔	✔	✘	✔	✘
  Terms & Conditions	✔	✔	✘	✔	✘
  Message	✔	✔	✘	✔	✔

  
  
  

  Note: Learn how to customize the Help & Information and Terms & Conditions section.

• Adding Custom Components: Click Add to select the component you wish to include. You can add custom items or dividing lines. Custom content can be renamed, assigned custom icons, deleted, repositioned, or hidden.
  

Floating Icon

You can add a Floating icon to the My account page that remains visible as users scroll. This icon can be linked to either a live chat service or an event page to enhance customer support efficiency or drive campaign engagement.

There are two configuration options available: If you select Synchronized from the floating icon on the home page, the icon will inherit the homepage settings and cannot be changed. If you select Independently set, you can configure a separate floating icon specifically for the My account page, including the following settings:

• Basic settings: Name the icon, choose its position, and upload an icon image to be displayed in your app.
• Feature type: Select whether the icon links to an Event page or a Live chat feature:
  • If you choose Event page: Set the destination page for redirection.
  • If you choose Live chat: 
    • Select the chat service to use. Shopper App currently supports integration with Shulex, an AI-powered solution for real-time customer support. For more information, refer to this guide.
    • Decide whether to enable the Unread message notice. When enabled, a red dot will appear to notify users of any unread messages.
• Activation time: Optionally, set a schedule for when the floating icon should be published.

Publishing the Design

After completing the edits and confirming that everything looks right in the preview, click the Apply button in the upper right corner to publish your design to the app. If you want to hold the publishing, you can click Save to retain your edits.