Plugins
Templates

Fitly - Fitness Center Template

Template page link: https://zeroqode.com/template/fitly---fitness-center-template-1560785004563x140748467364603330

Introduction

Fitly - Fitness Center Template is made without code and is suitable for fitness centers or gyms to build their online presence. This fully responsive template can be used to organize gym classes, schedule sessions, assign instructors, enroll and collect payments from gym members, etc.

Fitly will help you build a no-code app to attract a health-conscious audience to the website.

An intuitive admin panel will allow you to easily manage website content and its members.

Features:

  • A slider to showcase different gym images

  • An enroll button to sign users up for membership

  • Admin dashboard to manage classes, schedules, instructors/trainers, etc.

  • Stripe integration to collect payments and subscribe members

  • Newsletter subscription module

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Main Documentation

Data Structure

Users

User's data contains the usual profile info; name, email, phone number, weight, height, password, and other relevant info such as subscription id and customer id.

Class

Class data contains information about classes in the gym such as name, definition, details, class sessions, class instructors, class photos.

Session

Session data contains information relating to the schedule of each class from the scheduled day, date, and time to each class instructor

Instructor

Instructor data contains all the information about the instructor from his/her name to his/her role, brief info about the instructor, a profile picture, and social media handles

Photo

Photo data contains all the pictures in the template, each picture coming with the class they are related to.

Package

This data type has to do with everything about the packages/plans/membership in the gym such as package name, package price, package options, package details, package classes, and plan id.

Config

This data type contains data such as site title, site description, different variants of the site's logo

Pages:

The main pages of the website are the home page, about us page, classes page, schedule page, profile page(for instructors & each class), contact page, a membership page

Index( Home Page)

This is the homepage of this web application. It is fully responsive and has a slide-out mobile menu. It also contains an automatic slider with headings and buttons. The buttons on the hero section contain an enroll button; which shows up a pop-up used in subscribing users to the gym packages on offer.

Next on the index page is an abridged "About us" section that has a button to read more on the about us page. Then, a list of dynamically loaded featured classes is next, each class containing the name of the class, an intro to the class, and a button to view the class properly. This section also contains a button to view all the classes that direct users to the classes page.

The next section contains a brief text on what the company does and an animated countdown that shows clients, classes, coaches, and years of experience. Next is a schedule section, that shows the gym schedule with the classes, its time, and instructor. It also has a button with the name of each class on it; when clicked shows the sessions/schedule of the clicked class.

Next is a testimonial section. This is a slider that shows what clients and coaches have said, it has dynamically loaded information of the testimonial and the testimonial quoter. Next is the instructor section that contains the featured instructors in the gym with their social media profile and a brief intro to the instructor and a button that when clicked shows the full profile of the instructor and all his/her classes.

The Gallery section is next. This section shows some featured photos of the gym users and facilities available. Next is the pricing section for the packages the gym/fitness company offers and an enroll button that shows a pop up for paying for any of the packages. Next is the view class section with a quote and then the subscriber section to subscribe users/clients to getting newsletters and promo offers from the company.

The last section on the home page is the footer section that has a quick intro of the company, quick-links, social media profile of the company, and contact information of the company. It also contains the opening hours of the gym.

About us Page

This is a page that shows all you need to know about the company. It contains a full about us section with a video that shows what the gym is all about. It also contains a “why choose us” section to itemize why the company should be chosen by the users as their go-to gym/fitness place. It also contains a full gallery of pictures and a subscribe section and lastly, the footer.

Classes Page

This page covers all the classes available and their instructors, it also has a hero section that can accommodate headers and details. A list of all the classes is also displayed here and each class containing the class name, little details, time the classes hold, and their respective trainers. It also contains a button that links you to the class in question with its full details

Schedule Page

This page starts with a hero section that takes a background picture, header, and schedule details. Next is the full-body that contains the schedule accompanied by a button that shows the schedule of any clicked class. The schedule contains the name of the class, the instructor, the day the class hold, and a button “join” that opens the pop-up to enroll members and create an account for them simultaneously.

Instructors Page

This page starts with a hero section that takes a background picture, header, and details.

Next is the instructor section that contains the featured instructors in the gym with their social media profile and a brief intro to the instructor and a button that when clicked shows the full profile of the instructor and all his/her classes.

Membership Page

This page starts with a hero section that takes a background picture, header, and details.

Next is the pricing section for the packages the gym/fitness company offers and an enroll button that shows a pop up for paying for any of the packages.

Profile Page

This page starts with the hero section that contains a picture of the instructor, name of the instructor. In the body is the full profile of the instructor and his social/contact information. It also contains the time and classes the viewed instructor/trainer takes.

Programs Page

This page starts with the hero section that contains a picture of the class, the name of the class, and the definition/meaning of the class. The body shows a full detail of the class, its pro and cons, the time the class holds, and the instructor(s) in charge. It also shows a button that links to the other classes

Contact Us Page

This page’s name speaks for itself. It is the page where your clients will get in touch with you or where they could find details about your company’s location.

Account Page

For users/members that have enrolled, they have access to an account page once they log in. This page gives an overview of their account details, their plan details, a button to edit information on the account details, upgrading or downgrading their package, canceling their membership, and out rightly deleting their account.

Specific References

Navigation is straightforward on all pages but the dashboard which has some AJAX-style navigation

Dashboard

The dashboard can be used to make changes to the template such as editing classes, adding new classes, editing instructor, adding and deleting instructors, editing schedule, adding and deleting schedule, adding site details such as logo and description, adding and deleting photos from the gallery, adding and deleting packages.

Subscription

Mailchimp is used in subscribing users by adding them to a subscription list. You can get the API key on the Mailchimp site and deploy it in Bubble. The integration of Mailchimp and adding of the users to the list via email has already been done

Account creation

The enroll/join button shows a popup used in creating an account for the user and simultaneously connect to the stripe payment gateway to enroll new members. A login button is also available to login members to the template. If the password is forgotten, another popup is displayed that collects the email of the current user and resets the password, and allows the user to login with the new password.

Payment via Stripe

This template uses stripe to process payment for packages on the template

Stripe Setup:

Go to stripe.com, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.

Click on developers and then, API keys. copy your API keys. Ensure to use a live API key when your template goes live

Paste the API keys in the stripe connector call in the plugin

Use this doc for reference - https://docs.zeroqode.com/connecting-stripe-payment-using-stripe-plugin

Things to note

The Schedule section

The schedule section on the homepage and the schedule page contains two different groups one for desktop view and one for mobile view. Please be sure to use them setups correctly.

Admin page - full access

The template's admin page contains a list of restrictions, which are created for protecting the data from database removal. To get the full admin access (all elements are clickable and available for changes), please follow this guide.

  1. Remove the Group wrapper alert. You can find this element inside the Group dashboard. Simply remove it:

Group wrapper alert

2. SITE DETAILS - the Save button. You need to deactivate the checkbox "This element is not clickable" and remove the Condition:

SITE DETAILS - the Save button

3. CLASSES - the Add new class button. You need to deactivate the checkbox "This element is not clickable" and remove the Condition:

CLASSES - the Add new class button

4. CLASSES - the Edit/Delete buttons (in RG). You need to deactivate the checkbox "This element is not clickable" and remove the Condition:

CLASSES - the Edit button (in RG)
CLASSES - the Delete button

The instructions for buttons on the SCHEDULE (Add new instructors/Edit/Delete), PACKAGES (Add new instructors/Edit/Delete), INSTRUCTOR (Add new instructors/Edit/Delete), PHOTOS (Add new photo/Delete), MEMBERS (Edit/Delete icons) are the same.

5. In order to restrict the access to the admin page, for all users whose user type is not ADMIN, do the following:

Add the event that will redirect your non admin users to the index page.

6. To provide a user ADMIN rights, do the following:

  • go to the Data > App Data > Users table, find the user to whom you want to grant admin rights;

  • click the "edit" icon on this user's record;

  • in the "admin" field from drop-down choose YES.

  • choose NO, otherwise.

Demo to preview the template