Review or customize your Achieve Client App design

As a business with the White Label Achieve Client App, you can customize the style and appearance of the app to better reflect your brand. Our live preview tool will let you view your changes as you make them.

Key tips before you begin

  • The content and order of items on the navigation bar can’t be changed. Any changes to these properties could affect the functionality of your app; therefore, only the style of the navigation bar can be customized.
    ​

  • If you sign up for FitVID on Demand after your Achieve White Label app is built, the Videos tab won’t be available in the app. To allow clients to watch videos through the Videos tab on your White Label app, you must contact the Achieve Client App team at achieve@wellnessliving.com.
    ​

  • If your White Label Achieve Client App is already published in Google Play and the App Store, please note the following:

    • Any changes made to the app icon, app name, or splash screen on the App Design page must be emailed to achieve@wellnessliving.com for the changes to be published. Changes to the app icon and splash screen tabs will incur $159 USD customization charges.

    • All other changes are immediately displayed to your clients when they use your Achieve Client App. However, these changes are not reflected in the preview images displayed for your app in Google Play or the App Store.

Customize your Achieve Client App

To customize your White Label Achieve Client App, complete the following:

1. Open the Achieve settings page

Click the App Drawer button then click View All > Achieve.

2. Customize the app icon

Click App thumbnail to customize the icon and name that will appear on a client’s phone after downloading the app.

  • App name – To name your app, enter the name in the App name box. The app name can contain a maximum of 30 characters.
    ​

  • Thumbnail image – To display your logo on the app icon, click the Thumbnail image thumbnail. Drag and drop an image over the window or choose a file from your computer, then click Save. The app icon must be a PNG file with a minimum resolution of 150 x 150 pixels.
    ​

  • Background image

    • To add a background image to your app icon, click the Background image thumbnail. Drag and drop an image over the window or choose a file from your computer’s file browser, then click Save.
      ​

    • To apply a color filter over your background image, click the From and To color chips and select a color. Select two different colors to apply a gradient effect.

3. Customize the splash screen

Click Splash Screen to customize the screen a client will see when launching your app.

  • Logo image – To display your logo in the splash screen, click the Logo image thumbnail. Drag and drop an image over the window or choose a file from your computer, then click Save. The logo image must be a PNG file with a minimum resolution of 150 x 150 pixels.
    ​

  • Background image – To use an image for your splash screen, click the Background image thumbnail. Drag and drop an image over the window or choose a file from your computer’s file browser, then click Save.

    • Background gradient – To apply a color filter over your image, click the From and To color chips and select a color. Select two different colors to apply a gradient effect.
      ​

4. Customize the sign-in screen

Click Sign-in screen to view the customizations made to the screen a client will see when signing in to your app.

  • This section can only be modified by WellnessLiving administrators. To make changes to this section, contact the Achieve Client App team at achieve@wellnessliving.com.

5. Customize the app branding

Click App Branding to set the colors that shape your app's look and feel throughout the app.

  • Header

    • Header color – Sets the background color of the header.
      ​

    • Header font color – Sets the font color of the header.
      ​

  • Brand colors

    • Primary color – Controls the color of all interactive text links and active or selected states throughout the app, including class name links, instructor name links, location links, active filter pills, selected dates, and toggle ON states. The default is the standard WellnessLiving blue (#2463eb).
      ​

    • Secondary color – Controls the background color of buttons throughout the app.
      ​

    • Accent font color – Controls the font color on buttons throughout the app.

6. Customize the navigation

Click Navigation style to customize the navigation bar, the row of icons your clients use to move between tabs at the bottom of the app screen. Set the active and inactive colors to align with your business's palette.

  • Background color – Sets the background color of the navigation bar.
    ​

  • Icons and text color – Sets the color of icons and text in the navigation bar.
    ​

  • Show text under each bottom-nav icon – Set to ON to display a label under each icon in the navigation bar. Set to OFF to show icons only.
    ​

Nav bar items – The navigation bar shows up to six items. Additional active items automatically move to More. Drag an item's handle to reorder it, or move it into More manually. Set an item to OFF to hide it from the app entirely.

Your navigation bar can include Book Now, My Schedule, Store, CAASI, FitVID, FitBUILDER, More, and Home.

  • Book Now is always in the navigation bar and can't be set to OFF or moved to More.
    ​

  • CAASI, FitVID, and FitBUILDER only appear if the corresponding feature is active for your business.
    ​

  • More can't be set to OFF, but can be repositioned in the list.
    ​

  • Home is set to OFF by default. Set to ON to give clients a personalized home screen.
    ​

7. Customize the Home screen (optional)

Click Home Screen to customize the personalized home screen your clients see when they open the app.

  • Logo image – To add a logo to your Home screen, click the Logo image thumbnail. Drag and drop an image over the window or choose a file from your computer, then click Save. The logo image must be a PNG file with a minimum resolution of 150 x 150 pixels.

    • Logo shape – Select the shape the logo should fill from the list.
      ​

  • Hero background image – The large image shown behind your logo at the top of the screen. To display an image in the background, click the Hero background image thumbnail. Drag and drop an image over the window or choose a file from your computer, then click Save.

    • Background gradient colors – Apply a color filter over your image. Select a color for From and To to create a gradient effect.
      ​

    • Hero image darkness – Use this slider to dim the image so your text stays readable. Only applies when an image is uploaded.
      ​

  • Header icon and text color – Set the color of icons and text in the header area of the Home screen.
    ​

  • Button background gradient colors – Set the gradient colors for buttons on the Home screen.
    ​

Home screen sections – Drag a section's handle to reorder it, or set a section to OFF to hide it from your clients' Home screen entirely. The live preview updates as you make changes.

Section

Description

Announcements

Shows your business's announcements in a scrollable carousel.

Your progress

Combines two linked items, Weekly goal and Lifetime visits, into one card. Weekly goal shows the client's attendance streak and progress toward the weekly visit goal they've set. Lifetime visits shows their total visits and progress toward the next milestone. The two items can be set to ON or OFF individually but always move together when reordered.

Upcoming bookings

Shows the client's next upcoming booking, or their most recent past booking if they have nothing upcoming.

Your purchase options

Shows the status of the client's active session passes, memberships, and packages.

Workout of the day

Shows the client's scheduled FitBUILDER workout for the day. Hidden from this list if FitBUILDER isn't active for your business.

Rewards

Shows the client's rewards points and a leaderboard of the top three point earners. Rewards points are hidden from this list if the Rewards program isn't enabled for your business, while the leaderboard is hidden if it's disabled.

Guest Passes

Shows any guest passes the client has to use.

Referral

Invites the client to refer a friend to your business, and shows how many friends they've referred so far.

Quick Actions

A grid of shortcuts to the client's barcode, profile, documents, balance, billing, relationships, rewards, and options to contact or learn more about your business.

8. Customize the book now screen

Click Book Now Screen to customize the screen a client will see when booking a service on your app.

  • Logo image – To add a logo to your Book Now screen, click the Logo image thumbnail. Drag and drop an image over the window or choose a file from your computer, then click Save. The logo image must be a PNG file with a minimum resolution of 150 x 150 pixels.

    • Logo shape – Select the shape the logo should fill from the list.
      ​

  • Hero background image – The large image shown behind your business name at the top of the screen. To display an image in the background, click the Hero background image thumbnail. Drag and drop an image over the window or choose a file from your computer, then click Save.

    • Background gradient colors – Apply a color filter over your image. Select a color for From and To to create a gradient effect.
      ​

    • Hero image darkness – Use this slider to dim the image so your text stays readable. Only applies when an image is uploaded.
      ​

  • Header icon and text color – Set the header icon and text color for the section that appears at the top of the Book Now screen.
    ​

  • Button background gradient colors – Set the gradient colors for buttons such as About Us and Location.

9. Customize the booking confirmation screen

Click the Booking confirmation screen to customize the Booking confirmation message and Purchase confirmation message.

  • Booking confirmation message – Determines the message that appears to clients after booking a service.
    ​

  • Purchase confirmation message – Determines the message that appears to clients after making a purchase.

10. Customize the reviews screen

Click Reviews screen to customize the screen a client will see when viewing your business’s reviews on your app.

  • Display Write a review button – To display a button clients can click to leave a review for your business, set this option to ON. To hide the button, set this option to OFF.

11. Save your changes

When your changes are complete, click Save.

  • A loading screen appears. When it’s completed, click Done!

Did this answer your question?