Skip to main content
Reference

UltraCart StoreFront – Elements Theme Template Structure

Introduction​

The Elements Theme for UltraCart StoreFront is built on Velocity Template Language (VTL). Templates are organized into logical categories such as Pages, Checkout, Account, Affiliate, and supporting Containers and Snippets. Merchants typically edit page and item attributes, adjust Velocity directives (#set, #parse), and manage template comments. All content edits should be made within the UltraCart Visual Builder.

Template Categories​

Pages​

These templates define core page types of a storefront:

  • template_home.vm – Home page

  • template_item.vm – Product detail page

  • template_catalog.vm – Catalog/group listing

  • template_blog.vm / template_blog_post.vm – Blog overview and individual posts

  • template_contact.vm – Contact form page

  • template_store_locator.vm – Store locator

  • site_404.vm – Error page

  • Additional specialized layouts for wholesale, order tracking, coming soon, etc.

Checkout​

Checkout templates cover multi-page and single-page flows, as well as supporting steps:

  • access_account.vm, account_login.vm – Access or login screens

  • billing.vm, shipping.vm – Address and shipping entry

  • review.vm, receipt.vm – Order review and confirmation

  • single.vm – Single page checkout flow

  • upsell.vm, special_offers.vm – Upsell and offer pages

  • view_cart.vm – Cart view

  • Error handling, wishlists, digital downloads, and unsubscribe flows are also included.

Account (My Account Portal)​

Templates for managing customer accounts:

  • myaccount_index.vm – Dashboard

  • myaccount_orders.vm, myaccount_order_detail.vm – Order history

  • myaccount_autoorders.vm – Subscription management

  • myaccount_payment.vm / myaccount_shipping.vm – Payment and shipping info

  • myaccount_settings.vm, myaccount_privacy.vm – Settings and privacy management.

Affiliate​

Covers the built-in affiliate program:

  • affiliate_login.vm, affiliate_signup.vm

  • affiliate_partner_index.vm, affiliate_partner_reports.vm

  • Management and ledger pages.

Containers​

Reusable layout blocks:

  • Navigation (header.vm, main-footer.vm)

  • Catalog (group_facets.vm, group_item_list.vm)

  • Checkout (checkout-billing.vm, checkout-review.vm)

  • My Account (myaccount-index.vm, myaccount-reviews.vm)

  • Blog, order tracking, store locator, featured items, sliders.

Snippets​

Small reusable fragments:

  • Core structure (document_top.vm, document_bottom.vm, header.vm, footer.vm)

  • Checkout components (credit card, coupons, items, review, hosted fields)

  • Social (social-links.vm, social-share.vm)

  • Navigation (main_nav.vm, pagination.vm, breadcrumbs.vm)

  • System utilities (error handling, CSRF tokens, title, language selector).

Velocity Template Elements Summary

Each .vm file uses Velocity directives and UltraCart custom annotations.

Common Velocity Elements​

Page Metadata​

Defined at the top of templates:

## uc:contains-velocity="true"
## uc:page-type="item"        ## or "group", "checkout"
## uc:display-items="true"    ## shows items for group/catalog pages
## uc:pagination="true"       ## enables pagination in catalogs
## uc:page-attribute-string="subtitle||.catalog-title"

Examples: template_home.vm, template_item.vm, template_catalog.vm.

Variable Declarations​

Many checkout files declare typed variables:

#* @vtlvariable name="form" type="com.bpsinfo.ultracart.checkout.ui.AccessAccountForm" *#
#* @vtlvariable name="i18n" type="com.bpsinfo.storefront.tobjects.I18nWriter" *#

This provides IDE support and enforces context for the template.

Velocity #set Directives​

Used for assigning values such as page classes and page titles:

#set($bodyClass = "product-page")
#set($pageTitle = $i18n.write("checkout.single.pageTitle", "Checkout"))

Velocity #parse Directives​

Used extensively to include reusable files:

#parse("/snippets/top.vm")
#parse("/containers/header.vm")
#parse("/containers/checkout-single.vm")

JavaScript Embedding​

Inline scripts often reference Velocity variables:

<script type="text/javascript">
  var subtotal = $form.subtotal,
      tax = $form.tax,
      total = $form.total;
</script>

Seen in checkout templates like single.vm.

Conclusion

The Elements Theme is modular, with templates split into Pages, Checkout, Account, and supporting Containers and Snippets. Velocity templates rely on page annotations, variable declarations, #set assignments, and #parse includes to maintain consistency and reusability. Merchants should use the Visual Builder for content edits, with Velocity code primarily reserved for structural or attribute-based adjustments.

Was this page helpful?