Shopify
Last updated
Last updated
npx create-next-app -e with-tailwindcss build-next-shop
cd build-next-shop
Create .env.local file in the root folder of your Next.js app and add these variables:
SHOPIFY_STOREFRONT_ACCESSTOKEN='storefront api access token'
SHOPIFY_STORE_DOMAIN='yourstore.myshopify.com'
{
products(first:5) {
edges {
node {
id
}
}
}
}
Inside the Next.js app, create a lib folder in the root directory and create a shopify.js file inside of it.
const domain = process.env.SHOPIFY_STORE_DOMAIN
const storefrontAccessToken = process.env.SHOPIFY_STOREFRONT_ACCESSTOKEN
async function ShopifyData(query) {
const URL = `https://${domain}/api/2021-07/graphql.json`
const options = {
endpoint: URL,
method: "POST",
headers: {
"X-Shopify-Storefront-Access-Token": storefrontAccessToken,
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({ query })
}
try {
const data = await fetch(URL, options).then(response => {
return response.json()
})
return data
} catch (error) {
throw new Error("Products not fetched")
}
}
export async function getAllProducts() {
const query = `
{
products(first: 25) {
edges {
node {
id
title
handle
priceRange {
minVariantPrice {
amount
}
}
images(first: 5) {
edges {
node {
originalSrc
altText
}
}
}
}
}
}
}
`
const response = await ShopifyData(query)
const allProducts = response.data.products.edges ? response.data.products.edges : []
return allProducts
}
To display products on the homepage, we add inside our index.js file:
import { getAllProducts } from "../lib/shopify"
export default function Home({ products }) {
return (
<div className="bg-white">
<div className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
<h2 className="text-2xl font-extrabold text-gray-900 mb-6">
Products
</h2>
<div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{
products.map(product => (
<ProductCard key={product.node.id} product={product} />
))
}
</div>
</div>
</div>
)
}
export async function getStaticProps() {
const products = await getAllProducts()
return {
props: { products }, // will be passed to the page component as props
}
}
Create a ProductCard.js component in a new folder called components:
import Link from 'next/link'
import Image from 'next/image'
import { formatter } from '../utils/helpers'
const ProductCard = ({ product }) => {
const { handle, title } = product.node
const { altText, originalSrc } = product.node.images.edges[0].node
const price = product.node.priceRange.minVariantPrice.amount
return (
<Link
href={`/products/${handle}`}
>
<a className="group">
<div className="w-full bg-gray-200 rounded-3xl overflow-hidden">
<div className="relative group-hover:opacity-75 h-72">
<Image
src={originalSrc}
alt={altText}
layout="fill"
objectFit="cover"
/>
</div>
</div>
<h3 className="mt-4 text-lg font-medium text-gray-900">{title}</h3>
<p className="mt-1 text-sm text-gray-700">{formatter.format(price)}</p>
</a>
</Link>
)
}
export default ProductCard
Next Steps:
Dynamic product pages using the getStaticPaths Next.js function.
Create add-to-cart functionality using React Context for cart state management.
Deploy to Vercel.