{"id":13433656,"url":"https://github.com/btahir/next-shopify-starter","last_synced_at":"2025-05-15T04:04:38.669Z","repository":{"id":37479845,"uuid":"353859812","full_name":"btahir/next-shopify-starter","owner":"btahir","description":"Nextjs + Tailwind CSS + Shopify Starter","archived":false,"fork":false,"pushed_at":"2025-01-12T08:01:03.000Z","size":1441,"stargazers_count":840,"open_issues_count":4,"forks_count":274,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-10T10:09:53.796Z","etag":null,"topics":["ecommerce","ecommerce-website","nextjs","nextjs-starter","nextjs-template","shopify","shopify-api","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://doggystickers.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/btahir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-02T00:21:21.000Z","updated_at":"2025-04-10T07:31:06.000Z","dependencies_parsed_at":"2025-02-12T16:01:33.253Z","dependency_job_id":"d090c50e-2776-4dd1-bfde-cdc40eda565f","html_url":"https://github.com/btahir/next-shopify-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btahir%2Fnext-shopify-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btahir%2Fnext-shopify-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btahir%2Fnext-shopify-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btahir%2Fnext-shopify-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/btahir","download_url":"https://codeload.github.com/btahir/next-shopify-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270641,"owners_count":22042858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ecommerce","ecommerce-website","nextjs","nextjs-starter","nextjs-template","shopify","shopify-api","tailwind","tailwindcss"],"created_at":"2024-07-31T02:01:32.140Z","updated_at":"2025-05-15T04:04:38.643Z","avatar_url":"https://github.com/btahir.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Nextjs Templates"],"sub_categories":[],"readme":"# Next.js + Tailwind CSS + Shopify Starter\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://github.com/btahir/next-shopify-starter/blob/main/public/images/demo-store.gif\"\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://doggystickers.vercel.app/\"\u003eLive Demo\u003c/a\u003e •\n  \u003ca href=\"https://nextails.com/\"\u003eSee more starters\u003c/a\u003e •\n  \u003ca href=\"https://twitter.com/deepwhitman\"\u003eFollow me on Twitter\u003c/a\u003e\n\u003c/p\u003e\n\u003c/div\u003e\n\nThis is a fully functional eCommerce store that uses Next.js + Tailwind CSS in the front end and leverages the Shopify Storefront API to interact with your Shopify backend. You can see a Live Demo [here](https://doggystickers.vercel.app/ \"Shopify store\").\n\nWe use GraphQL to query our Shopify data and store the cart information in localStorage to persist user session. Finally - we use Shopify Checkout to let the user\npurchase the items. You can see this play out in the example store. Yes - the store is functional and you can buy the stickers. :smiley:\n\n## High Performance\n\n\u003ctable align=\"center\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eDesktop\u003c/td\u003e\n      \u003ctd\u003eMobile\u003c/td\u003e\n    \u003ctr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg width=\"300\" height=\"300\" src=\"https://github.com/btahir/next-shopify-starter/blob/main/public/images/desktop-lighthouse.png\"/\u003e\u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg width=\"300\" height=\"300\" src=\"https://github.com/btahir/next-shopify-starter/blob/main/public/images/mobile-lighthouse.png\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Mobile Responsive\n\n\u003ctable align=\"center\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eListings\u003c/td\u003e\n      \u003ctd\u003eCart\u003c/td\u003e\n    \u003ctr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg width=\"300\" height=\"300\" src=\"https://github.com/btahir/next-shopify-starter/blob/main/public/images/responsive-main.gif\"/\u003e\u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg width=\"300\" height=\"300\" src=\"https://github.com/btahir/next-shopify-starter/blob/main/public/images/responsive-cart.gif\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## The Tech\n\n* Next.js + Tailwind CSS\n* GraphQL\n* localStorage to persist user session\n* Shopify\n* Vercel\n* Font Awesome Icons\n* Josefin Sans Google Font\n\n## How to use\n\nBy default, the store is set to query and show all products in one collection. \nYou can extend this to query multiple collections or your whole store.\n\n#### A note on pagination in the GraphQL queries\n\nThe graphQL queries are all hardcoded to pull the maximum number of products/variants/images which\nis set to 250 by Shopify. I did this to keep things simple. Pagination would have made the queries complicated\nand 250 items is enough for most use cases.\n\nIf you require pagination you will have to keep track of the [cursor](https://youtu.be/S37WsC8GzSA \"graphql pagination\") field and keep querying the data until you fetch all items.\n\n### Setup Environment variables\n\nCreate a .env.local file in the root directory. You need to add these 4 variables:\n\n```\nNEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=\nNEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=\nNEXT_PUBLIC_SHOPIFY_COLLECTION=\nNEXT_PUBLIC_LOCAL_STORAGE_NAME=\n```\n\nThe NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN and NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN (it will be something like DOMAIN_NAME.myshopify.com) are needed to access\nthe Shopify Storefront API (make sure you have set it up in your Shopify store. See [docs](https://shopify.dev/docs/storefront-api/getting-started \"Shopify store\") for more information.\n\nNEXT_PUBLIC_SHOPIFY_COLLECTION is the name of the collection you want to pull in and NEXT_PUBLIC_LOCAL_STORAGE_NAME is the name of the key\nyour users will store their cart information under. The exact name isn't that important although I suggest you make it unique so\nit is less likely to clash with other stored objects. Something like yourStoreNameShopifyStore where yourStoreName is your shopify store name will suffice.\n\n### Installation\n\nChange into the project directory and run the following command:\n\n```\nyarn \u0026\u0026 yarn dev\n```\n\n### Update Site Metadata\n\nYou can update your site metadata in the next.config.js file. \n\n```\nenv: {\n  siteTitle: 'Your Company',\n  siteDescription: 'Your company description.',\n  siteKeywords: 'your company keywords',\n  siteUrl: 'https://doggystickers.xyz',\n  siteImagePreviewUrl: '/images/main.jpg',\n  twitterHandle: '@your_handle'\n} \n```\n\n### Update Colors\n\nYou can update the color palette in tailwind.config.js file.\n\n```\ncolors: {\n  palette: {\n    lighter: '',\n    light: '',\n    primary: '',\n    dark: '',\n  },\n},\n```\n### Update Progressive Web App (PWA) data\n\nUpdate the manifest.json file and the icons under the public/images/icons folder.\n\nYou can use free tools online such as https://realfavicongenerator.net/ to quickly generate all the different icon sizes and favicon.ico file.\n\n### Deployment\n\nYou can deploy this using any number of services. Vercel and Netlify are the ones I prefer and very easy to setup and sync with your Github repo.\n\n### Credit\n\nThe store was inspired by the awesome [Gatsby Swag Store](https://github.com/gatsbyjs/store.gatsbyjs.org \"gatsby store\") as well\nas countless other devs much more capable than me who put out their awesome work for free. \n\n### License\n\nI have open sourced this code under the MIT License in the hope that if this helps people navigate their way around JAMStack eCommerce stores\nas the Gatsby Swag Store did for me when I first started out.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtahir%2Fnext-shopify-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbtahir%2Fnext-shopify-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtahir%2Fnext-shopify-starter/lists"}