---
title: shopify-attr
description: >-
  Use the `shopify-attr` attribute to bind an attribute to data from Shopify.
  Anywhere within the template of a [shopify-context
  component](/docs/api/storefront-web-components/components/shopify-context),
  you can use the `shopify-attr--attribute-name` attribute to bind an attribute
  to data from Shopify. For example,
  `shopify-attr--href="product.onlineStoreUrl"` can be used to bind the `href`
  attribute to the `onlineStoreUrl` field on a product context.


  See the [playground](https://webcomponents.shopify.dev/playground) for more
  complete examples.
api_name: storefront-web-components
source_url:
  html: >-
    https://shopify.dev/docs/api/storefront-web-components/attributes/shopify-attr
  md: >-
    https://shopify.dev/docs/api/storefront-web-components/attributes/shopify-attr.md
---

# shopify-attr

Use the `shopify-attr` attribute to bind an attribute to data from Shopify. Anywhere within the template of a [shopify-context component](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context), you can use the `shopify-attr--attribute-name` attribute to bind an attribute to data from Shopify. For example, `shopify-attr--href="product.onlineStoreUrl"` can be used to bind the `href` attribute to the `onlineStoreUrl` field on a product context.

See the [playground](https://webcomponents.shopify.dev/playground) for more complete examples.

### Examples

* #### example

  ##### Description

  This is the default example

  ##### HTML

  ```html
  <shopify-store
    store-domain="https://your-store.myshopify.com"
    country="CA"
    language="FR"
  >
  </shopify-store>
  <shopify-context
    type="product"
    handle="your-product-handle"
  >
    <template>
      <!-- the href attribute is bound to the
        product.onlineStoreUrl field -->
      <a shopify-attr--href="product.onlineStoreUrl">
        View product
      </a>
    </template>
  </shopify-context>
  ```