Our Custom Branding feature lets you customize client-facing portions of Wodify to match your business' branding. You can customize the color scheme, header image, and more.
Note: This feature will be included as a part of the Promote tier but can be purchased as an add-on on other pricing tiers.
In this article, we will cover:
With a dynamic simulator, this will showcase all your branding changes with a real-time app preview. This allows you to interact and demonstrate how the customizations appear across devices, ensuring a consistent user experience for your business.
- It enables you to test color combinations and simulate light and dark mode appearance, ensuring your colors accurately represent your brand, and are easy to read!
How to Access Custom Branding
- Go to Digital Presence > Custom Branding
On this page you can choose your primary colors, customize your Loading screen and header color, upload your logos, and choose your icon customization.
Customizing Primary Color
You have the option to customize for both Light and Dark mode. This will be the color of the buttons and link text.
- You will want to select the color of the button as well as the color of the text
Customizing Loading Screen, Header, and Logos
Loading Screen and Header Color:
- This will be the color of the loading screen and the header in the Wodify app and Online Sales Page
- Click into the Hex Code Box to select
Logos
Horizontal Logo
- This will be the primary logo used throughout Wodify, including in the header of the mobile app, Kiosk+, and in WodiFind.
- You can select or drag images to upload directly
- Click into Example to see previews
Square Logo
- This logo will be used in WodiFind and the Mobile app loading screen. NOTE: If you do not provide a square logo, the horizontal logo will be used.
- You can select or drag images to upload directly
- Click into Example to see previews
Note: We now allow more file type options such as JPEGs, PNGs, and SVGs!
Additional Customization
The Workout (Wodify Perform only) icon, the app background color, and the button/link color also can be customized.
To change any of these settings:
- Scroll down to Icon Customization
- Click into the Drop down menu
- Select your Icon
- Click Save
Pro Tips
Loading Screen:
- Custom Image
- We recommend an image that matches the general proportions of a phone (taller than it is wide) so that the image fills up a majority of the screen.
- Background Color
- If your Loading Screen Image is not a .png file with a transparent background, we recommend that you match the color with the outer border of the image to make the loading screen feel cohesive.
- You can do this by figuring out the hex color of your image using a tool like this Chrome extension. Then, use that hex number for the Loading Screen Background Color.
Header:
- Custom Image
- We recommend rectangular images that are square or banner-shaped (wider than they are tall).
- We recommend that you use an image with a height of at least 80 pixels so that it fills the height of the header.
- Header Background Color
- if your Header Image is not a .png file with a transparent background, we recommend that you match the color with the outer border of the image to make the header feel cohesive.
- You can do this by figuring out the hex color of your image using a tool like this Chrome extension. Then, use that hex number for the Header Background Color.
Primary Color/ Light and Dark Mode:
-
Contrast is Key
-
Ensure that there's enough contrast between the foreground (text) and background. Tools like the Web Content Accessibility Guidelines (WCAG) contrast checker can help.
-
-
Avoid Pure Black or White
-
For dark mode, rather than using pure black, opt for a dark gray. Similarly, for light mode, instead of pure white, consider a very light gray. This reduces eye strain.
-
If you need any additional assistance with Custom Branding, feel free to reach out to us at support@wodify.com or via Priority Live Chat in your admin account (Promote only).
Comments