The Currency Component displays a list of available currencies and exposes information about the currently selected currency.

It is commonly used to build currency switchers in navigation bars, headers, footers, or mobile menus.

When a user selects a currency, the component updates the active store currency so product prices are displayed using the selected currency’s value and formatting.

Component Options

All options are added as HTML attributes using the data-v-* syntax.

Option Attribute Description Default
start data-v-start Starting offset for pagination 1
limit data-v-limit Maximum number of currencies to display 1000
status data-v-status 1 = show only active currencies, 0 = show all 1
site_only data-v-site_only Show only currencies enabled for the current site true
default data-v-default Preselect a specific currency; if not set, uses site default null

These options allow you to filter, limit, or override which currencies appear in the component.

Component Properties

Current Currency Properties

The currently active currency is exposed through data-v-currency-info-* attributes:

Property Attribute Description
name data-v-currency-name Currency name (e.g., US Dollar)
code data-v-currency-code ISO currency code (e.g., USD)
value data-v-currency-value Conversion value relative to the base currency (1 = base)
currency_id data-v-currency-currency_id Internal currency ID
sign_start data-v-currency-sign_start Symbol before the amount (e.g., $)
sign_end data-v-currency-sign_end Symbol after the amount (e.g., €)
decimal_place data-v-currency-decimal_place Number of decimals (e.g., 2)
status data-v-currency-status Currency status (1 = active)
updated_at data-v-currency-updated_at Last update timestamp (useful when values are synced via API)

These attributes are ideal for showing the currently selected currency in a dropdown or header.

Available Currencies (Repeatable)

Currencies are listed inside a data-v-currency container.
Each currency exposes the following properties:

Property Attribute Description
name data-v-currency-name Currency name
code data-v-currency-code ISO currency code
value data-v-currency-value Conversion value relative to base currency
currency_id data-v-currency-currency_id Internal ID
sign_start data-v-currency-sign_start Symbol before the amount
sign_end data-v-currency-sign_end Symbol after the amount
decimal_place data-v-currency-decimal_place Decimal precision
status data-v-currency-status Active/inactive
updated_at data-v-currency-updated_at Last update timestamp

Note:
Unlike the Language Component, the Currency Component does not generate translated URLs.
Currency switching affects price display only, not page routing.

Example Usage

<div class="dropdown" data-v-component-currency>
	<form method="post" enctype="multipart/form-data" id="form-currency">

		<a class="dropdown-toggle" 
		   data-bs-toggle="dropdown" 
		   role="button" 
		   title="Currency">

			<span data-v-currency-info-name></span>
		</a>

		<div class="dropdown-menu">

			<div data-v-currency>
			  <button class="dropdown-item" 
			          type="submit" 
			          name="currency" 
			          data-v-currency-code>

				<span class="small text-muted" data-v-currency-sign_start></span>
				<span class="small text-muted" data-v-currency-sign_end></span>
				<span data-v-currency-name></span>
			  </button>
			</div>

		</div>
	</form>
</div>

This example creates a fully functional currency selector that:

  • Displays the current currency
  • Lists all available currencies
  • Submits the selected currency code
  • Updates the store’s active currency for price display