Object Reference

Objects are template variables you can use to dynamically populate templates in your storefront theme. See documentation below and details of available template objects and their properties.

Global Objects

Global objects are available across all templates and pages enabling theme developers to create dynamic custom pages powered by the store data.

currencies

Returns a list of active storefront currencies you can iterate over, see currency.

Example Usage

Example Storefront Change Currency Form
{% if currencies and currencies|length > 1 %}
<li>
    <form action="{% url 'core:set-currency' %}" method="post" id='set-currency' class="px-2">
        {% csrf_token %}
        <select class="form-select form-select-sm" name="currency">
            {% for currency in currencies %}
            <option value="{{ currency.code }}" {% if request.CURRENCY_CODE == currency.code %} selected {% endif %}>
                {{ currency.symbol }} {{ currency.code }}
            </option>
            {% endfor %}
        </select>
    </form>
</li>
{% endif %}

languages_active_storefront

Returns a list of active storefront languages you can iterate over, see language.

Example Usage

Example Storefront Change Language Form
{% if languages_active_storefront %}
<li>
    <form action="{% url 'set_language' %}" method="post" id='set-language' class="px-2">
        {% csrf_token %}
        <input name="next" type="hidden" value="{{ language_neutral_url_path }}">
        <select class="form-select form-select-sm" aria-label="language" name="language">
        {% for language_code, name in languages_active_storefront %}
            <option value="{{ language_code }}" {% if request.LANGUAGE_CODE == language_code %} selected {% endif %}>
                {{ name }}
            </option>
        {% endfor %}
        </select>
    </form>
</li>
{% endif %}

menus

Allows you to access a menu's items by it's code to iterate over to generate a menu from the backend, see menu items.

Example Usage

Example Dynamic Menu
{% for item in menus.header_menu.items %}
    {% if item.level > 0 %}
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle {% if item.child_active %}active{% endif %}" href="{{ item.url }}">{{ item.name|title }}</a>
            <ul class="dropdown-menu">
                {% for child_item in item.items %}
                    {% if child_item.level > 0 %}
                        <li>
                            <a class="dropdown-item dropdown-toggle {% if child_item.child_active %}active{% endif %}" href="{{ child_item.url }}">{{ child_item.name|title }}</a>
                            <ul class="dropdown-menu dropdown-submenu">
                                {% for grandchild_item in child_item.items %}
                                <li>
                                    <a class="dropdown-item {% if grandchild_item.current %}active{% endif %}" href="{{ grandchild_item.url }}">
                                    {{ grandchild_item.name|title }}
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                        </li>
                    {% else %}
                        <li>
                            <a class="dropdown-item {% if child_item.current %}active{% endif %}" href="{{ child_item.url }}">
                                {{ child_item.name|title }}
                            </a>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </li>
    {% else %}
        <li class="nav-item">
            <a class="nav-link {% if item.current %}active{% endif %}" href="{{ item.url }}">{{ item.name|title }}</a>
        </li>
    {% endif %}
{% endfor %}

tip

Storefront Menus can be up to 3 levels, ensure your custom menu supports 2 nested menu item levels, see child and grandchild above.

products

Returns a list of products you can iterate over, see product.

Example Usage

Example Storefront Products Query and Loop
{% where products 'title' 'contains' 'featured' as products_filtered %}
{% for product in products %}
<div class="col">
    <div class="card h-100">
        {% with image=product.primary_image %}
        {% image_thumbnail image.original "350x350" crop="center" upscale=True as thumb %}
        <a href="{{ product.get_absolute_url }}">
            <img src="{{ thumb.url }}" alt="{{ product.get_title }}" class="card-img-top">
        </a>
        {% endwith %}
        <div class="card-body d-flex flex-column">
            <div class="card-title">
                <a href="{{ product.get_absolute_url }}" title="{{ product.get_title }}">{{ product.get_title|truncatewords:4 }}</a>
            </div>
            <div class="mt-auto">
                <div class="d-block">
                    {% purchase_info_for_product request product as session %}
                    {% if session.price.exists %}
                        {{ session.price.price|currency:session.price.currency }}
                    {% else %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

product_categories

Returns a list of product categories you can iterate over, see product_category.

Example Usage

Example Storefront Product Categories Query and Loop
{% where product_categories 'id' 'exact' 1 as homepage_categories %}
{% for category in homepage_categories  %}
<div class="col">
    <div class="card bg-light h-100">
        {% with image=category.image %}
        {% if image %}
        {% image_thumbnail image "350x350" crop="center" upscale=True as thumb %}
        <a href="{{ category.get_absolute_url }}">
            <img  src="{{ thumb.url }}" alt="{{ category.name }}" class="card-img-top">
        </a>
        {% endif %}
        {% endwith %}
        <div class="card-body">
            <h5 class="card-title">{{ category.name }}</h5>
            {{ category.description|safe }}
            <a href="{{ category.get_absolute_url }}" class="card-link">Shop now</a>
        </div>
    </div>
</div>
{% endfor %}

posts

Returns a list of blog posts you can iterate over, see post.

Example Usage

Example Storefront Recent Blog Posts Query and Loop
{% for post in posts|slice:"3" %}
<div class="col">
    <div class="card border-0 shadow-sm h-100  d-flex flex-column">
        {% with image=post.featured_image %}
            {% if image %}
            {% image_thumbnail image "400x250" upscale=False crop="top" as thumb %}
                <a href="{{post.get_absolute_url}}"><img src="{{ thumb.url }}" alt="{{ post.title }}" class="card-img-top"></a>
            {% endif %}
        {% endwith %}
        <div class="p-3">
            <div class="card-text text-muted fs-7">{{post.posted_date|date:"M d, Y"}}</div>
            <div class="card-title fs-5"><a href="{{post.get_absolute_url}}">{{ post.title }}</a></div>
            <div class="text-muted">{{ post.content|striptags|truncatechars_html:140  }}</div>
        </div>
    </div>
</div>
{% endfor %}

post_categories

Returns a list of post categories you can iterate over, see post_category.

Example Usage

Example Storefront Post Categories Query and Loop
<ul>
{% for cat in post_categories %}
    <li><a href="{{ cat.get_absolute_url }}">{{ cat.name }}</a></li>
{% endfor %}
</ul>

privacy_policy

Content from store Privacy Policy settings, typically used in a "Privacy Policy" page to automatically pull content in from settings.

Example Usage

{{ privacy_policy }}

request

The current session active request context.

Example Usage

Example Request Object Usage
<!DOCTYPE html>
<html lang="{{ request.LANGUAGE_CODE|default:'en' }}" class="{% block html_class %}{% endblock %}">

<head>
    <link rel="alternate" hreflang="{{ request.LANGUAGE_CODE }}" href="https://{{ request.get_host }}{{ request.path }}" />
</head>

Property	Type	Description
`user`	Object	Current authenticated user, see user.
`cart`	Object	Current cart for the current session, see cart.
`get_host`	String	Current host domain.
`path`	String	Current url path.
`COUNTRY_CODE`	String	Current active geo country code, see geo.
`CURRENCY_CODE`	String	Current active currency code.
`LANGUAGE_CODE`	String	Current active language code.

settings

Theme settings object with stored theme settings values as properties. See theme settings docs.

Example Usage

Example Colors Styles From Theme Settings
<style>
:root {
    --primary-color: {{ settings.theme_primary_color }};
    --accent-color: {{ settings.theme_accent_color }};
}
</style>

store

Returns the store object with general information about the store and the contact details.

Example Usage

Example Store Object Usage
<address>
{{ store.legal_name }}<br>
{{ store.address.line_1 }}<br>
{% if store.address.line_2 %}{{ store.address.line_2 }}<br>{% endif %}
{{ store.address.city }}, {{ store.address.state }} {{ store.address.postcode }}<br>
{{ store.address.country }}
</address>
<p><a href="mailto:{{ store.email }}">Email Support</a></p>

Property	Type	Description
`address`	object	The store address object see address.
`branding`	object	The store branding object, see branding.
`name`	String	General name of the store defined in settings.
`tagline`	String	Store tagline defined in settings.
`legal_name`	String	Legal name of the store.
`phone`	String	Store phone number.
`email`	String	Store email address.
`timezone`	String	Store timezone.
`get_meta_title`	String	Store SEO meta title.
`get_meta_description`	String	Store SEO meta description.

storefront_geos

Returns a list of configured markets, see geos.

Example Usage

Example Storefront Geo Switcher
{% if storefront_geos and storefront_geos|length > 1 %}
<li class="nav-item dropdown">
    <a class="nav-link has-icon dropdown-toggle" id="langCurrencyDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="flag-icon flag-icon-{{ request.COUNTRY_CODE|lower }} me-2 me-md-0"></span>&nbsp;<span class="d-md-none">Language/Currency</span>
    </a>
    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="langCurrencyDropdown">

        <form action="{% url 'core:set-storefront' %}" method="post" id='set-storefront'>
            {% csrf_token %}
            <input name="country" type="hidden" value="" />
            <input name="language" type="hidden" value="" />
            <input name="currency" type="hidden" value="" />
            <input name="next" type="hidden" value="{{ language_neutral_url_path }}">
            {% for geo in storefront_geos %}
                <a class="dropdown-item" href="#" data-country="{{ geo.country.code }}" data-language="{{ geo.language }}" data-currency="{{ geo.currency.code }}">
                    <span class="flag-icon flag-icon-{{ geo.country.code|lower }}"></span>
                    &nbsp;&nbsp;
                    <span> {{ geo.country }}</span>
                </a>
            {% endfor %}
        </form>
    </ul>
</li>
{% endif %}

subscription_terms_and_conditions

Content from store subscription terms and conditions settings, typically used in a "Subscription Terms & Conditions" page to automatically pull content in from settings.

Example Usage

{{ subscription_terms_and_conditions }}

terms_and_conditions

Content from store terms and conditions settings, typically used in a "Terms & Conditions" page to automatically pull content in from settings.

Example Usage

{{ terms_and_conditions }}

Objects

Object have many properties that can be accessed in templates.

address

Property	Type	Description
`line_1`	String	Address line 1.
`line_2`	String	Address line 2.
`city`	String	Address City.
`state`	String	Address State.
`postcode`	String	Address Postcode.
`country`	String	Address Country.

branding

Store branding properties accessed through the store object to leverage within templates.

Property	Type	Description
`logo`	File	Store branding logo, use `.url` to access the file link.
`icon`	File	Store branding icon, use `.url` to access the file link.
`primary_color`	String	Store branding primary color, returns a HEX code.
`accent_color`	String	Store branding accent color, returns a HEX code.

cart

Cart object that contains all of the information about the users currently active cart.

Property	Type	Description
`all_lines`	List	Returns a list of all cart line items.
`num_items`	Integer	Returns the count of the items in the cart.
`is_empty`	Boolean	Returns true/false if the cart is empty or not.
`currency`	Object	Returns the currency of the cart as an object, see currency.
`vouchers`	List	Returns a list of vouchers attached to the cart, see voucher.
`is_tax_known`	Boolean	Returns true/false if the cart tax is known yet or not.
`total_incl_tax`	String	Returns the cart total including tax.
`total_excl_tax`	String	Returns the cart total excluding tax.

Example Usage

<script>
    dataLayer.push({ ecommerce: null });
    dataLayer.push({
        event: 'begin_checkout',
        ecommerce: {
            currency: '{{ cart.currency }}',
            value: '{{ cart.total_incl_tax }}',
            coupon: '{{ cart.vouchers.first.code }}',
            items: [
                {% for line in cart.all_lines %}
                {
                    index: {{ forloop.counter0 }},
                    item_id: '{{ line.product.id|escapejs }}',
                    item_name: '{{ line.product.get_title|escapejs }}',
                    item_brand: '{{ store.name|escapejs }}',
                    item_category:  '{{ line.product.categories.first.name|safe }}',
                    price:  '{{ line.unit_price_incl_tax_incl_discount|unlocalize|escapejs }}',
                    quantity: {{ line.quantity | escapejs }}
                }{% if not forloop.last %}, {% endif %}
                {% endfor %}
            ]
        }
    });
</script>

currency

Currency object accessed through currencies.

Property	Type	Description
`code`	String	Name of the currency, ie `USD`.
`symbol`	String	The symbol of the currency, ie `$`.

country

Country object to access properties about a country, see storefront_geos for example usage.

Property	Type	Description
`code`	String	Two letter ISO 3166 country code.
`name`	String	Full name of the country.

geo

A geo is a combination of a language and currency typically associated with a market, see full example in storefront_geos.

Property	Type	Description
`currency`	object	The currency object, see currency.
`country`	object	The country object, see country
`language`	String	Two letter ISO 639 language code.

image

Product images, see example usage below.

Example Usage

{% with all_images=product.get_all_images %}
{% for image in all_images %}{% image_thumbnail image.original "100x100" crop="center" as thumb %}
    <div id="{{ image.id }}">
        <img src="{{ thumb.url }}" alt="{{ product.get_title }}" class="img-fluid">
    </div>
    {% endfor %}
</div>
{% endif %}
{% endwith %}

Property	Type	Description
`original`	File	The original image file, typically used when creating a thumbnail.
`url`	String	The full CDN link to render the image.

A menu item has properties to support creating dynamic menus configured through the dashboard menu editor.

Example Usage

Example Dynamic Menu
{% for item in menus.header_menu.items %}
    {% if item.level > 0 %}
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle {% if item.child_active %}active{% endif %}" href="{{ item.url }}">{{ item.name|title }}</a>
            <ul class="dropdown-menu">
                {% for child_item in item.items %}
                    {% if child_item.level > 0 %}
                        <li>
                            <a class="dropdown-item dropdown-toggle {% if child_item.child_active %}active{% endif %}" href="{{ child_item.url }}">{{ child_item.name|title }}</a>
                            <ul class="dropdown-menu dropdown-submenu">
                                {% for grandchild_item in child_item.items %}
                                <li>
                                    <a class="dropdown-item {% if grandchild_item.current %}active{% endif %}" href="{{ grandchild_item.url }}">
                                    {{ grandchild_item.name|title }}
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                        </li>
                    {% else %}
                        <li>
                            <a class="dropdown-item {% if child_item.current %}active{% endif %}" href="{{ child_item.url }}">
                                {{ child_item.name|title }}
                            </a>
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </li>
    {% else %}
        <li class="nav-item">
            <a class="nav-link {% if item.current %}active{% endif %}" href="{{ item.url }}">{{ item.name|title }}</a>
        </li>
    {% endif %}
{% endfor %}

tip

Storefront Menus can be up to 3 levels, ensure your custom menu supports 2 nested menu item levels, see child and grandchild above.

Property	Type	Description
`active`	Boolean	Indicates whether the link is currently active.
`child_active`	Boolean	Indicates whether any child link of the current link is active.
`child_current`	Boolean	Indicates whether the URL path matches the URL of a child link of the current link.
`current`	Boolean	Indicates whether the current URL path matches the URL of the link.
`items`	List	Contains the child items belonging to the current menu item.
`level`	Integer	Specifies the hierarchical level of the current menu item.
`name`	String	Represents the display name of the current menu item.
`url`	String	Denotes the URL path for the menu item's href link.

order

Order object available on the order confirmation view, typically used in tandem with javascript conversion snippets through apps or custom theme implementations, see example usage below. Only available in the confirmation step in the checkout/checkout.html template, see Checkout Customization.

Example Usage

<script>
    dataLayer.push({ ecommerce: null });
    dataLayer.push({
        event: 'purchase',
         ecommerce: {
            transaction_id: '{{ order.number|escapejs }}',
            value: {{ order.total_incl_tax | unlocalize | escapejs }},
            tax: {{ order.total_tax|unlocalize|escapejs }},
            shipping: '{{ order.shipping_incl_tax|unlocalize|escapejs }}',
            currency: '{{ order.currency|escapejs }}',
            coupon: '{% if order.voucherapplication_set.first.voucher.code %}{{ order.voucherapplication_set.first.voucher.code }}{% endif %}',
            items: [
                {% for line in order.lines.all %}
                {
                    index: {{ forloop.counter0 }},
                    item_id: '{{ line.product.id|escapejs }}',
                    item_name: '{{ line.title|escapejs }}',
                    affiliation: '{{ store_name|escapejs }}',
                    category: '{{ line.product.categories.first|default:'Uncategorised'|escapejs }}',
                    price: '{{ line.unit_price_incl_tax_incl_discount|unlocalize|escapejs }}',
                    quantity: {{ line.quantity | escapejs }}
                }{% if not forloop.last %}, {% endif %}
                {% endfor %}
            ]
         }
    });
</script>

Property	Type	Description
`number`	String	Order number.
`currency`	String	Order currency.
`lines`	List	List of order line items, see order line.
`user`	Object	The order customer, see user.
`total_excl_tax`	String	Order total excluding tax.
`total_incl_tax`	String	Order total including tax.
`total_tax`	String	Order total tax.
`shipping_incl_tax`	String	Order shipping including tax.
`shipping_excl_tax`	String	Order shipping excluding tax.
`voucherapplication_set`	List	Order voucher discounts applied, see voucher.
`shipping_address`	Object	Order shipping address, see address.
`billing_address`	Object	Order billing address, see address.

order line

Order line object details accessed through an order. See order for example usage.

Property	Type	Description
`product`	Object	Line item product, see product.
`title`	String	The order line title, full product name at time of sale.
`quantity`	String	Product quantity.
`unit_price_incl_tax_incl_discount`	String	Per unit price including tax, including discounts.
`unit_price_excl_tax`	String	Per unit price excluding tax.
`unit_price_incl_tax`	String	Per unit price including tax.

page

Storefront Page object details available in the pages/page.html template and custom page templates.

Property	Type	Description
`title`	String	Page title.
`content`	String	Page content.
`get_meta_title`	String	Page SEO meta title.
`get_meta_description`	String	Page SEO meta description.

paginator

The paginator object is available on "list views" where the items to display are paginated from the backend, works in tandem with page_obj.

Example Usage

{% if paginator.num_pages > 1 %}
<div class="my-3">
    <nav class="store_pagination" role="navigation" aria-label="store pagination">
        <ul class="pagination">
            {% with ''|center:paginator.num_pages as range %}
                {% for _ in range %}
                    <li class="page-item {% if forloop.counter == page_obj.number %}active{% endif %}" {% if forloop.counter == page_obj.number %}aria-current="page"{% endif %}><a class="page-link" href="?page={{ forloop.counter }}">{{ forloop.counter }}</a></li>
                {% endfor %}
            {% endwith %}
            {% if page_obj.has_next %}
            <li class="page-item"><a href="?page={{ page_obj.next_page_number }}" class="page-link">{% t "navigation.pagination.next" %}</a></li>
            {% endif %}
        </ul>
    </nav>
</div>
{% endif %}

Property	Type	Description
`num_pages`	Integer	Number of pages in pagination set.

page_obj

The page_obj object is available on "list views" where the items to display are paginated from the backend, works in tandem with paginator.

Property	Type	Description
`number`	Integer	Current page number.
`has_next`	Object	Next page object.
`has_previous`	Object	Previous page.
`next_page_number`	Integer	Next page number.
`previous_page_number`	Integer	Previous page number.

post

Blog post properties available through global post context and the blog/post.html and blog/index.html templates.

Property	Type	Description
`id`	String	The post ID.
`featured_image`	File	Blog post featured image file, use `.url` to access full file link.
`categories`	List	List of related post categories, see post_category.
`get_absolute_url`	String	A full path link to the blog post.
`title`	String	The post title.
`content`	String	Post content.
`slug`	String	Post url slug.
`get_meta_title`	String	Post SEO meta title.
`get_meta_description`	String	Post SEO meta description.

post_category

Blog post category properties available through global post_categories context and the blog/post.html and blog/index.html templates.

Property	Type	Description
`id`	String	Blog post category ID.
`name`	String	Blog post category name.
`get_absolute_url`	String	Blog post category canonical url link.

product

Product configured in the store.

Property	Type	Description
`id`	String	Product ID.
`title`	String	Product title.
`get_title`	String	Product title.
`get_all_images`	List	List of product images, see image.
`get_description`	String	Product description.
`sku`	String	Product stock keeping unit (sku).
`categories`	List	List of product categories, see product_category.
`parent`	Object	Parent product if product is variant (child).
`is_child`	Boolean	Product structure indicating this is a variant product.
`primary_image`	File	Primary image of the product, use `.url` to access a full file link.
`get_absolute_url`	String	Product canonical url link.
`num_approved_reviews`	Integer	Count of approved product reviews.
`rating`	Integer	Product rating as a number between 1 and 5.
`reviews`	Integer	List of product reviews, see review.
`get_meta_title`	String	Product SEO meta title.
`get_meta_description`	String	Product SEO meta description.

product_category

Product category object.

Property	Type	Description
`id`	String	Category ID.
`name`	String	Category name.
`description`	String	Category description.
`image`	File	Category image, use `.url` to access image link.
`get_absolute_url`	String	Category canonical url link.
`get_meta_title`	String	Category SEO meta title.
`get_meta_description`	String	Category SEO meta description.

price

Product price object.

Property	Type	Description
`currency`	String	Price currency.
`price`	String	Price that will be charged.
`price_retail`	String	Suggested retail price.

review

Product review object.

Property	Type	Description
`id`	String	Review ID.
`title`	String	Review title.
`score`	Integer	Review score.
`user`	Object	The customer that created the review, see user.

user

User in storefront context is the same as "customer".

Property	Type	Description
`id`	String	Customer's unique id.
`first_name`	String	Customer's first name.
`last_name`	String	Customer's last name.
`email`	String	Customer's email address.
`phone_number`	String	Customer's phone number in e.164 format.
`language`	String	Customer's preferred communication language.
`accepts_marketing`	String	Wether or not the customer accepts marketing communications.
`ip`	String	Customer's most recently used IP address.
`user_agent`	String	Customer's most recently used user agent String.

voucher

Voucher object.

Property	Type	Description
`title`	String	Voucher title.
`code`	String	Voucher code.

Global Objects​

currencies​

languages_active_storefront​

menus​

products​

product_categories​

posts​

post_categories​

privacy_policy​

request​

settings​

store​

storefront_geos​

subscription_terms_and_conditions​

terms_and_conditions​

Objects​

address​

branding​

cart​

currency​

country​

geo​

image​

items (menu)​

order​

order line​

page​

paginator​

page_obj​

post​

post_category​

product​

product_category​

price​

review​

user​

voucher​

Global Objects

currencies

languages_active_storefront

menus

products

product_categories

posts

post_categories

privacy_policy

request

settings

store

storefront_geos

subscription_terms_and_conditions

terms_and_conditions

Objects

address

branding

cart

currency

country

geo

image

items (menu)

order

order line

page

paginator

page_obj

post

post_category

product

product_category

price

review

user

voucher