crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 15:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Documents how to configure Shopify.

Browse Source
This commit is contained in:
Michael Novotny 2023-04-19 13:01:01 -05:00
parent e9a26c2935
commit 40bb0452c0
No known key found for this signature in database
1 changed files with 124 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
README.md
View File

@ -2,24 +2,27 @@
# Next.js Commerce # Next.js Commerce
Next.js 13 and App Router-ready ecommerce template, built with Shopify and Tailwind CSS. > Note: Looking for Next.js Commerce v1? [View the release notes](https://github.com/vercel/commerce/releases/tag/v1).
We will be shortly updating the demo at [demo.vercel.store](https://demo.vercel.store/) with this new version. A Next.js 13 and App Router-ready ecommerce template, built with Shopify, featuring:
Looking for Next.js Commerce v1? [View the release notes](https://github.com/vercel/commerce/releases/tag/v1).
## Features
- Next.js App Router - Next.js App Router
- Optimized for SEO - Optimized for SEO using Next.js's Metadata
- React Server Components (RSCs) and Suspense
- Route Handlers for mutations
- Edge functions
- New fetching and caching paradigms
- Dynamic OG images
- Styling with Tailwind CSS - Styling with Tailwind CSS
- Checkout/Cart with Shopify - Checkout and payments with Shopify
- Themeing with System (Light/Dark Mode) Support - Automatic light/dark mode based on system settings
**_We will be shortly updating the demo at [demo.vercel.store](https://demo.vercel.store/) with this new version._**
## Running Locally ## Running Locally
1. Install Vercel CLI: `npm i -g vercel` 1. Install Vercel CLI: `npm i -g vercel`
2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link` 2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
3. Download your environment variables: `vercel env pull .env.local` 3. Download your environment variables: `vercel env pull .env.local`
```bash ```bash
@ -28,3 +31,114 @@ pnpm dev
``` ```
Your app should now be running on [localhost:3000](http://localhost:3000/). Your app should now be running on [localhost:3000](http://localhost:3000/).
## How to configure your Shopify store for Next.js Commerce
### Add Shopify domain to an environment variable
Create a `SHOPIFY_STORE_DOMAIN` environment variable and use your Shopify domain as the the value (ie. `acme-store.myshopify.com`).
> Note: Do not include the `https://`.
### Accessing the Shopify Storefront API
Next.js Commerce utilizes [Shopify's Storefront API](https://shopify.dev/docs/api/storefront) to create unique customer experiences. The API offers a full range of commerce options making it possible for customers to control products, collections, menus, pages, cart, checkout, and more.
In order to use the Shopify's Storefront API, you need to install the [Headless app](https://apps.shopify.com/headless) in your Shopify store.
Once installed, you'll need to create a `SHOPIFY_STOREFRONT_ACCESS_TOKEN` environment variable and use the public access token as the value
> Note: Shopify does offer a Node.js Storefront API SDK. We use the Storefront API via GraphQL directly instead of the Node.js SDK so we have more control over fetching and caching.
<details>
<summary>View detailed visual walkthrough</summary>
1. Navigate to `https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/settings/apps`.
1. Click the green `Shopify App Store` button.
![Shopify App Store](.github/assets/install-headless-app-01.jpg)
1. Search for `Headless` and click on the `Headless` app.
![Headless](.github/assets/install-headless-app-02.jpg)
1. Click the black `Add app` button.
![Add app](.github/assets/install-headless-app-03.jpg)
1. Click the green `Add sales channel` button.
![Add sales channel](.github/assets/install-headless-app-04.jpg)
1. Click the green `Create storefront` button.
![Create storefront](.github/assets/install-headless-app-05.jpg)
1. Copy and paste the public access token and assign it to a `SHOPIFY_STOREFRONT_ACCESS_TOKEN` environment variable.
![Pubic access token](.github/assets/install-headless-app-06.jpg)
1. If you ever need to reference the public access token again, you can navigate to `https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/headless_storefronts`.
</details>
### Install a headless theme
When using a headless Shopify setup, you normally don't want customers to access any of the theme pages except for checkout. However, you can't totally disable the theme and a lot of links will still point to the theme (e.g. links in emails, order details, plugins, checkout, etc.).
To enable a seamless flow between your headless site and Shopify, you can install the [Shopify Headless Theme](https://github.com/instantcommerce/shopify-headless-theme).
Follow the installation instructions and configure the theme with your headless site's values.
<details>
<summary>View detailed visual walkthrough</summary>
1. Download [Shopify Headless Theme](https://github.com/instantcommerce/shopify-headless-theme).
![Download Shoify Headless Theme](.github/assets/install-headless-theme-01.jpg)
1. Navigate to `https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/themes`.
1. Click `Add theme`, then `Upload zip file`.
![Upload zip file](.github/assets/install-headless-theme-02.jpg)
1. Select the downloaded zip file from above, and click the green `Upload file` button.
![Select and upload file](.github/assets/install-headless-theme-03.jpg)
1. Click `Customize`.
![Customize theme](.github/assets/install-headless-theme-04.jpg)
1. Click `Theme settings` (ie. the paintbrush icon), expand the `STOREFRONT` section, enter your headless store domain, click the gray `Publish` button.
![Set headless domain in theme settings](.github/assets/install-headless-theme-05.jpg)
1. Confirm the theme change by clicking the green `Save and publish` button.
![Confirm save and publish](.github/assets/install-headless-theme-06.jpg)
1. The headless theme should now be your current active theme.
![Headless theme is current and active](.github/assets/install-headless-theme-07.jpg)
</details>
### Branding & Design
Since you're creating a headless Shopify store, you'll be in full control of your brand and design. However, there are still a few aspects we're leaving within Shopify's control.
- Checkout
- Emails
- Order status
- Order history
- Favicon (for any Shopify controlled pages)
You can use Shopify's admin to customize these pages to match your brand and design.
<details>
<summary>View detailed visual walkthrough</summary>
#### Checkout, order status, and order history
1. Navigate to `https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/settings/checkout`.
1. Click the green `Customize` button.
![Customize](.github/assets/branding-01.jpg)
1. Click `Branding` (ie. the paintbrush icon) and customize your brand. Please note, there are three steps / pages to the checkout flow. Use the dropdown to change pages and adjust branding as needed on each page. Click `Save` when you are done.
![Branding](.github/assets/branding-02.jpg)
1. Navigate to `https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/settings/branding`.
1. Customize settings to match your brand.
![Branding](.github/assets/branding-03.jpg)
#### Emails
1. Navigate to `https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/settings/email_settings`.
1. Customize settings to match your brand.
![Branding](.github/assets/branding-04.jpg)
#### Favicon
1. Navigate to `https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/themes`.
1. Click the green `Customize` button.
![Customize theme](.github/assets/branding-05.jpg)
1. Click `Theme settings` (ie. the paintbrush icon), expand the `FAVICON` section, upload favicon, then click the `Save` button.
![Favicon](.github/assets/branding-06.jpg)
</details>
### Configure webhooks for on-demand incremental static regeneration (ISR)
Coming soon.