Shopify Storefront with Coinbase Commerce checkout

apps/base-docs/tutorials/data.json

@@ -369,7 +369,7 @@
         "duration": "34 min read",
         "checksum": "a0ce01aa1c3097efa7582a74bc73f9ccad03222b25af451be1fde4fcd45c7dd7"
     },
-    "dynaimc-nfts": {
+    "dynamic-nfts": {
         "title": "Building dynamic NFTs",
         "slug": "/dynamic-nfts",
         "description": "A tutorial that teaches how to make dynamic NFTs that evolve based on onchain or offchain actions.",
@@ -393,9 +393,9 @@
         "difficulty": "intermediate",
         "hide_table_of_contents": false,
         "displayed_sidebar": null,
-        "last_updated": "Jun 7, 2024",
+        "last_updated": "Jun 13, 2024",
         "duration": "14 min read",
-        "checksum": "560c0a4dee4f2f69d1abd05c6866942f04d6e3a791d5fd2101fce8b1553c6639"
+        "checksum": "0b1498d415cda6e83031231cd05d42edacd2faa82d68471b2ed09670481a3259"
     },
     "complex-onchain-nfts": {
         "title": "Building onchain NFTs",
@@ -909,5 +909,35 @@
         "last_updated": "Apr 5, 2024",
         "duration": "9 min read",
         "checksum": "96225f883c79832d18459b3e47fd3a0bfd43c7ad6d1a1b1704bf902d33910025"
+    },
+    "shopify-storefront-commerce": {
+        "title": "Deploy a Shopify Storefront with Coinbase Commerce",
+        "slug": "/shopify-storefront-commerce",
+        "description": "Learn how to launch a Shopify storefront that uses Coinbase Commerce as a crypto payment gateway.",
+        "author": "hughescoin",
+        "keywords": [
+            "Shopify",
+            "Coinbase Commerce",
+            "crypto payments",
+            "ecommerce",
+            "Hydrogen",
+            "Oxygen",
+            "USDC",
+            "ocs",
+            "onchain"
+        ],
+        "tags": [
+            "ecommerce",
+            "crypto",
+            "shopify",
+            "onchain summer",
+            "ocs"
+        ],
+        "difficulty": "easy",
+        "hide_table_of_contents": false,
+        "displayed_sidebar": null,
+        "last_updated": "Jun 13, 2024",
+        "duration": "3 min read",
+        "checksum": "810af1759f437cb4c77334a34513378fd1554e0bb8c13b408129df54050cb836"
     }
 }

apps/base-docs/tutorials/docs/5_shopify-storefront-commerce.md

@@ -0,0 +1,99 @@
+---
+title: 'Deploy a Shopify Storefront with Coinbase Commerce'
+slug: /shopify-storefront-commerce
+description: Learn how to launch a Shopify storefront that uses Coinbase Commerce as a crypto payment gateway.
+author: hughescoin
+keywords:
+  [Shopify, Coinbase Commerce, crypto payments, ecommerce, Hydrogen, Oxygen, USDC, ocs, onchain]
+tags: ['ecommerce', 'crypto', 'shopify', 'onchain summer', ocs]
+difficulty: easy
+hide_table_of_contents: false
+displayed_sidebar: null
+---
+
+Deploy a Shopify Storefront with Coinbase Commerce Plugin
+[Shopify](https://www.shopify.com/) provides a robust platform for creating online stores. This tutorial will guide you through setting up a Shopify storefront that integrates with Coinbase Commerce, allowing you to accept cryptocurrency payments.
+
+## Objectives
+
+By the end of this tutorial, you will have a custom storefront with integrated crypto payments, using your existing Shopify products.
+
+You will learn how to:
+
+- Create a Shopify storefront
+- Link your Coinbase Commerce account to Shopify
+- Link Shopify credentials to your storefront
+- Deploy a test site using Hydrogen/Oxygen
+
+## Prerequisites
+
+- Shopify Basic or better
+- Github account
+- Business Coinbase Commerce account | [Sign up](https://beta.commerce.coinbase.com/sign-up)
+
+## Getting Started
+
+### Link Coinbase Commerce to your Shopify store
+
+![shopify-install-commerce.gif](../../assets/images/shopify-storefront-commerce/shopify-install-commerce.gif)
+
+1. Navigate to your admin page: (`https://admin.shopify.com/store/<YOUR-STORE-NAME>`)
+2. Click on Settings (`https://admin.shopify.com/store/<YOUR-STORE-NAME>settings/general`)
+3. Click on the “Payments” tab
+4. Click “Add a payment method”
+5. Click “Search by provider”
+6. Type in “Coinbase” in the search field
+7. Select “Coinbase Commerce”
+8. Click "Install"
+9. Log into your Coinbase account
+10. Click "Activate" to enable the Coinbase Commerce plugin
+
+### Create a Storefront
+
+This creates a new Hydrogen storefront with products that already exist in your Shopify account.
+
+#### Clone the Shopify Demo Store
+
+```bash
+npm create @shopify/hydrogen@latest -- --quickstart
+```
+
+```bash
+cd hydrogen-quickstart
+npx shopify hydrogen dev
+```
+
+#### Link your store and create a new Storefront
+
+```bash
+npx shopify hydrogen link
+```
+
+#### Update Project Environment Variables
+
+```bash
+npx shopify hydrogen env pull
+```
+
+#### Verify Your Site is Running
+
+```bash
+npx shopify hydrogen dev
+```
+
+#### Deploy to Oxygen
+
+Run the following script to deploy your site to Oxygen
+
+```bash
+npx shopify hydrogen deploy
+```
+
+Select **Preview** as the deployment type
+
+Your terminal should display a url like:
+`https://hydrogen-quickstart-20c3648d482c7a17d77d.o2.myshopify.dev/`
+
+## Conclusion
+
+You now have a custom store front with the products from your Shopify account.