1. Building with Vitrin
  • Getting Started
    • Introduction
    • Theme Development
    • Publishing Your Theme
    • Legacy Theme Migration
      • Store Settings Mapping
      • Moving to Vitrin Using LLMs
      • Twig to Jinja
      • Breaking Changes
  • Key Concepts
    • Architecture
    • Templates
      • Overview
      • Template Library
        • home.jinja
        • 404_not_found.jinja
        • account_wishlist.jinja
        • categories.jinja
        • page.jinja
        • reviews.jinja
        • account_addresses.jinja
        • blog.jinja
        • category.jinja
        • product.jinja
        • search.jinja
        • account_orders.jinja
        • blogs.jinja
        • faqs.jinja
        • products.jinja
        • shipping_payment.jinja
        • account_profile.jinja
        • cart.jinja
        • questions.jinja
        • wishlist.jinja
    • Settings
      • Sections
      • Input Settings
      • Media Settings
      • Form Controls Settings
      • Products Settings
      • Additional Settings
      • Conditional Visibility
      • Migrating twig settings schema
    • Localization
      • localization (jinja v. twig)
  • Building with Vitrin
    • Jinja Basics
    • Vitrin's Jinja Extensions
    • Objects Reference
  • Vitrin CLI
    • Introduction
    • CLI Commands
  • Tips & Tricks
    • Performance
  • Features
    • Loyalty
    • Bundle Products
  1. Building with Vitrin

Jinja Basics

Zid themes are powered by the Jinja templating engine. Making it easy to embed dynamic data and logic into your theme design while keeping layouts flexible and reusable.

Check out the full Jinja Documentation to discover all available syntax, tags, filters, and features you can apply to build fully customizable and flexible layouts.

Understanding the Basics#

Jinja uses two main syntax forms:
1.
Output variables โ€” {{ ... }}
Used to display the value of a variable in the template.
2.
Control statements โ€” {{ ... }}
Used for logic, loops, and template structure.
๐Ÿ“š Reference: Jinja Template Basics

Common Jinja Tags#

TagPurpose
extendsInherit from a base template
includeInsert another template inside this one
forLoop over sequences
if/ elif / elseConditional logic
setAssign variables

Template Inheritance (extends and block)#

Use extends to base your template on another (usually a layout), and block to fill in or override sections.
In this example:
The template inherits the overall HTML structure from main.jinja.
The title and content blocks are overridden to provide page-specific content.
๐Ÿ“š Reference: Jinja Template Inheritance

Base Layout Example#

Child templates extend this file and override blocks as needed.

Including Templates (include)#

Use include to insert another templateโ€™s contents, similar to a โ€œcopy-pasteโ€ at render time.
๐Ÿ“š Reference: Jinja Include Statement

Conditional Logic (if, elif, else)#

๐Ÿ“š Reference: Jinja If Statement

Loops (for)#

๐Ÿ“š Reference: Jinja For Statement

Variable Assignment (set)#


Filters#

Filters modify values before rendering. Zid supports Jinjaโ€™s core filters, plus some platform-specific ones.
Examples:
๐Ÿ“š Reference: List of Built-in Jinja Filters

Functions#

Functions perform logic or transformations in templates. Jinja provides built-in functions, and Zid adds platform-specific ones (e.g., url_for, asset_url).
๐Ÿ“š Reference: Built-in Jinja Functions

Null safety#

Jinja templating engine can handle accessing chained null elements safely, however it has limitations
for example trying to iterate on a null element or trying to devide by zero will break the rendering
Jinja provides builtin tests to protect against these mistakes
so you can check if a variable is iterable by testing
๐Ÿ“š Refernce: Jinja's builtin tests
Modified atย 2025-08-17 11:00:09
Previous
localization (jinja v. twig)
Next
Vitrin's Jinja Extensions
Built with