90 | {option.values.map((value) => {
91 | // Base option params on selected variant params.
92 | const optionParams = new URLSearchParams(selectedVariantParams);
93 | // Update the params using the current option to reflect how the url would change.
94 | optionParams.set(option.name.toLowerCase(), value);
95 |
96 | const optionUrl = createUrl(pathname, optionParams);
97 |
98 | // The option is active if it in the url params.
99 | const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value;
100 |
101 | // The option is available for sale if it fully matches the variant in the option's url params.
102 | // It's super important to note that this is the options params, *not* the selected variant's params.
103 | // This is the "magic" that will cross check possible future variant combinations and preemptively
104 | // disable combinations that are not possible.
105 | const isAvailableForSale = optimizedVariants.find((a) =>
106 | Array.from(optionParams.entries()).every(([key, value]) => a[key] === value)
107 | )?.availableForSale;
108 |
109 | const DynamicTag = isAvailableForSale ? Link : 'p';
110 |
111 | return (
112 |
128 | {value}
129 |
130 | );
131 | })}
132 |
133 |
134 | ));
135 | }
136 |
--------------------------------------------------------------------------------
/components/cart/modal.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Dialog, Transition } from '@headlessui/react';
4 | import Image from 'next/image';
5 | import Link from 'next/link';
6 |
7 | import CartIcon from 'components/icons/cart';
8 | import CloseIcon from 'components/icons/close';
9 | import ShoppingBagIcon from 'components/icons/shopping-bag';
10 | import Price from 'components/price';
11 | import { DEFAULT_OPTION } from 'lib/constants';
12 | import type { Cart } from 'lib/shopify/types';
13 | import { createUrl } from 'lib/utils';
14 | import { Fragment, useEffect, useRef, useState } from 'react';
15 | import { useCookies } from 'react-cookie';
16 | import DeleteItemButton from './delete-item-button';
17 | import EditItemQuantityButton from './edit-item-quantity-button';
18 |
19 | type MerchandiseSearchParams = {
20 | [key: string]: string;
21 | };
22 |
23 | export default function CartModal({ cart, cartIdUpdated }: { cart: Cart; cartIdUpdated: boolean }) {
24 | const [, setCookie] = useCookies(['cartId']);
25 | const [isOpen, setIsOpen] = useState(false);
26 | const quantityRef = useRef(cart.totalQuantity);
27 | const openCart = () => setIsOpen(true);
28 | const closeCart = () => setIsOpen(false);
29 |
30 | useEffect(() => {
31 | if (cartIdUpdated) {
32 | setCookie('cartId', cart.id, {
33 | path: '/',
34 | sameSite: 'strict',
35 | secure: process.env.NODE_ENV === 'production'
36 | });
37 | }
38 | return;
39 | }, [setCookie, cartIdUpdated, cart.id]);
40 |
41 | useEffect(() => {
42 | // Open cart modal when when quantity changes.
43 | if (cart.totalQuantity !== quantityRef.current) {
44 | // But only if it's not already open (quantity also changes when editing items in cart).
45 | if (!isOpen) {
46 | setIsOpen(true);
47 | }
48 |
49 | // Always update the quantity reference
50 | quantityRef.current = cart.totalQuantity;
51 | }
52 | }, [isOpen, cart.totalQuantity, quantityRef]);
53 |
54 | return (
55 | <>
56 |
59 |
60 |
204 |
205 |
206 | );
207 | }
208 |
--------------------------------------------------------------------------------
/lib/shopify/index.ts:
--------------------------------------------------------------------------------
1 | import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants';
2 | import { isShopifyError } from 'lib/type-guards';
3 | import {
4 | addToCartMutation,
5 | createCartMutation,
6 | editCartItemsMutation,
7 | removeFromCartMutation
8 | } from './mutations/cart';
9 | import { getCartQuery } from './queries/cart';
10 | import {
11 | getCollectionProductsQuery,
12 | getCollectionQuery,
13 | getCollectionsQuery
14 | } from './queries/collection';
15 | import { getMenuQuery } from './queries/menu';
16 | import { getPageQuery, getPagesQuery } from './queries/page';
17 | import {
18 | getProductQuery,
19 | getProductRecommendationsQuery,
20 | getProductsQuery
21 | } from './queries/product';
22 | import {
23 | Cart,
24 | Collection,
25 | Connection,
26 | Menu,
27 | Page,
28 | Product,
29 | ShopifyAddToCartOperation,
30 | ShopifyCart,
31 | ShopifyCartOperation,
32 | ShopifyCollection,
33 | ShopifyCollectionOperation,
34 | ShopifyCollectionProductsOperation,
35 | ShopifyCollectionsOperation,
36 | ShopifyCreateCartOperation,
37 | ShopifyMenuOperation,
38 | ShopifyPageOperation,
39 | ShopifyPagesOperation,
40 | ShopifyProduct,
41 | ShopifyProductOperation,
42 | ShopifyProductRecommendationsOperation,
43 | ShopifyProductsOperation,
44 | ShopifyRemoveFromCartOperation,
45 | ShopifyUpdateCartOperation
46 | } from './types';
47 |
48 | const domain = `https://${process.env.SHOPIFY_STORE_DOMAIN!}`;
49 | const endpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`;
50 | const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;
51 |
52 | type ExtractVariables = T extends { variables: object } ? T['variables'] : never;
53 |
54 | export async function shopifyFetch({
55 | cache = 'force-cache',
56 | headers,
57 | query,
58 | tags,
59 | variables
60 | }: {
61 | cache?: RequestCache;
62 | headers?: HeadersInit;
63 | query: string;
64 | tags?: string[];
65 | variables?: ExtractVariables;
66 | }): Promise<{ status: number; body: T } | never> {
67 | try {
68 | const result = await fetch(endpoint, {
69 | method: 'POST',
70 | headers: {
71 | 'Content-Type': 'application/json',
72 | 'X-Shopify-Storefront-Access-Token': key,
73 | ...headers
74 | },
75 | body: JSON.stringify({
76 | ...(query && { query }),
77 | ...(variables && { variables })
78 | }),
79 | cache,
80 | ...(tags && { next: { tags } })
81 | });
82 |
83 | const body = await result.json();
84 |
85 | if (body.errors) {
86 | throw body.errors[0];
87 | }
88 |
89 | return {
90 | status: result.status,
91 | body
92 | };
93 | } catch (e) {
94 | if (isShopifyError(e)) {
95 | throw {
96 | status: e.status || 500,
97 | message: e.message,
98 | query
99 | };
100 | }
101 |
102 | throw {
103 | error: e,
104 | query
105 | };
106 | }
107 | }
108 |
109 | const removeEdgesAndNodes = (array: Connection) => {
110 | return array.edges.map((edge) => edge?.node);
111 | };
112 |
113 | const reshapeCart = (cart: ShopifyCart): Cart => {
114 | if (!cart.cost?.totalTaxAmount) {
115 | cart.cost.totalTaxAmount = {
116 | amount: '0.0',
117 | currencyCode: 'USD'
118 | };
119 | }
120 |
121 | return {
122 | ...cart,
123 | lines: removeEdgesAndNodes(cart.lines)
124 | };
125 | };
126 |
127 | const reshapeCollection = (collection: ShopifyCollection): Collection | undefined => {
128 | if (!collection) {
129 | return undefined;
130 | }
131 |
132 | return {
133 | ...collection,
134 | path: `/search/${collection.handle}`
135 | };
136 | };
137 |
138 | const reshapeCollections = (collections: ShopifyCollection[]) => {
139 | const reshapedCollections = [];
140 |
141 | for (const collection of collections) {
142 | if (collection) {
143 | const reshapedCollection = reshapeCollection(collection);
144 |
145 | if (reshapedCollection) {
146 | reshapedCollections.push(reshapedCollection);
147 | }
148 | }
149 | }
150 |
151 | return reshapedCollections;
152 | };
153 |
154 | const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
155 | if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
156 | return undefined;
157 | }
158 |
159 | const { images, variants, ...rest } = product;
160 |
161 | return {
162 | ...rest,
163 | images: removeEdgesAndNodes(images),
164 | variants: removeEdgesAndNodes(variants)
165 | };
166 | };
167 |
168 | const reshapeProducts = (products: ShopifyProduct[]) => {
169 | const reshapedProducts = [];
170 |
171 | for (const product of products) {
172 | if (product) {
173 | const reshapedProduct = reshapeProduct(product);
174 |
175 | if (reshapedProduct) {
176 | reshapedProducts.push(reshapedProduct);
177 | }
178 | }
179 | }
180 |
181 | return reshapedProducts;
182 | };
183 |
184 | export async function createCart(): Promise {
185 | const res = await shopifyFetch({
186 | query: createCartMutation,
187 | cache: 'no-store'
188 | });
189 |
190 | return reshapeCart(res.body.data.cartCreate.cart);
191 | }
192 |
193 | export async function addToCart(
194 | cartId: string,
195 | lines: { merchandiseId: string; quantity: number }[]
196 | ): Promise {
197 | const res = await shopifyFetch({
198 | query: addToCartMutation,
199 | variables: {
200 | cartId,
201 | lines
202 | },
203 | cache: 'no-store'
204 | });
205 | return reshapeCart(res.body.data.cartLinesAdd.cart);
206 | }
207 |
208 | export async function removeFromCart(cartId: string, lineIds: string[]): Promise {
209 | const res = await shopifyFetch({
210 | query: removeFromCartMutation,
211 | variables: {
212 | cartId,
213 | lineIds
214 | },
215 | cache: 'no-store'
216 | });
217 |
218 | return reshapeCart(res.body.data.cartLinesRemove.cart);
219 | }
220 |
221 | export async function updateCart(
222 | cartId: string,
223 | lines: { id: string; merchandiseId: string; quantity: number }[]
224 | ): Promise {
225 | const res = await shopifyFetch({
226 | query: editCartItemsMutation,
227 | variables: {
228 | cartId,
229 | lines
230 | },
231 | cache: 'no-store'
232 | });
233 |
234 | return reshapeCart(res.body.data.cartLinesUpdate.cart);
235 | }
236 |
237 | export async function getCart(cartId: string): Promise {
238 | const res = await shopifyFetch({
239 | query: getCartQuery,
240 | variables: { cartId },
241 | cache: 'no-store'
242 | });
243 |
244 | if (!res.body.data.cart) {
245 | return null;
246 | }
247 |
248 | return reshapeCart(res.body.data.cart);
249 | }
250 |
251 | export async function getCollection(handle: string): Promise {
252 | const res = await shopifyFetch({
253 | query: getCollectionQuery,
254 | tags: [TAGS.collections],
255 | variables: {
256 | handle
257 | }
258 | });
259 |
260 | return reshapeCollection(res.body.data.collection);
261 | }
262 |
263 | export async function getCollectionProducts({
264 | collection,
265 | reverse,
266 | sortKey
267 | }: {
268 | collection: string;
269 | reverse?: boolean;
270 | sortKey?: string;
271 | }): Promise {
272 | const res = await shopifyFetch({
273 | query: getCollectionProductsQuery,
274 | tags: [TAGS.collections, TAGS.products],
275 | variables: {
276 | handle: collection,
277 | reverse,
278 | sortKey
279 | }
280 | });
281 |
282 | if (!res.body.data.collection) {
283 | console.log(`No collection found for \`${collection}\``);
284 | return [];
285 | }
286 |
287 | return reshapeProducts(removeEdgesAndNodes(res.body.data.collection.products));
288 | }
289 |
290 | export async function getCollections(): Promise {
291 | const res = await shopifyFetch({
292 | query: getCollectionsQuery,
293 | tags: [TAGS.collections]
294 | });
295 | const shopifyCollections = removeEdgesAndNodes(res.body?.data?.collections);
296 | const collections = [
297 | {
298 | handle: '',
299 | title: 'All',
300 | description: 'All products',
301 | seo: {
302 | title: 'All',
303 | description: 'All products'
304 | },
305 | path: '/search',
306 | updatedAt: new Date().toISOString()
307 | },
308 | // Filter out the `hidden` collections.
309 | // Collections that start with `hidden-*` need to be hidden on the search page.
310 | ...reshapeCollections(shopifyCollections).filter(
311 | (collection) => !collection.handle.startsWith('hidden')
312 | )
313 | ];
314 |
315 | return collections;
316 | }
317 |
318 | export async function getMenu(handle: string): Promise {
319 | const res = await shopifyFetch({
320 | query: getMenuQuery,
321 | tags: [TAGS.collections],
322 | variables: {
323 | handle
324 | }
325 | });
326 |
327 | return (
328 | res.body?.data?.menu?.items.map((item: { title: string; url: string }) => ({
329 | title: item.title,
330 | path: item.url.replace(domain, '').replace('/collections', '/search').replace('/pages', '')
331 | })) || []
332 | );
333 | }
334 |
335 | export async function getPage(handle: string): Promise {
336 | const res = await shopifyFetch({
337 | query: getPageQuery,
338 | variables: { handle }
339 | });
340 |
341 | return res.body.data.pageByHandle;
342 | }
343 |
344 | export async function getPages(): Promise {
345 | const res = await shopifyFetch({
346 | query: getPagesQuery
347 | });
348 |
349 | return removeEdgesAndNodes(res.body.data.pages);
350 | }
351 |
352 | export async function getProduct(handle: string): Promise {
353 | const res = await shopifyFetch({
354 | query: getProductQuery,
355 | tags: [TAGS.products],
356 | variables: {
357 | handle
358 | }
359 | });
360 |
361 | return reshapeProduct(res.body.data.product, false);
362 | }
363 |
364 | export async function getProductRecommendations(productId: string): Promise {
365 | const res = await shopifyFetch({
366 | query: getProductRecommendationsQuery,
367 | tags: [TAGS.products],
368 | variables: {
369 | productId
370 | }
371 | });
372 |
373 | return reshapeProducts(res.body.data.productRecommendations);
374 | }
375 |
376 | export async function getProducts({
377 | query,
378 | reverse,
379 | sortKey
380 | }: {
381 | query?: string;
382 | reverse?: boolean;
383 | sortKey?: string;
384 | }): Promise {
385 | const res = await shopifyFetch({
386 | query: getProductsQuery,
387 | tags: [TAGS.products],
388 | variables: {
389 | query,
390 | reverse,
391 | sortKey
392 | }
393 | });
394 |
395 | return reshapeProducts(removeEdgesAndNodes(res.body.data.products));
396 | }
397 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SHOPIFY_STORE_DOMAIN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
2 |
3 | # Next.js Commerce
4 |
5 | A Next.js 13 and App Router-ready ecommerce template featuring:
6 |
7 | - Next.js App Router
8 | - Optimized for SEO using Next.js's Metadata
9 | - React Server Components (RSCs) and Suspense
10 | - Server Actions for mutations
11 | - Edge Runtime
12 | - New fetching and caching paradigms
13 | - Dynamic OG images
14 | - Styling with Tailwind CSS
15 | - Checkout and payments with Shopify
16 | - Automatic light/dark mode based on system settings
17 |
18 | > Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1)
19 |
20 | ## Providers
21 |
22 | Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
23 |
24 | Vercel is more than happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
25 |
26 | - Shopify (this repository)
27 | - [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
28 | - [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
29 | - [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
30 |
31 | ## Running locally
32 |
33 | You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
34 |
35 | > Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store.
36 |
37 | 1. Install Vercel CLI: `npm i -g vercel`
38 | 2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
39 | 3. Download your environment variables: `vercel env pull`
40 |
41 | ```bash
42 | pnpm install
43 | pnpm dev
44 | ```
45 |
46 | Your app should now be running on [localhost:3000](http://localhost:3000/).
47 |
48 |
49 | Expand if you work at Vercel and want to run locally and / or contribute
50 |
51 | 1. Run `vc link`.
52 | 1. Select the `Vercel Solutions` scope.
53 | 1. Connect to the existing `commerce-shopify` project.
54 | 1. Run `vc env pull` to get environment variables.
55 | 1. Run `pmpm dev` to ensure everything is working correctly.
56 |
57 |
58 | ## How to configure your Shopify store for Next.js Commerce
59 |
60 | Next.js Commerce requires a [paid Shopify plan](https://www.shopify.com/pricing).
61 |
62 | > Note: Next.js Commerce will not work with a Shopify Starter plan as it does not allow installation of custom themes, which is required to run as a headless storefront.
63 |
64 | ### Add Shopify domain to an environment variable
65 |
66 | Create a `SHOPIFY_STORE_DOMAIN` environment variable and use your Shopify domain as the the value (ie. `SHOPIFY_STORE_SUBDOMAIN.myshopify.com`).
67 |
68 | > Note: Do not include the `https://`.
69 |
70 | ### Accessing the Shopify Storefront API
71 |
72 | 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.
73 |
74 | 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.
75 |
76 | Once installed, you'll need to create a `SHOPIFY_STOREFRONT_ACCESS_TOKEN` environment variable and use the public access token as the value
77 |
78 | > 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.
79 |
80 |
81 | Expand to view detailed walkthrough
82 |
83 | 1. Navigate to `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/settings/apps`.
84 | 1. Click the green `Shopify App Store` button.
85 | 
86 | 1. Search for `Headless` and click on the `Headless` app.
87 | 
88 | 1. Click the black `Add app` button.
89 | 
90 | 1. Click the green `Add sales channel` button.
91 | 
92 | 1. Click the green `Create storefront` button.
93 | 
94 | 1. Copy and paste the public access token and assign it to a `SHOPIFY_STOREFRONT_ACCESS_TOKEN` environment variable.
95 | 
96 | 1. If you ever need to reference the public access token again, you can navigate to `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/headless_storefronts`.
97 |
98 |
99 | ### Install a headless theme
100 |
101 | 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.).
102 |
103 | 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).
104 |
105 | Follow the installation instructions and configure the theme with your headless site's values.
106 |
107 |
108 | Expand to view detailed walkthrough
109 |
110 | 1. Download [Shopify Headless Theme](https://github.com/instantcommerce/shopify-headless-theme).
111 | 
112 | 1. Navigate to `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/themes`.
113 | 1. Click `Add theme`, then `Upload zip file`.
114 | 
115 | 1. Select the downloaded zip file from above, and click the green `Upload file` button.
116 | 
117 | 1. Click `Customize`.
118 | 
119 | 1. Click `Theme settings` (ie. the paintbrush icon), expand the `STOREFRONT` section, enter your headless store domain, click the gray `Publish` button.
120 | 
121 | 1. Confirm the theme change by clicking the green `Save and publish` button.
122 | 
123 | 1. The headless theme should now be your current active theme.
124 | 
125 |
126 |
127 | ### Branding & Design
128 |
129 | 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.
130 |
131 | - Checkout
132 | - Emails
133 | - Order status
134 | - Order history
135 | - Favicon (for any Shopify controlled pages)
136 |
137 | You can use Shopify's admin to customize these pages to match your brand and design.
138 |
139 |
140 | Expand to view detailed walkthrough
141 |
142 | #### Checkout, order status, and order history
143 |
144 | 1. Navigate to `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/settings/checkout`.
145 | 1. Click the green `Customize` button.
146 | 
147 | 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.
148 | 
149 | 1. Navigate to `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/settings/branding`.
150 | 1. Customize settings to match your brand.
151 | 
152 |
153 | #### Emails
154 |
155 | 1. Navigate to `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/settings/email_settings`.
156 | 1. Customize settings to match your brand.
157 | 
158 |
159 | #### Favicon
160 |
161 | 1. Navigate to `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/themes`.
162 | 1. Click the green `Customize` button.
163 | 
164 | 1. Click `Theme settings` (ie. the paintbrush icon), expand the `FAVICON` section, upload favicon, then click the `Save` button.
165 | 
166 |
167 |
168 |
169 | ### Configure webhooks for on-demand incremental static regeneration (ISR)
170 |
171 | Utilizing [Shopify's webhooks](https://shopify.dev/docs/apps/webhooks), and listening for select [Shopify webhook event topics](https://shopify.dev/docs/api/admin-rest/2022-04/resources/webhook#event-topics), we can use [Next'js on-demand revalidation](https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#using-on-demand-revalidation) to keep data fetches indefinitely cached until certain events in the Shopify store occur.
172 |
173 | Next.js is pre-configured to listen for the following Shopify webhook events and automatically revalidate fetches.
174 |
175 | - `collections/create`
176 | - `collections/delete`
177 | - `collections/update`
178 | - `products/create`
179 | - `products/delete`
180 | - `products/update` (this also includes when variants are added, updated, and removed as well as when products are purchased so inventory and out of stocks can be updated)
181 |
182 |
183 | Expand to view detailed walkthrough
184 |
185 | #### Setup secret for secure revalidation
186 |
187 | 1. Create your own secret or [generate a random UUID](https://www.uuidgenerator.net/guid).
188 | 1. Create a [Vercel Environment Variable](https://vercel.com/docs/concepts/projects/environment-variables) named `SHOPIFY_REVALIDATION_SECRET` and use the value from above.
189 |
190 | #### Configure Shopify webhooks
191 |
192 | 1. Navigate to `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/settings/notifications`.
193 | 1. Add webhooks for all six event topics listed above. You can add more sets for other preview urls, environments, or local development. Append `?secret=[SECRET]` to each url, where `[SECRET]` is the secret you created above.
194 | 
195 | 
196 |
197 | #### Testing webhooks during local development
198 |
199 | The easiest way to test webhooks while developing locally is to use [ngrok](https://ngrok.com).
200 |
201 | 1. [Install and configure ngrok](https://ngrok.com/download) (you will need to create an account).
202 | 1. Run your app locally, `npm run dev`.
203 | 1. In a separate terminal session, run `ngrok http 3000`.
204 | 1. Use the url generated by ngrok and add or update your webhook urls in Shopify.
205 | 
206 | 
207 | 1. You can now make changes to your store and your local app should receive updates. You can also use the `Send test notification` button to trigger a generic webhook test.
208 | 
209 |
210 |
211 |
212 | ### Using Shopify as a CMS
213 |
214 | Next.js Commerce is fully powered by Shopify in a truly headless and data driven way.
215 |
216 | #### Products
217 |
218 | `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/products`
219 |
220 | Only `Active` products are shown. `Draft` products will not be shown until they are marked as `Active`.
221 |
222 | `Active` products can still be hidden and not seen by navigating the site, by adding a `nextjs-frontend-hidden` tag on the product. This tag will also tell search engines to not index or crawl the product. The product is still directly accessible via url. This feature is great for "secret" products you only want to people you share the url with.
223 |
224 | Product options and option combinations are driven from Shopify options and variants. When selecting options on the product detail page, other option and variant combinations will be visually validated and verified for availability, like Amazon does.
225 |
226 | Products that are active and "out of stock" are still shown on the site, but the ability to add the product to the cart is disabled.
227 |
228 | #### Collections
229 |
230 | `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/collections`
231 |
232 | Create whatever collections you want and configure them however you want. All available collections will show on the search page as filters on the left, with one exception...
233 |
234 | Any collection names that start with the word "hidden" will not show up on the headless front end. The Next.js Commerce theme comes pre-configured to look for two hidden collections. Collections were chosen for this over tags so that order of products could be controlled (collections allow for manual ordering).
235 |
236 | Create the following collections:
237 |
238 | - `Hidden: Homepage Featured Items` -- Products in this collection are displayed in the three featured blocks on the homepage.
239 | - `Hidden: Homepage Carousel` -- Products in this collection are displayed in the auto-scrolling carousel section on the homepage.
240 |
241 | 
242 |
243 | 
244 |
245 | #### Pages
246 |
247 | `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/pages`
248 |
249 | Next.js Commerce contains a dynamic `[page]` route. It will use the value to look for a corresponding page in Shopify. If a page is found, it will display its rich content using Tailwind's prose. If a page is not found, a 404 page is displayed.
250 |
251 | 
252 |
253 | 
254 |
255 | #### Navigation menus
256 |
257 | `https://SHOPIFY_STORE_SUBDOMAIN.myshopify.com/admin/menus`
258 |
259 | Next.js Commerce's header and footer navigation is pre-configured to be controlled by Shopify navigation menus. This means you have full control over what links go here. They can be to collections, pages, external links, and more.
260 |
261 | Create the following navigation menus:
262 |
263 | - `Next.js Frontend Header Menu` -- Menu items to be shown in the headless frontend header.
264 | - `Next.js Frontend Footer Menu` -- Menu items to be shown in the headless frontend footer.
265 |
266 | 
267 |
268 | 
269 |
270 | #### SEO
271 |
272 | Shopify's products, collections, pages, etc. allow you to create custom SEO titles and descriptions. Next.js Commerce is pre-configured to display these custom values, but also comes with sensible default fallbacks if they are not provided.
273 |
274 | 
275 |
--------------------------------------------------------------------------------