shopify-moneycomponent
component
Accepts query a reference to a Money object, and uses the store's country and language market to format it correctly. This component must be a child of a shopify-context component. The component takes a query attribute that defines the context it's a part of, and the field to query. This component produces a text node with the formatted price.
Usually you want a product price to update based on the selected variant, so make sure to reference the field if you are using the shopify-variant-selector component.
See the playground for more complete examples.
Anchor to attributesAttributes
Anchor to query
query
string
required
Defines the context to reference and field to query. For example query="product.title" would query the title of the product context.
Anchor to format
format
The format of the price. Defaults to money.
Was this section helpful?
Example
HTML
<shopify-store
store-domain="https://your-store.myshopify.com"
>
</shopify-store>
<!-- The context is bound to the store -->
<shopify-context
type="product"
handle="handle-of-product"
>
<template>
<h1>
<!-- Query the selected or first available variant's
price. Renders a text node with the formatted price. -->
<shopify-money
format="money_with_currency"
query="product.selectedOrFirstAvailableVariant.price"
></shopify-money>
</h1>
</template>
</shopify-context>