- Go to: https://studio.apollographql.com/sandbox/explorer/
- Click on the gear icon on the top left
- Under Connection settings click the 'Edit' button
- For the "Endpoint" enter the
API_URL
(example can be found in.env.example
) - Under "Default header" enter
- Header key:
X-Shopify-Storefront-Access-Token
- Value:
ACCESS_TOKEN
(example can be found in.env.example
)
- Header key:
- Set up graphql codegen
- Set up ts-gql
- Source home page data
- Static product page
- Wire up data for product page
- Wire up checkout mutation
- Improve performance
The design of this site is taken from this video by former Thinkmiller Simon Vrachliotis on the Tailwind CSS YouTube channel.
The deployed Next.js site referenced in the video can be found here: https://tailwindui-shopify.vercel.app/