📝 Shopify Integration Documentation Needs Complete Update - Most Instructions Outdated

[kaanmertkoc]

Overview

The Shopify integration guide (https://vercel.com/docs/integrations/ecommerce/shopify) requires a major update. While the Vercel deployment section (updated July 2024) remains current, the Shopify-specific sections contain outdated information.

Outdated Sections

The following major sections need comprehensive updates:

1. Configure Shopify

   • Shopify account and storefront setup instructions
   • Shopify Headless theme installation steps
   • Shopify Headless app installation process

2. Shopify Configuration

   • Branding and design customization steps
   • Webhook setup and configuration
   • CMS functionality setup

3. Integration Steps

   • All Shopify API and authentication-related instructions
   • Storefront access token setup
   • Webhook event handling instructions

What Works

• The Vercel deployment section (updated July 2024)
• Basic environment variable configuration

Impact

This outdated documentation affects new users trying to integrate Shopify with Vercel, potentially leading to confusion and implementation issues.

---

Please let me know if you need any specific examples or if I can provide additional information to help with the update.

[dracoalv]

In fact, it is possible to reach the end of the tutorial with his proposal, however there are some things that were not very well explained. I had problems where the ThreeItemsGrid component together with this call

const homePageItems = await getCollectionProducts({ collection: 'hidden-homepage-featured-items' })

It was only visible in production mode, while the carousel displays the products normally.

the other problem was that

const menu = await getMenu('next-js-frontend-header-menu');

It didn't bring any data. I'm not sure if the problem is with Shopify, as I have no knowledge of the platform in question.

I feel like they neglect this information, how to add the menu items

[matija2209]

This template is impossible to debug. The breakpoints are not respected as well. It stops on compiled javascript or just does not. Considering going with Remix/Hydrogen. The start is not good so cannot image where it will lead us.

[leerob]

The breakpoints are not respected as well. It stops on compiled javascript or just does not.

Can you share what you mean here?

[matija2209]

Sure @leerob, these are the command I run :

gh repo clone vercel/commerce

Then install deps

pnpm install

I set debugger break-point in Cursor

Run Next.js: debug full stack followed by Next.js: debug client-side

The breakpoints get triggered in compiled code

If I try only full-stack launch command and open localhost:3000 in the browser the same breakpoint ends up on a completely "random" piece of code.

Not sure, how I'm supposed to run the dev server in order for breakpoints to get applied correctly. I used to have such problems when using TURBOPACK in Nextjs 14.2.*

[leerob]

And that is following these instructions? https://nextjs.org/docs/app/building-your-application/configuring/debugging#debugging-with-vs-code

This repo is on the latest version on Next.js – how did you get 14.2?

[matija2209]

The fix was to remove the --turbopack flag from the dev command. This kind of confirms my suspicion that it's Turbopack-related. However, it's odd because I never had these problems in 15.* with breakpoints. So, something must be interfering. I'd assume Turbopack is still being used despite the lack of the flag?

From next dev --turbopack to next dev.

[matija2209]

Perhaps unrelated, but what I can't wrap my head around is: why is the "Go to Code" feature not supported?

What's also perplexing is that this codebase returns "No definition found for 'getCollections'" despite it existing.

It works well for all my other codebases.

[matija2209]

And that is following these instructions? https://nextjs.org/docs/app/building-your-application/configuring/debugging#debugging-with-vs-code

This repo is on the latest version on Next.js – how did you get 14.2?

I cloned this exact repo which uses a bit different config from my understanding.

Nextjs version: 15.2.0-canary.47

For the launch.json it uses.

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

Anyways I made it to work by removing --turbopack.

[matija2209]

Perhaps unrelated, but what I can't wrap my head around is: why is the "Go to Code" feature not supported?

What's also perplexing is that this codebase returns "No definition found for 'getCollections'" despite it existing.

It works well for all my other codebases.

Restarting Typescript server did the trick. Something must have crashed it.