---
title: Web Components
description: Use Web Components to include Shopify features on any website.
source_url:
  html: https://shopify.dev/docs/storefronts/headless/additional-sdks/web-components
  md: https://shopify.dev/docs/storefronts/headless/additional-sdks/web-components.md
---

ExpandOn this page

* [Storefront Web Components](https://shopify.dev/docs/storefronts/headless/additional-sdks/web-components#storefront-web-components)
* [Buy with Shop Pay component](https://shopify.dev/docs/storefronts/headless/additional-sdks/web-components#buy-with-shop-pay-component)
* [Where to get help](https://shopify.dev/docs/storefronts/headless/additional-sdks/web-components#where-to-get-help)

# Web Components

[Web Components](https://www.webcomponents.org/) are a collection of web standards that allow the creation of components that act as standard elements. Web Components encapsulate their style and HTML and are supported by all modern browsers. You can use components as you would use a `<div>` or `<input />`, and can also integrate them with any JavaScript library or framework that works with HTML.

You can use Web Components provided by Shopify to embed certain user interface (UI) components.

Note

Some of Shopify's Web Components haven't been tested on IE11.

***

## Storefront Web Components

Storefront Web Components are ready-to-use custom elements that let you integrate Shopify functionality into any website by embedding HTML code. With these components, you can build:

* Product cards and detail pages

* Collection listings

* Shopping cart with quick checkout

  Learn more and see examples at the [Storefront Web Components playground](https://webcomponents.shopify.dev/playground) or [reference docs](https://shopify.dev/docs/api/storefront-web-components).

***

## Buy with Shop Pay component

The Buy with Shop Pay component allows you to integrate a Shop Pay button on any website for one or more preconfigured products. It directs the buyer to an accelerated buy-it-now checkout flow. Buyers who are already signed in with Shop Pay can review their order and confirm in a single tap. The component uses the [Checkout Links](https://help.shopify.com/en/manual/products/details/checkout-link) functionality and adheres to the [Shop Pay branding guidelines](https://help.shopify.com/en/manual/payments/shop-pay/assets). View an implemented Shop Pay component:

### Attributes

| Attribute | Required? | Description |
| - | - | - |
| `store-url` | Yes | The online store URL. For example, `https://graphql.myshopify.com`. |
| `variants` | Yes | The product variants, separated by commas (the format with quantities `variant_id:quantity` is also supported). You can obtain the product's variant ID either from the [Shopify admin](https://help.shopify.com/en/manual/products/variants/find-variant-id), or through the [Admin](https://shopify.dev/docs/api/admin-graphql/latest/objects/productvariant) or [Storefront API](https://shopify.dev/docs/api/storefront/reference/products/productvariant). |

### Hosting

The Buy with Shop Pay component is hosted on the Shopify CDN:

* `https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.pay-button.esm.js`

### Include and instantiate the component

The following code snippet shows how to include the required JavaScript bundle containing the Web Component, and add it to a web page:

```html
<script src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.pay-button.esm.js" type="module"></script>
...
<shop-pay-button
store-url="https://graphql.myshopify.com"
variants="36607875587"
></shop-pay-button>


<!-- This button includes two variants with different quantities. -->
<shop-pay-button
store-url="https://graphql.myshopify.com"
variants="36607875587:2,36607875459:3"
></shop-pay-button>
```

***

## Where to get help

Shopify's Web Components aren't supported by Shopify support, but there are other places where you can get help.

### [.dev Community](https://community.shopify.dev)

Visit our forums to connect with the community and learn more about the Shopify API and App development.

### [Hire a Shopify Partner](https://www.shopify.com/partners/directory)

Find a Shopify Partner for hire in our ecosystem of talented development agencies.

***

* [Storefront Web Components](https://shopify.dev/docs/storefronts/headless/additional-sdks/web-components#storefront-web-components)
* [Buy with Shop Pay component](https://shopify.dev/docs/storefronts/headless/additional-sdks/web-components#buy-with-shop-pay-component)
* [Where to get help](https://shopify.dev/docs/storefronts/headless/additional-sdks/web-components#where-to-get-help)