Templates#
Templates define how each storefront route is rendered in Zid using Jinja2.
Each template file maps to a specific page type (e.g., product, cart, homepage) and determines the layout, sections, and components shown to customers.
Templates#
Each template in this list links to the Template Library, where you'll find code examples and UI previews.You can name components as sections as you please, however templates and layout files names and directories need to be standardized to something our system recognize.
Core Templates#
| Template | Purpose | Route | Path Operation |
|---|
| home.jinja | Homepage layout with banners, featured collections, or products. | / | home |
| product.jinja | Individual product details page. | /products/{product} | product_details |
| cart.jinja | Shopping cart with items and totals. | /cart | cart_page |
| category.jinja | Single category page with product listings. | /categories/{category} | category_details |
Product Discovery Templates#
| Template | Purpose | Route | Path Operation |
|---|
| products.jinja | General product listing (all products). | /products | list_products |
| categories.jinja | Overview of categories with links. | /categories | list_categories |
Content Templates#
| Template | Purpose | Route | Path Operation |
|---|
| blog.jinja | Displays a single blog post. | /blogs/{slug} | blogs |
| page.jinja | Generic CMS/content page. | /pages/{slug} | pages |
Support Templates#
| Template | Purpose | Route | Path Operation |
|---|
| faqs.jinja | Frequently Asked Questions. | /faqs | faqs |
| questions.jinja | Product-specific Q&A. | /products/{slug}/questions | product_questions |
| reviews.jinja | Customer reviews section. | /products/{slug}/reviews | product_reviews |
| shipping_payment.jinja | Shipping & payment info page. | /shipping-and-payment | shipping_payment |
Utility Templates#
| Template | Purpose | Route | Path Operation |
|---|
| 404_not_found.jinja | Error page for missing content. | Error handler | not_found |
Key Features (All Templates)#
All templates extend the base template layout.jinja:
Common components like header and footer are included automatically.
Support for multilingual content with _( ) translations.
Assets are referenced with the asset_url filter:
Use url_for() filter to generate URLs instead of hardcoding:
{# Generate URL using path operation name #}
<a href="{{ url_for('product_details', slug=product.slug) }}">View Product</a>
<a href="{{ url_for('faqs') }}">Help & FAQs</a>
