Plugins
Templates
Blocks
Template Setup Guides

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 health-conscious audience to the website.

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

Users 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 schedule 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, a brief info about the instructor, a profile picture and social media handles

Photo

Photo's 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 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 contains 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 the 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 proper. This section also contains a button to view all the classes which directs 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 its; these 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.

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 package. 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 an 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 out 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 out 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 out 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 package.

Profile Page

This page starts out 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 out with the hero section that contains a picture of the class, 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 were 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, button to edit information on the account details, upgrading or downgrading their package, cancelling their membership and out rightly deleting their account.

Specific References

Navigation is straightforward on all pages but 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 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 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 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

Things to note:

The schedule section on the homepage and in the schedule page contains two different groups one for desktop view and one for mobile view. Ensure they are configured correctly

Demo to preview the template