Template Setup Guides

Headstart - Multipurpose Pack Template

Template page link:


Headstart is a multi-purpose pack of no-code templates with everything you need to launch your website quickly without code on the Bubble platform. Use this pack to get your "headstart" on launching your app by incorporating responsive design, a plug-and-play landing page, full catalog, product page, chat, blog, contact form, admin dashboard, user profile, and login pages as well Stripe checkout pages and recurring payments for subscriptions.


  • Responsive design

  • Landing page

  • Subscription payments through Stripe

  • Catalog (includes product filtering by price, adding products to a shopping cart or to a wish list, search)

  • Product page

  • Messaging

  • Blog

  • Contact

  • Dashboard with big variety of visual elements

  • Dreambox

  • User profile

  • Login/signup pages

  • Huge set of UI elements like icons, buttons, paragraphs and many more.

  • Checkout

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

Data Structure


This type takes the users bio data (name, photo, gender, city, etc.) and profile information like the comments and chats or discussions associated with the user. Whenever you mark a product as favorite, it adds this product to the Current User field favorites, which is a list of Products.


Users can add blog posts on the complete startup template and the blog data type takes fields like the blogDescription, blogDiscussions(Discussions), blogImage and the blogTitle


Comments can also be made on a user's post and with this data type, the user can determine recent comments (with the commentNew field that takes either Yes or No), manage replies from the field Replays.


In addition to the built-in fields, this data type has two more fields that include the conversationParts that takes a list of users and the messages that takes the list of messages.

Conversation List

This data takes a list of of the data in the Conversation data type.


Users can have customers and this data type takes the customers details that include age, customer Img(image), full name and phone number.


This type has 2 fields in it; coupon, nominal. Before a user can apply a coupon, admin has to create the coupon in the database. The field coupon takes the coupon's name and nominal the amount of discount to be received.


This type only has one field in it; comments and it takes a list of Comments on a users post.


Users can always get feedback from their customers about products.Feedback data type has two fields inside it that include Customer that contains the customer associated with a feedback and the Feedback Text that houses the feedback itself.

This template provides menu options with description, icons, an image, name and other submenus.


Users in a chatroom can exchange different kinds of messages from file attachments, text messages to picture messages. This type also contains the profile picture of the associated user.


Users can add products to his cart and the order data type takes fields likefinished , orderItems , orderItems, total, coupon, address.


Users products can be ordered by buyers or clients and the orderItem data type holds details such as the count (that is the quantity ordered), the product itself and the total number of ordered items.


This data type takes only one field that contains an image file.


This data type allows the user to fill in details of their products. It contains fields like productSalePrice(takes a number value for price of sale for the product), productReview and more.


Users can also reply to comments on their post. The replays type consist of the comment, replaiesText(reply text) and ReplyNew (this field takes a value of either yes or no and can define a recent reply to a comment).


Users can get reviews about their products and these reviews are stored in the Review data type that includes fields like reviewImg, reviewText and the starCount(this field takes a number value to indicate a products rating).

Users have menus that have sub-menus and within this data type, there is the parent menu and the name of the sub menu.


This data-type allows users to subscribe to a stripePlanName that was pre-populated in stripe. The field stripePrice stores a plan's price and planDescription stores the info about a particular plan. We only have subscriptions in the app. You pay once for the subscription. No recurring payments.


Users can create in database a task, fill it with content(text) and give it a type. It also has a field called select that takes a yes or no value.


The user's created task must always have a name for the task type.


This template has fifteen (15) pages and a good number of reusable elements.


The index page is the landing page for this template. It provides an overview of what the app has to offer; from the call to action for user registration and navigation to the dashboard, to showcasing team members, partners, reviews and more.


The blog page displays all the blog posts and also provides a call to action to add new posts. On clicking the add blog button, the user is provided a form to upload a blog image and fill in the subject and body of the blog. Information entered in this form is stored in the database.


Within this page, a list of conversations are listed and the view format can also be changed to either stretch-to-fit or slack format. There is also a search feature to aid finding messages faster.


The checkout page contains all the products that you've added to your cart. It shows the products along with their name, the quantity that you want to purchase, subtotal and total values of your items.


The contact page provides a form for making inquiry or requests by entering your name, email and information about what you want in the associated input.


On this page you will have listed all the items that you've marked as favorites. You can add them to your cart later if you want to.


This page shows a particular product at a time by displaying it and its essential details. Also within this page, products can be rated with number of stars and reviews collected.


This page shows all the details about a user. Details like the user's image, number of posts, number tasks, users bio data and more. Changes can be made to user data from this page. Also, in this page the user can access the setup guide, Help & support and navigate to the dashboard.


This page allows users to communicate with other users and on clicking on a particular user, you are redirected to a page where the conversation happens.


Users can view a particular article from the list of articles in the blog. This page makes this possible by showing the details about a post, providing social media links to share posts and a comment section to drive discussions on the post.


The catalog page is a dynamic page that lists all products in a Repeating group and each list item has an option for adding it to the cart. Catalog page also has a search feature and a sort-by feature to make filtering of the page content easier.


This page is similar to the usersforchat page but it is optimized for the mobile display.


In this page, the user can make changes to the application.


The user can create products on this page, entering necessary details into the form provided that include product title, price, product image, etc. Information obtained from this form is stored in the product data type.


Login contains within itself the login container and the signup container. The appropriate container is shown depending on the parameter that we receive in the URL when heading to that page.


This is a custom designed page for 404 errors.

Specific References

Things to note

The pages usersforchat and chat_mobile are similar in content but the latter is optimized for a mobile display. Ensure they are are used properly.

Reset_pw is a standard page in bubble and can't be deleted. It is not used anymore since the template has a custom way of reseting a password.

The page Plans is currently not being used in our app. It is a design mockup.

Demo to preview the template