Zid Docs
AppsThemes
Payments
AppsThemes
Payments
Help Center
Slack
  1. Templates Library
  • Getting Started
    • Introduction
    • Theme Development
    • Vitrin Changelog
    • Creating and Managing Theme Presets
    • Legacy Theme Migration
      • Moving to Vitrin Using LLMs
      • Twig to Jinja
      • Breaking Changes
      • Store Settings Mapping
  • Key Concepts
    • Architecture
    • Templates
      • Overview
      • Overridable Templates
      • Legacy Templates
      • Template Replacements
      • Templates Library
        • home.jinja
        • product.jinja
        • cart.jinja
        • category.jinja
        • products.jinja
        • categories.jinja
        • page.jinja
        • blogs.jinja
        • blog.jinja
        • faqs.jinja
        • reviews.jinja
        • questions.jinja
        • shipping_payment.jinja
        • 404_not_found.jinja
    • Settings
      • Schema files
      • Input Settings
      • Media Settings
      • Form Controls Settings
      • Products Settings
      • Additional Settings
      • Conditional Visibility
      • Migrating twig settings schema
    • Localization
      • localization (jinja v. twig)
    • Theme Editor
      • Overview
  • Building with Vitrin
    • Jinja Basics
    • Vitrin's Jinja Extensions
  • Vitrin CLI
    • Introduction
    • CLI Commands
  • Tips & Tricks
    • Performance
  • JS Integration
    • Supporting both Vitrin and Legacy themes
    • Responses & Errors
    • Cart
    • Products
    • Categories
    • Store
    • Account
    • Blogs
    • Options
    • Events
  • Features
    • SDK Popups – Integration Guidelines
    • Custom Styles Guide
    • Gift Card as a Popup
    • Addresses as a Popup
    • Login as a Popup
    • Checkout as a Popup
    • Apple Pay Quick Checkout
    • Region & Language Popup
    • Dynamic Bundle Products
    • Progressive Discounts
    • Bank Discounts
    • Customer Wallet & Cashback
    • Add Preorder Support to Your Theme
    • Display Product Options as Colors or Images
    • Coupon Form Visibility
  • Mobile Apps
    • Scripts
    • Login & Checkout via Page Views
    • Theme Sections Settings
  • API's
    • Authentication
      • Logout
      • Login Status
      • SMS Login
      • Verify SMS Login
      • WhatsApp Login
      • Verify WhatsApp Login
      • Email Login
      • Verify Email Login
      • Register
      • Register Guest
    • Products
      • List Products
      • Search Products
      • Calculate Product Options Price
      • Notify Product Stock Availability
      • Fetch Bundle Offers
      • Fetch Bundle Offers for a Product
      • List My Product Reviews
      • List Product Reviews
      • Create Product Review
      • Update Product Review
      • Delete Product Review
      • List Product Questions
      • Create Product Question
      • Get Product by Slug
      • Get Selection Groups
    • Categories
      • List Categories
    • Checkout
      • Get Cart
      • Remove Cart
      • Duplicate Cart
      • Add Cart Item
      • Empty Cart
      • Update Cart Item
      • Remove Cart Item
      • Upload Cart Input Field
      • Add Gift Card
      • Remove Gift Card
      • Apply Coupon
      • Remove Coupon From Cart
      • Check Coupon Validity
      • Apply Loyalty Points
      • Remove Loyalty Points
      • Preview Rewarded Points
      • List Redemption Methods for Cart
      • Customer’s Loyalty Wallet
      • Customer’s Current Points Balance
      • List Bank Discounts
    • Account
      • Get Profile
      • Delete Account
      • Update Customer Profile
      • Get Addresses
      • Create an Address
      • Get an Address by ID
      • Update an Existing Address
      • Delete Address
      • Get Orders
      • Get Shareable Wishlist Link
      • Get Wishlist
      • Add Products to Wishlist
      • Remove Product from Wishlist
      • Get Address Form Schema
      • Check Product Purchase Status
    • Storefront
      • Store Scripts
      • Pages
      • Blogs
    • Countries
      • Get Countries
      • Get Cities By Country
  1. Templates Library

product.jinja

Route: /products/{slug}
Path Operation: product_details

Variables#

VariableType
productProduct
storeStore
sessionSession

Product Properties#

PropertyDescription
product.idProduct ID
product.nameName
product.slugURL slug
product.descriptionFull description (HTML)
product.short_descriptionBrief description
product.selected_productCurrent variant
product.selected_product.formatted_pricePrice
product.selected_product.formatted_sale_priceSale price
product.selected_product.quantityStock
product.selected_product.in_stockAvailability
product.selected_product.skuSKU
product.selected_product.mediaImages/videos
product.variantsVariants
product.optionsOptions (size, color)
product.ratingRating
product.reviewsReviews
product.questionsQ&A
product.related_productsRelated products
product.bundle_offerBundle offer

Bank Discounts#

To display available bank and card discounts on the product details page, include the Bank Discounts shared template:
Place the Bank Discounts component above the product payment widgets:
Bank Discounts require ZidPay. The component displays Bank Discount offers that the merchant has configured to appear on the product details page.
If the component is not included, available Bank Discounts will not appear on the product details page.
See Bank Discounts for the complete integration requirements.

Example#

{% extends "layout.jinja" %}

{% block main_content %}
  <h1>{{ product.name }}</h1>

  {% if product.selected_product.media %}
    <img src="{{ product.selected_product.media[0].image.full_size }}" alt="{{ product.name }}">
  {% endif %}

  <div class="price">
    {% if product.selected_product.formatted_sale_price %}
      <span>{{ product.selected_product.formatted_sale_price }}</span>
      <del>{{ product.selected_product.formatted_price }}</del>
    {% else %}
      {{ product.selected_product.formatted_price }}
    {% endif %}
  </div>

  {{ product.description | safe }}

  {% include 'vitrin:products/variants_list.jinja' %}

  {% include 'vitrin:shared/bank_discounts.jinja' %}

  <button onclick="zid.cart.addProduct({form_id: 'product-form'})">
    {{ _("Add to Cart") }}
  </button>
{% endblock %}
Modified at 2026-08-20 10:27:57
Previous
home.jinja
Next
cart.jinja
Built with