Building A Store with Next.js + Shopify - PART 1: Create a Shopify account and fill it up with products
Hello dear.
Building a store with Shopify has always been great and driving several online stores.
Shopify has a feature called the Shopify storefront API used by developers who intend to use separate tech for their frontend(client) build. e.g. React, Vue, Next and so on.
Isn't that great news? I bet.
As much as this tool is so great. Most developers found it difficult to utilize both techs at first. But once you get the hang of it, you can't stop using it.
That's why I'm here.
With that, Let's get to business.
For easy understanding. This flow was split into 6 sections. This one and 5 more. They're:
Create a Shopify account and fill it up with products. (<-- we are here.)
Link Next.js project with Shopify store.
Fetch products from Shopify and sort in Frontend.
Search and filter products in Shopify.
Fetch a product in full and fetch variants based on selected options.
Create a cart and update its cart with product variants.
Captivating right?
Because we are just going to focus on integrating these two techs (Next.js and Shopify). We are not going to be paying much attention to basic codes. In that case, you need to have some background knowledge about Next.js things.
Each section above has requirements so you can follow the tutorial. Here are some requirements for this section.
Next.js 13. (Latest version tips and tricks)
Shopify. (Just the basics)
TailwindCSS.
GraphQL. (Basic concepts and usage)
That said. Let's begin.
Before you can be able to build a store as a developer in Shopify, you have to be a partner. This way you don't have to pay to own a store. But build stores and applications utilizing Shopify infrastructure.
Follow the steps below to create a Shopify Partner Account
Fill in your email address.
Click "Join Now".
Fill out the registration form with your information.
Click Create Account.
Welcome to your dashboard.
Follow the steps below to create a Shopify Store
From your partners' dashboard, click stores.
Click Add Stores > Create development stores.
In the Development store use section, select Create a store to test and build.
In the Store details section, enter a name for your store.
The store name is used to create the store's myshopify.com URL. This URL can't be changed.
Choose the country or region where the client's business is located. This information is used to set up default shipping rates and recommend region-appropriate apps.
Click Create Development Store.
Congratulations! You are a proud store owner.
You have successfully created an empty Shopify store. Let’s fix that.
We have to fill the store with products and collections since that’s what we are going to be querying from the storefront.
If you already have data to fill into your store. Great.
Follow the steps below to add products to your store.
Go to the products section in the admin dashboard.
Click the Add Product button.
Fill up the product form.
Click Save
Follow the steps below to create collections for your products.
Go to the products section in the admin dashboard.
Click on the collections section.
On the top right, click on Create Collection.
Fill out the collection form.
Click Save.
If you don’t have any data prepared. No worries.
You can start with the ones I prepared already for you. It’s a list of products (bags) grouped by collections (categories).
{
"products": [
{
"name": "Queen Power Top Regal Bag",
"description": "The Queen Power Top Handle Bag is;\nSturdy, powerful structure\nSize: 19cm long * 7 thick * 15cm high\nWeight/Weight: 1.1Kg\nAdjustable golden straps, single handle at the top\nFloral beaded at the side and front\nGolden padlock closure\nRemovable straps: May be worn as a shoulder bag, hand bag, clutch or cross body",
"images": [
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/05/Queen-Power-Top-Handle-Bag-Glamorous-Elegant-3.jpg?resize=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/05/Queen-Power-Top-Handle-Bag-Glamorous-Elegant-1.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/05/Queen-Power-Top-Handle-Bag-Glamorous-Elegant-4.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/05/Queen-Power-Top-Handle-Bag-Glamorous-Elegant-2.jpg?fit=600%2C600&ssl=1"
],
"price": "140",
"compareAtPrice": "200",
"inventoryQuantity": "20",
"variants": [
{
"name": "Color",
"values": ["Gold"]
}
]
},
{
"name": "The Lala Handbag Regal Bag",
"description": "The Lala Handbag\nPractical yet beautiful\nLovely insides\nStrong zips and details\nSparkling metal details\nBuilt to last",
"images": [
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/03/lala-brown-handbag.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/03/lala-handbag-sideview.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/03/lala-handbag-in-brown-color-4.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/03/lala-gray-handbag.png?fit=581%2C557&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/03/lala-gray-handbag.jpg?fit=600%2C600&ssl=1"
],
"price": "90",
"compareAtPrice": "140",
"inventoryQuantity": "9",
"variants": [
{
"name": "Color",
"values": ["Brown", "Silver", "Ice"]
}
]
},
{
"name": "Madame Nene pattern bag",
"description": "The Nene bag has\na detachable strap\nStructured\nQuality PU Leather\nPerfect size",
"images": [
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/03/buy-handbags-in-Nigeria-madam-Nene-bag-1.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/03/buy-handbags-in-Nigeria-madam-Nene-bag-1.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/03/buy-handbags-in-Nigeria-madam-Nene-bag-2.jpg?fit=600%2C600&ssl=1"
],
"price": "99",
"compareAtPrice": "185",
"inventoryQuantity": "33",
"variants": [
{
"name": "Color",
"values": ["Black"]
}
]
},
{
"name": "Snakeskin pattern bag",
"description": "The Mister Madame Bag has the following amazing feature;\nBAG STYLE: MATURE, CORPORATE\nOUTER MATERIAL: PU LEATHER (so it’s durable)\nINNER LINING: POLYESTER\nPACKAGE INTERNAL STRUCTURE: ID BAG, CELL PHONE POCKET, ZIPPER POCKET",
"images": [
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2018/12/mister-madame-bag-in-red-color-front-view-1.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2018/12/mister-madame-bag-in-red-color.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2018/12/mister-madame-bag-in-brown-colour-front-view-1.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2018/12/mister-madame-bag-in-brown-colour-front-view-1.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2018/12/mister-madame-bag-in-brown-colour.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2018/12/mister-madame-bag-in-black-colour-2-1.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2018/12/mister-madame-bag-in-black-colour-1.jpg?fit=600%2C600&ssl=1",
"https://i0.wp.com/www.gabinobags.com/wp-content/uploads/2019/01/green-office-bag.jpg?fit=600%2C600&ssl=1"
],
"price": "74",
"compareAtPrice": "120",
"inventoryQuantity": "14",
"variants": [
{
"name": "Color",
"values": ["Black", "Brown", "Red Velvet", "Green"]
}
]
},
{
"name": "Loewe Puzzle mini leather shoulder bag",
"description": "Loewe leather shoulder bag\nExposed zip fastening at top\nGrab handle, zipped pocket at back, embossed branding, hand-painted edges, two internal zipped pockets, removable adjustable strap, fully lined\nSpecialist clean\nDimensions 18cm x 12cm x 5.8cm",
"images": [
"https://images.selfridges.com/is/image/selfridges/735-10143-32230U951100_BLACK_ALT04?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/735-10143-32230U951100_BLACK_ALT03?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/735-10143-32230U951100_BLACK_M?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/735-10143-32230U951100_BLACK_ALT01?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0"
],
"price": "927",
"compareAtPrice": "1300",
"inventoryQuantity": "5",
"variants": [
{
"name": "Color",
"values": ["Black"]
}
]
},
{
"name": "Loewe Flamenco knotted leather clutch bag",
"description": "Loewe leather clutch bag\n100% calf leather\nMagnetic lock and drawstring closure\nDetachable, adjustable shoulder strap, knot detailing, interior slip pocket, logo details, suede interior\nDimensions: Height 24.5cm, width 30cm, depth 10.5cm, strap length 118-124cm\nSpecialist leather clean\nMade in Spain",
"images": [
"https://images.selfridges.com/is/image/selfridges/R04251244_BOTTLEGREEN_ALT05?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R04251244_BOTTLEGREEN_ALT04?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R04251244_BOTTLEGREEN_ALT02?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R04251244_BOTTLEGREEN_M?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0"
],
"price": "500",
"compareAtPrice": "780",
"inventoryQuantity": "6",
"variants": [
{
"name": "Color",
"values": ["Dark Green"]
}
]
},
{
"name": "Prada Moon shell shoulder bag",
"description": "Prada shell shoulder bag\n100% polyamide; contrast 100% leather\nOpen top with buckle-strap and press stud closure\nCurved shape, double top handles, brand metal plaque at front, one main compartment, internal zip pocket, padded, branded silver-toned hardware\nHeight 16cm, width 24cm, depth 9cm, handle drop 17cm\nWipe with a clean, dry cloth\nMade in Italy",
"images": [
"https://images.selfridges.com/is/image/selfridges/R04189520_BIANCO_M?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R04189520_BIANCO_ALT02?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R04189520_BIANCO_ALT03?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0"
],
"price": "1500",
"compareAtPrice": "1800",
"inventoryQuantity": "3",
"variants": [
{
"name": "Color",
"values": ["Silver", "Ice"]
}
]
},
{
"name": "Prada Shopper leather tote bag",
"description": "Prada leather tote bag\n100% lamb leather\nOpnen top\nRectangular shape, double top handles, triangle brand plaque at front, satin and leather flower design embellishment at front and sides, all over crinkled leather, silver-toned hardware, one main compartment, two internal zip pockets and brand plaque, fully lined\nHeight 39cm, width 36cm, depth 14.5cm, handle drop 24cm\nSpecialist leather clean",
"images": [
"https://images.selfridges.com/is/image/selfridges/R04129203_NERO_M?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R04129203_NERO_ALT02?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R04129203_NERO_ALT03?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0"
],
"price": "3000",
"compareAtPrice": "4800",
"inventoryQuantity": "5",
"variants": [
{
"name": "Color",
"values": ["Black", "Carton"]
}
]
},
{
"name": "Burberry Lola Padded small leather shoulder bag",
"description": "Burberry leather shoulder bag\n100% lamb leather\nMagnetic press-stud fastening at front\nAdjustable strap, gold-toned hardware, branded plaque at front, one main compartment, foiled branding at interior, slip pocket at interior, all-over padded texture fully lined\nHeight 13cm, width 22cm, depth 5cm, strap drop 46cm\nSpecialist leather clean\nMade in Italy",
"images": [
"https://images.selfridges.com/is/image/selfridges/R03995148_BLACKGOLD_M?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R03995148_BLACKGOLD_ALT03?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R03995148_BLACKGOLD_ALT02?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0"
],
"price": "987",
"compareAtPrice": "1480",
"inventoryQuantity": "6",
"variants": [
{
"name": "Color",
"values": ["Black"]
}
]
},
{
"name": "Burberry Kelbrook checked canvas coin case",
"description": "Burberry canvas coin case\n75% thermoplastic polyurethane, 25% cotton\nZip closure\nRectangular shape, all-over checked pattern, gold-toned hardware\nHeight 8cm, width 13cm, depth 1cm\nSponge clean",
"images": [
"https://images.selfridges.com/is/image/selfridges/R03995161_DARKBIRCHBROWN_M?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R03995161_DARKBIRCHBROWN_ALT03?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0",
"https://images.selfridges.com/is/image/selfridges/R03995161_DARKBIRCHBROWN_ALT02?wid=476&hei=634&fmt=webp&qlt=80,1&bgc=F6F6F6&extend=-18,0,-18,0"
],
"price": "120",
"compareAtPrice": "230",
"inventoryQuantity": "10",
"variants": [
{
"name": "Color",
"values": ["Pattern"]
}
]
}
],
"collections": [
{
"title": "Regal Bag",
"description": "Experience the best feel while using the best and handy bags for classy women, manifested in leather material and portable texture material.",
"collectionTypeSettings": {
"collectionType": "automatic",
"conditionsListings": {
"productsMustMatch": "any condition",
"conditions": [
{
"field": "product title",
"condition": "contains",
"value": "Regal Bag"
}
]
}
}
},
{
"title": "Pattern Bag",
"description": "Experience the best feel while using the best and handy bags for classy women, manifested in leather material and portable texture material.",
"collectionTypeSettings": {
"collectionType": "automatic",
"conditionsListings": {
"productsMustMatch": "any condition",
"conditions": [
{
"field": "product title",
"condition": "contains",
"value": "Pattern Bag"
}
]
}
}
},
{
"title": "LOEWE",
"description": "With its focus on luxury, Loewe combines vibrant fabrics and fine leathers with its famous Spanish heritage. The brand's origins can be traced back to mid-nineteenth-century Madrid, when a group of leather craftsmen joined forces. Today, Loewe’s premium products continue to pay homage to this tradition of handmade excellence. Discover our selection of women's and men's clothes, accessories, fragrances and homeware from the revered label.\nFrom raw-hem jeans and checked shirts to pleated trousers and graphic-print tees, Loewe’s clothing covers a lot of ground. Expect fashion-forward shell coats alongside classic cropped bombers, and sweaters in cashmere or mohair blends. Athleisure trainers, sleek belts and sturdy combat boots are all crafted from the the powerhouse’s signature smooth calf and lambskin leather. Loewe also uses its iconic material for wallets and shoulder bags – or you can opt for a basket-style tote woven from raffia. Many pieces feature the label's distinctive anagram branding, either embossed, embroidered or printed.\nThe majestic fragrances in our Loewe collection demonstrate the brand’s time-honoured artistry. Inspired by Victorian-era apothecaries and botanical gardens, it mixes aromas such as jasmine, tonka bean and spicy pepper with other divine-smelling ingredients. Pick from our edit of women's eau de parfum with patchouli, or a zesty men's cologne. For the home, choose from colourful candles with uplifting floral or herbal scents.",
"collectionTypeSettings": {
"collectionType": "automatic",
"conditionsListings": {
"productsMustMatch": "any condition",
"conditions": [
{
"field": "product title",
"condition": "contains",
"value": "LOEWE"
}
]
}
}
},
{
"title": "PRADA",
"description": "One secret to Prada’s success? Its fondness for innovation. The brand was founded in 1913 by Mario Prada, who opened his eponymous boutique in Milan’s famous Galleria Vittorio Emanuele II shopping arcade. Championing meticulous craftsmanship, the company became an official supplier to the Italian monarchy within the decade. Mario’s granddaughter, Miuccia, took the reins in the 70s and propelled the label to worldwide acclaim. The latest Prada styles feature technical fabrics and hybrid accents – browse our women’s and men’s range to discover the brand’s playful style for yourself.\nAcross our Prada clothing selection, you'll find cropped cuts, oversized silhouettes and utility-inspired materials. Contrast elements and gleaming hardware add a contemporary slant to shirts, which are cut into relaxed fits. Look out for ski-inspired jumpers and trousers finished with brightly coloured stripes and bold geometric patterns. For irresistible comfort, consider sweatshirts in breathable cotton with tone-on-tone branding, as well as figure-flattering silk skirts and blouses.\nDiscover new interpretations of archive styles in our Prada accessories lineup. Here, quilted leather and smooth nylon designs are signed off with the iconic triangle logo. Expect eccentric twists such as shimmering rhinestones and sequins on shoulder bags, phone cases and purses. Some utilitarian backpacks and cross-body bags are made from recycled materials; others are crafted from the label’s signature textured Saffiano leather.",
"collectionTypeSettings": {
"collectionType": "automatic",
"conditionsListings": {
"productsMustMatch": "any condition",
"conditions": [
{
"field": "product title",
"condition": "contains",
"value": "PRADA"
}
]
}
}
},
{
"title": "BURBERRY",
"description": "Founded in Basingstoke by Thomas Burberry, this quintessentially British brand brings together functional fabrics, iconic style and innovation in its luxury clothing and accessories. The Burberry check has become synonymous with the label and serves as just one example of its everlasting designs. One thing's for sure: Burberry has not only shaped the past but continues to influence the future of British fashion.\nBack in 1856, Burberry was founded on the basis that clothing should be designed to protect people from the British weather. Revolutionising rainwear with the first breathable, waterproof fabric was followed by creating the heritage trench coat, which remains a cornerstone in seasonal collections today. Thanks to the work of Chief Creative Officer Riccardo Tisci, you'll continue to find more of the same high-calibre pieces – complete with a generous dose of creativity, too. From the famous check print and smartly tailored silhouettes to Peter Saville's new logo (which adorns classic tees and TB-branded canvas bags), there are patterns, shapes and motifs for every occasion. \nWhat's more, Burberry fashion demonstrates how the label takes its impact on the world seriously. It was the first luxury brand to join the ethical trading initiative and has been recognised as an industry leader in the Dow Jones Sustainability Index. Wearing clothes with character and more planet-friendly credentials? That's a win-win in our eyes.",
"collectionTypeSettings": {
"collectionType": "automatic",
"conditionsListings": {
"productsMustMatch": "any condition",
"conditions": [
{
"field": "product title",
"condition": "contains",
"value": "BURBERRY"
}
]
}
}
}
]
}
Take your time. When you’re done move to the next line.
Phew!
That’s it for setting up a Shopify Store with products and collections.
Now let’s move to Next.js. This is where you will design your storefront to your desired taste.
Follow the steps below to create a Next.js project.
Go to your command prompt.
Enter this command into your terminal.
$ npx create-next-app@latest <your-project-name>Replace <your-project-name> with the name of your store.
Now that you have your Shopify store and your Next.js project ready. This section ends here.
In the next section, you will link your Shopify store with your Next.js project so it can serve as a storefront.
Let's go!