crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 06:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity
commerce/README.md
Michael Novotny 40bb0452c0
Documents how to configure Shopify.
2023-04-19 13:01:01 -05:00

7.1 KiB
Raw Blame History

Deploy with Vercel

Next.js Commerce

Note: Looking for Next.js Commerce v1? View the release notes.

A Next.js 13 and App Router-ready ecommerce template, built with Shopify, featuring:

  • Next.js App Router
  • 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
  • Checkout and payments with Shopify
  • Automatic light/dark mode based on system settings

We will be shortly updating the demo at demo.vercel.store with this new version.

Running Locally

  1. Install Vercel CLI: npm i -g vercel
  2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
  3. Download your environment variables: vercel env pull .env.local
pnpm install
pnpm dev

Your app should now be running on 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 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 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.

View detailed visual walkthrough
  1. Navigate to https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/settings/apps.
  2. Click the green Shopify App Store button. Shopify App Store
  3. Search for Headless and click on the Headless app. Headless
  4. Click the black Add app button. Add app
  5. Click the green Add sales channel button. Add sales channel
  6. Click the green Create storefront button. Create storefront
  7. Copy and paste the public access token and assign it to a SHOPIFY_STOREFRONT_ACCESS_TOKEN environment variable. Pubic access token
  8. If you ever need to reference the public access token again, you can navigate to https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/headless_storefronts.

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.

Follow the installation instructions and configure the theme with your headless site's values.

View detailed visual walkthrough
  1. Download Shopify Headless Theme. Download Shoify Headless Theme
  2. Navigate to https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/themes.
  3. Click Add theme, then Upload zip file. Upload zip file
  4. Select the downloaded zip file from above, and click the green Upload file button. Select and upload file
  5. Click Customize. Customize theme
  6. 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
  7. Confirm the theme change by clicking the green Save and publish button. Confirm save and publish
  8. The headless theme should now be your current active theme. Headless theme is current and active

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.

View detailed visual walkthrough

Checkout, order status, and order history

  1. Navigate to https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/settings/checkout.
  2. Click the green Customize button. Customize
  3. 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
  4. Navigate to https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/settings/branding.
  5. Customize settings to match your brand. Branding

Emails

  1. Navigate to https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/settings/email_settings.
  2. Customize settings to match your brand. Branding

Favicon

  1. Navigate to https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/themes.
  2. Click the green Customize button. Customize theme
  3. Click Theme settings (ie. the paintbrush icon), expand the FAVICON section, upload favicon, then click the Save button. Favicon

Configure webhooks for on-demand incremental static regeneration (ISR)

Coming soon.