Designers/developer can customize the look and feel of both front-end and back-end/my account zingFit template via CSS styling (the HTML layouts are shared by all studios so cannot be altered).

Developers can request a demo from (

Please check out this zingFit Templates website to navigate through zingFit system templates available for styling. Developers can request a ZIP file of the templates at

The schedule has style options for bookable and non-bookable classes. If you look through a number of the websites linkable from the zingFit homepage, you will see a variety of styling designs for this grid. The schedule grid renders as a single-column list-based interface on mobile.

Also, the designer/developer should provide guidance for sub-navigation styling (in blue text to the right) to move between my account pages. The sub-navigation can be displayed within the content container, or as a drop-down menu under the my account in the main navigation.

Pricing Pages

By default, the zingFit system creates a "System Pricing Page" for all class packages (or "series") as well as recurring contracts. The System Pricing Page is accessed if a user attempts to reserve a class and does not have an active series/contract on account. Series and contracts are grouped into Series Types and can be ordered by the studio within each Series Type.

Custom Pricing Pages are an option and are accessed typically only via a "buy" or "pricing" link from the studio website's main navigation. zingFit can code these custom page designs to dynamically pull name, price, expiration, description and other data from the system series and contracts. Custom Pricing Page example, System Pricing Page example.

Feature on the Web - in the Custom Pricing Page example above, you will see different formatting for some pricing blocks. Such featuring as outlined by a designer/developer can be triggered by the studio manager from the zingFit system configuration for any individual series or contract. Feature on the Web can work for System Pricing Pages and well as Custom Pricing Pages.

zingfit CMS provides for any type of navigation a designer/develop may create, but there are some best practices to observe.

Working with the CMS

The zingFit CMS permits studios to manage multiple navigation axes. Examples might be a drop-down menu, a footer navigation or social icon nav. Each of these axes should be specified by the designer/developer as editable

URL slugs are controllable within the CMS as are meta title, and meta description for each content pages.

Calls to Action

While not required by the system, zingFit recommends that a separate navigation axis be created in the header of the page for three main calls to actions, 1) Reserve/Schedule a class, 2) Pricing/Buy a Package, and 3) Sign-up/Register and Sign-in/Login. NOTE: when a studio customer is logged in, zingFit CMS is set by default to dynamically change the "Sign-in/Login" language to "My Account".

Here is an example:

Multi-studio Filtering

The multi-studio navigation is ideal for fitness businesses that have more than one studio location.

The system provides the ability to easily control the ability to hide or display each studio's pricing, class schedule and class descriptions based on the site users explicit studio preference. As the user changes his studio selectoin, specific information for that studio displays. Studios also have the ability to segregate content in the same manner, enabling instructor bios, or location/contact pages, for example, to display differently for each studio.

When a new user arrives at the site and clicks the About page, the page displays as expected (as that page is accessible from all studios), but when the user clicks on the pricing link, a pop-up appears, asking him to choose a studio location. The studio location can be changed at any time by clicking on a link. A cookie is used to remember user studio preference for subsequent visits.


Similar to the multi-studio setup above, zingFit offers the ability to segment the content portion of the studio website by language, allowing site users to switch between languages with a simple click. Note that scheduling pages are available currently in English only.

zingFit Attribution

Designers/developers should make design accommodation for a "powered by zingFit" attribution link in the page footer.