Customization

The Account Area serves as a central hub for users to manage their orders, subscriptions, and personal settings. Customizing this area allows businesses to enhance usability, align it with their brand identity, and meet specific customer needs. The following customization options outline how to improve the user experience while supporting business goals.

Navigation & Layout: Structuring the Experience

A well-structured Account Area ensures users can quickly find and manage their information. Businesses can tailor the layout to their needs by:

• Rearranging Sections – Modify the order of Orders, Subscriptions, and Profile based on priority.
• Custom Tabs & Labels – Rename sections to align with brand terminology (e.g., “My Purchases” instead of “Orders”).
• Hiding Unused Sections – If subscriptions aren’t offered, the Subscriptions tab can be disabled for a cleaner UI.\
  typescript

  Copy

  // ~/components/account/SFAccountTabs.vue
  
  import { useI18n } from '#i18n'
  import { computed } from 'vue'
  
  const { t } = useI18n()
  
  // The order can be easily changed by changing the item to a desired array position.
  // Furthermore, the title can be changed within the translation keys JSON file.
  const tabs = computed(() => [{
      to: routeList.orders,
      active: route.fullPath.includes(routeList.orders.path),
      title: t('my_account.tabs.orders'),
    },
    {
      to: routeList.subscriptionOverview,
      active: isActive(routeList.subscriptionOverview),
      title: t('my_account.tabs.subscriptions'),
    },
    {
      to: routeList.profile,
      active: isActive(routeList.profile),
      title: t('my_account.tabs.profile'),
    },
  ])
  

Order Management: Enhancing Clarity & Functionality

The Orders section can be optimized to provide a clearer overview and a more intuitive reordering process.

• Order Status Labels – Add statuses (e.g., “Processing”, “Delivered”) for better clarity.
• Downloadable Invoices – Allow users to download invoices for accounting or record-keeping purposes. This can be done using the Get Order Invoice method. For more details, refer to the documentation here.

Profile & Security: Strengthening Account Management

The Profile section should be both secure and flexible, allowing users to easily manage their details.

• Custom Profile Fields – Add fields like loyalty program ID or preferred language.
• Phone Number Verification – Allow users to add and verify a phone number.