Pages

Templates folder structure

The templates directory is organized to separate complete pages from their reusable components. All full pages (like home, account, features, legal pages) are stored in the root folder, while the partials folder contains specific sections and components that are included within these main pages. This structure makes it easy to maintain and reuse common elements across different pages.

│ templates               
├── additional_designs/        # Storage for alternative design versions and layouts
├── partials/                 # Components and sections used within main pages
│   ├── base.html            # Base template with common structure (head, nav, footer)
│   ├── account_orders_content.html      # Content section for orders page
│   ├── account_profile_content.html     # Content section for profile page
│   ├── feature_content_1.html           # Feature sections included in feature pages
│   ├── home_hero_split_screenshot.html  # Hero section of homepage
│   ├── home_pricing_three_tiers_block.html   # Pricing section of homepage
│   └── ...
├── home.html                 # Homepage
├── 404.html                 # Custom 404 error page
├── 500.html                 # Custom 500 server error page
├── account_profile.html     # Full account profile page
├── account_subscription.html # Full subscription management page
├── feature_main_1.html      # Main feature page
├── privacy_policy.html      # Legal privacy policy page
└── ...             

Customizing pages with reusable components

The template structure allows you to build pages by assembling reusable components. Here's an example of how the landing page home.html is constructed:

{% extends "partials/base.html" %}  # Inherit from base template

{% block custom_content %}
    # Build your page by including components from partials or additonal_designs or add your custom designs
    {% include "partials/header.html" %}               # Navigation header
    {% include "partials/home_hero_split_screenshot.html" %}  # Hero section
    {% include "partials/home_features_screenshot.html" %}    # Features showcase
    {% include "partials/home_stats.html" %}                 # Statistics section
    {% include "partials/home_testimonials_grid.html" %}     # Customer testimonials
    {% include "partials/home_pricing_single.html" %}        # Pricing plans
    {% include "partials/home_faq.html" %}                  # FAQ section
    {% include "partials/home_logo_clouds.html" %}          # Client logos
    {% include "partials/footer.html" %}                    # Footer
    {% include "partials/cookie_banner.html" %}             # Cookie consent
{% endblock %}

Exploring available URLs

A quick way to explore all available pages is to enable Django's debug mode and utilize the helpful 404 debug page.

# .env
DEBUG=True

# Terminal

python manage.py runserver
python manage.py runserver 8001 # to run it on another port

# Here are the main public-facing pages you'll work with:
# Main public pages
'/'                      # Home page [name='home']
'/account/profile/'      # User profile [name='account_profile']
'/account/orders/'      # User orders [name='account_orders']
'/account/subscription/' # Subscription management [name='account_subscription']
'/privacy-policy/'       # Privacy policy [name='privacy_policy']
'/terms-of-service/'     # Terms of service [name='terms_of_service']

# Authentication (provided by django-allauth)
'/accounts/login/'       # Login page [name='account_login']
'/accounts/signup/'      # Registration page [name='account_signup']
'/accounts/password/'    # Password management [name='account_set_password']

Adding new pages

To add new pages:

• Create your view in the appropriate app's views.py
• Add the URL pattern in the app's urls.py
• Create the template in the templates directory

# app_main/views.py
def new_feature(request):
    return render(request, 'new_feature.html')

# app_main/urls.py
urlpatterns = [
    path('new-feature/', views.new_feature, name='new_feature'),
]

Base

The base template serves as the foundational HTML structure inherited by all pages in the application. It implements essential functionality for security, SEO, and modern asset management, ensuring consistency across the entire application.

Key files

templates/
├── partials/
│   └── base.html         # Main base template
static/
└── js/
    └── index.js         # Core JavaScript functionality (mobile menu, etc.)

Usage

Create new pages by extending the base template:

{% extends "partials/base.html" %}

{% block custom_content %}
    # Your page content here
{% endblock %}

Homepage

The homepage (/ or app_main:home) combines essential landing page sections including a hero banner, feature highlights, company stats, customer testimonials, and two pricing sections (one-time purchase and subscription plans). The page also includes a FAQ section, partner logos, and a GDPR-compliant cookie banner.

Key files

templates/
├── home.html                                 # Main home page template
└── partials/                                 # Reusable template components
    ├── header.html                           # Site header navigation
    ├── home_hero_split_screenshot.html       # Hero section with split layout
    ├── home_features_screenshot.html         # Features showcase section 
    ├── home_stats.html                       # Statistics/metrics section
    ├── home_testimonials_grid.html           # Customer testimonials grid
    ├── home_pricing_single.html              # Single pricing plan layout
    ├── home_pricing_three_tiers_block.html   # Three-tier pricing layout
    ├── home_faq.html                         # FAQ accordion section
    ├── home_logo_clouds.html                 # Partner/client logos display
    ├── footer.html                           # Site footer
    └── cookie_banner.html                    # GDPR cookie consent banner

app_main/
└── views.py                                  # Home page view logic
    ├── home()                               # Main home page view

static/
├── js/
│   ├── home.js                          # Home page scripts
│   ├── cookie_banner.js                 # Cookie consent functionality
│   └── partials/subscription_switch_month_annual.js  # Pricing toggle
└── images/
    └── features/
        ├── feature_1.png                    # Feature screenshot 1
        └── feature_2.png                    # Feature screenshot 2

Hero section

Main landing section featuring a split layout with headline, description, and product screenshot.

Template: templates/partials/home_hero_split_screenshot.html

Image: static/images/features/feature_1.png

The starter kit includes multiple hero section variations to suit different needs:

- templates/additional_designs/partials/home_hero_screenshot_centered.html
- templates/additional_designs/partials/home_hero_simple_centered.html
- templates/additional_designs/partials/home_hero_simple_centered_bg_img.html

Features section

Showcase your product's key features in a modern grid layout with icons, descriptions, and optional screenshots.

Template: templates/partials/home_features_screenshot.html

Image: static/images/features/feature_2.png

The starter kit includes another feature section variation to suit different styles: templates/additional_designs/partials/home_features_screenshot_right.html

Stats section

Highlight key metrics and achievements with a clean, grid-based statistics layout. Perfect for displaying important numbers, user counts, or other quantifiable successes.

Template: templates/partials/home_stats.html

Testimonials section

Build trust and showcase user feedback with elegant testimonial layouts featuring customer quotes, avatars, and company logos.

Template: templates/partials/home_testimonials_grid.html

Pricing section

Present your pricing options with clear tiers, feature comparisons, and prominent call-to-action buttons. The starter kit supports both one-time purchases and subscription-based pricing models.

Templates:

- templates/partials/home_pricing_single.html
- templates/partials/home_pricing_three_tiers_block.html

Static file (used to switch between month and annual prices): static/js/partials/subscription_switch_month_annual.js

The starter kit includes other pricing section variation: templates/additional_designs/partials/home_pricing_two_tiers.html

For subscription-based pricing, prices and features need to be configured in the Django admin panel under the SubscriptionPlan model. This ensures consistent pricing display across the site and proper integration with the subscription management system.

FAQ section

Help users find answers quickly with well-organized frequently asked questions and answers in an expandable accordion format.

Template: templates/partials/home_faq.html

The starter kit includes multiple FAQ section variations to address user questions effectively: templates/additional_designs/partials/home_faq_with_categories.html

FAQ content needs to be managed through the Django admin panel under the FAQ model. This allows for easy content updates and category management without touching the code.

Logo cloud section

Display your trusted clients, partners, or media mentions in a clean grid layout to build credibility.

Template: templates/partials/home_logo_clouds.html

Footer section

Complete your landing page with a comprehensive footer containing navigation, social links, and legal information.

Template: templates/partials/footer.html

Adjust the footer to your needs by updating navigation links, configuring languages in settings.py (see Translation section), customizing social media links, and modifying the copyright notice.

Cookie banner section

Implement GDPR-compliant cookie consent management with a customizable banner that informs users about cookie usage and obtains their consent.

Template: templates/partials/cookie_banner.html

Static file (used to handle cookie consent and user preferences): static/js/cookie_banner.js

Authentication

The authentication system overrides the default Django-allauth templates. Our template structure mirrors Django-allauth's directory organization:

templates/
├── account/                    # Core authentication templates
│   ├── login.html             # User login form
│   ├── signup.html            # User registration form
│   └── password_change.html   # Password change form
│
├── allauth/                   # Base allauth templates
│   ├── elements/             # Reusable template elements
│   │   └── ...
│   └── layouts/              # Base layouts for auth pages
│       └── ...
│
└── socialaccount/            # Social authentication templates
    ├── snippets/
    │   ├── login.html        # Social login buttons
    │   └── provider_list.html # List of social providers

Each template maintains Django-allauth's core functionality while providing modern styling with Tailwind CSS and responsive design. These overrides ensure a consistent look and feel across all authentication flows, whether using traditional email/password or social authentication.

Further customization

While PyBoilerplate includes styled overrides for the most common authentication templates, you might want to customize additional Django-allauth templates or modify our existing ones. You can find all original Django-allauth templates in their GitHub repository. To override any template, simply copy it from the repository and place it in your project's corresponding template directory while maintaining the same folder structure.

Features

These pages provide a ready-to-use structure for implementing premium features in your SaaS application. The authentication and payment status checks ensure that only authorized, paying customers can access your premium functionalities. Each feature is protected by:

• Login Authentication: Users must be logged in to access these pages
• Active Payment Status: Users must have an active subscription or valid payment
• Feature-Specific Access: Access is controlled through user-level feature flag has_access that is activated after successful payment processing

Path

- feature-{n}/ or app_features:feature_{n}

Key files

templates/
├── feature_main_1.html      # Template for first main feature
├── feature_main_2.html      # Template for second main feature
└── feature_main_3.html      # Template for third main feature
    
static/js/pages/
├── feature_1.js            # Interactive functionality for feature 1
├── feature_2.js            # Interactive functionality for feature 2
└── feature_3.js            # Interactive functionality for feature 3
               
app_features/
└── views.py               # Feature page views
    ├── feature_1()       # Handles feature 1 display
    ├── feature_2()       # Handles feature 2 display
    └── feature_3()       # Handles feature 3 display

Account

A set of login-required pages where users manage their profile information and order/subscription history.

Path

- account/profile/ or app_main:account_profile
- account/orders/ or app_main:account_orders
- account/subscription/ or app_main:account_subscription

Key files

templates/
├── account_profile.html        # User profile management template
├── account_orders.html         # Order history display template
└── account_subscription.html   # Subscription management template
    
static/js/pages/
├── account_profile.js         
├── account_orders.js         
└── account_subscription.js   
               
app_main/
└── views.py                # Account management views
    ├── account_profile()   # Handles profile page
    ├── account_orders()    # Handles orders page
    └── account_subscription() # Handles subscription page

Related Models

• Order: Purchase history and transaction details
• Subscription: Subscription status and plan information

Resources

The boilerplate provides a flexible resources page designed to serve various types of content such as documentation, blog posts, about pages, and informational content.

Path

- resources/ or app_main:resources

Key files

templates/
└── resources.html           # Template for displaying resources
               
app_main/
└── views.py               # View handling resource display
    └── resources()       # Handles resource page rendering

Legal Pages

PyBoilerplate includes static pages containing standard privacy policy and terms of service.

Path

- privacy-policy/ or app_main:privacy_policy
- terms-of-service/ or app_main:terms_of_service

Key files

templates/
├── privacy_policy.html                     # Privacy policy page template
└── terms_of_service.html                   # Terms of service page template

app_main/
└── views.py                                # Legal pages view logic
    ├── privacy_policy()                    # Privacy policy view
    └── terms_of_service()                  # Terms of service view

Customization

These pages serve as a starting template only and should not be used without proper customization and legal review for your specific use case.

• "BRAND" with your project/company name
• "support@brand.com" with your contact email
• Update the website URL
• Set the correct last update date
• Review and update all placeholder text

• Your specific data collection practices
• The actual third-party services you use (e.g., Stripe, Google Analytics)
• Your target audience and geographical regions
• Your subscription model and data retention policies
• Applicable laws and regulations in your jurisdiction 

Custom Errors Pages

The error handling section provides custom pages for common HTTP errors (404 and 500). These pages ensure users receive clear, branded feedback when encountering errors while maintaining security and providing useful debugging information in development.

Path

- 404/ : shown when requested page is not found 
- 500/ : shown when server encounters an internal error
- payment-error/

Key files

saas/
├── urls.py                 # Error handler URL configurations
│   ├── handler404         # Maps 404 errors to custom view
│   └── handler500         # Maps 500 errors to custom view
│
templates/
├── 404.html              # Not found error template
├── 500.html             # Server error template
└── payment_error.html   # Payment processing error template

app_main/
└── views.py             # Error handling views
    ├── custom_404()     # Handles page not found errors
    ├── custom_500()     # Handles server errors
    └── payment_error()  # Handles payment processing failures