diff --git a/README.md b/README.md index 5f3a3c4..92de621 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ You can navigate these snippets by using the table below. | [Tools](#tools) | [Metaobject detector](#metaobject-detector) | A way to detect the current metaobject on the metaobject template without relying on dynamic ressources. | [Meta](#meta) | [Social share](#social-share) | A small snippet to render all necessary meta tags for social sharing and page previews on socials. | | [UI](#ui) | [Image](#image) | A powerful, less opinionated image snippet built on top of evergreen web technologies for Shopify storefronts. | +| [UI](#ui) | [Shop pay button](#shop-pay-button) | Pure liquid dynamic Shop pay button for express checkout. | | [SEO](#seo) | [Schema website](#schema-website) | Renders the schema.org website JSON-LD for Site Name. | | [SEO](#seo) | [Schema organization](#schema-organization) | Renders the schema.org JSON-LD for Brand and Organization. | | [SEO](#seo) | [Schema article](#schema-article) | Renders the schema.org JSON-LD for a blog post or an article. | @@ -259,6 +260,18 @@ And then set this on the snippet class default value: ... ``` +### Shop pay button + +Pure liquid dynamic Shop pay button for express checkout. + +Copy code from [this file](./ui/shop-pay-button.liquid). + +```liquid +{% render 'shop-pay-button' variant: variant: product.selected_or_first_available_variant %} +``` + +This snippet is based on the [Shopify web component](https://shopify.dev/docs/custom-storefronts/additional-sdks/web-components#buy-with-shop-pay-component). + ## Contributing We'd love your help! Please read our [contributing guide](https://github.com/odestry/.github/blob/main/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements. diff --git a/ui/shop-pay-button.liquid b/ui/shop-pay-button.liquid new file mode 100644 index 0000000..5d493f8 --- /dev/null +++ b/ui/shop-pay-button.liquid @@ -0,0 +1,32 @@ +{% comment %} + Renders a shop pay button for express checkout. + + Accepts: + - variant: {object} first selected product variant. (required) + + Usage: + {% render 'shop-pay-button' variant: product.variants.first %} +{% endcomment %} + +{% if variant and variant != empty %} + + + + +{% endif %}