{"id":19096132,"url":"https://github.com/zeon-studio/commerceplate","last_synced_at":"2025-05-16T14:09:17.027Z","repository":{"id":213919848,"uuid":"735258287","full_name":"zeon-studio/commerceplate","owner":"zeon-studio","description":"Shopify Storefront Boilerplate Using Nextjs and Tailwindcss","archived":false,"fork":false,"pushed_at":"2025-01-12T07:02:56.000Z","size":915,"stargazers_count":152,"open_issues_count":3,"forks_count":185,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-27T17:14:35.274Z","etag":null,"topics":["boilerplate","ecommerce","nextjs","shopify","starter-template","storefront-api","tailwindcss"],"latest_commit_sha":null,"homepage":"https://zeon.studio/preview?project=commerceplate","language":"TypeScript","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/zeon-studio.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":"2023-12-24T08:47:58.000Z","updated_at":"2025-03-27T15:39:11.000Z","dependencies_parsed_at":"2023-12-31T15:29:48.628Z","dependency_job_id":"f6be2589-4a2e-4eba-9c2f-550cf8dfb406","html_url":"https://github.com/zeon-studio/commerceplate","commit_stats":null,"previous_names":["zeon-studio/commerceplate"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeon-studio%2Fcommerceplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeon-studio%2Fcommerceplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeon-studio%2Fcommerceplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeon-studio%2Fcommerceplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeon-studio","download_url":"https://codeload.github.com/zeon-studio/commerceplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247052619,"owners_count":20875685,"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":["boilerplate","ecommerce","nextjs","shopify","starter-template","storefront-api","tailwindcss"],"created_at":"2024-11-09T03:35:54.666Z","updated_at":"2025-04-12T14:19:37.458Z","avatar_url":"https://github.com/zeon-studio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=center\u003eCommerceplate | NextJs + Shopify + Tailwind CSS + TypeScript Starter and Boilerplate\u003c/h1\u003e\n\n\u003cp align=center\u003eA free, production-ready Next.js template powered by Tailwind CSS and TypeScript, specifically designed for Shopify. Utilizes the Shopify Storefront API through GraphQL and providing everything you need to jumpstart your Next project and save valuable time.\u003c/p\u003e\n\n\u003cp align=center\u003eMade with ♥ by \u003ca href=\"https://zeon.studio/\"\u003eZeon Studio\u003c/a\u003e\u003c/p\u003e\n\u003cp align=center\u003e If you find this project useful, please give it a ⭐ to show your support. \u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003e \u003ca target=\"_blank\" href=\"https://commerceplate.netlify.app/\" rel=\"nofollow\"\u003e👀 Demo\u003c/a\u003e | \u003ca  target=\"_blank\" href=\"https://pagespeed.web.dev/analysis/https-commerceplate-netlify-app/c4gacsjy7n?form_factor=desktop\"\u003ePage Speed (97%)🚀\u003c/a\u003e\n\u003c/h2\u003e\n\n\u003cp align=center\u003e\n\n  \u003ca href=\"https://github.com/vercel/next.js/releases/tag/v15.3.0\" alt=\"Contributors\"\u003e\n    \u003cimg src=\"https://img.shields.io/static/v1?label=NEXTJS\u0026message=15.3\u0026color=000\u0026logo=nextjs\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/zeon-studio/commerceplate/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/zeon-studio/commerceplate\" alt=\"license\"\u003e\u003c/a\u003e\n\n  \u003cimg src=\"https://img.shields.io/github/languages/code-size/zeon-studio/commerceplate\" alt=\"code size\"\u003e\n\n  \u003ca href=\"https://github.com/zeon-studio/commerceplate/graphs/contributors\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/contributors/zeon-studio/commerceplate\" alt=\"contributors\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 📌 Key Features\n\n- 🌐 Dynamic Products from Shopify Storefront API\n- 💸 Checkout and Payments with Shopify\n- 🌞 Automatic Light/Dark Mode\n- 🚀 Fetching and Caching Paradigms\n- 🔗 Server Actions for Mutations\n- 🔐 User Authentication\n- 🧩 Similar Products Suggestions\n- 🔍 Search, Sort, Different Views Functionality\n- 🏷️ Tags \u0026 Categories \u0026 Vendors \u0026 Price Range \u0026 Product Variants Functionality\n- 🖼️ Single Product Image Zoom, Hover Effect, Slider\n- 🛒 Cart \u0026 Easy editing options for cart items\n- 📝 Product Description on Multiple Tabs\n- 🔗 Netlify Setting Pre-configured\n- 📞 Support Contact Form\n- 📱 Fully Responsive\n- 🔄 Dynamic Home Banner Slider\n- 📝 Write and Update Content in Markdown / MDX\n- ⌛ Infinite Product Load on Scrolling\n\n### 📄 10+ Pre-designed Pages\n\n- 🏠 Homepage\n- 👤 About\n- 📞 Contact\n- 🛍️ Products\n- 📦 Product Single\n- 💡 Terms of services\n- 📄 Privacy Policy\n- 🔐 Login\n- 🔑 Register\n- 🚫 Custom 404\n\n## 🚀 Getting Started\n\n### 📦 Dependencies\n\n- shopify\n- next 15.3.0+\n- node v20.10+\n- npm v10.2+\n- tailwind v4.1+\n\n\u003c!-- get Shopify storefront API access token--\u003e\n\n## 🛒 Retrieve Shopify Token \u0026 Add Demo Products\n\n- To get the tokens needed, create a Shopify partner account.\n  ![Screenshot_1](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/1.png)\n\n- Now go to 'stores' and select 'Add store.' Create a development store using the option 'Create development store'.\n  ![Screenshot_2](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/2.png)\n\n- Click on import products.\n  ![Screenshot_3](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/3.png)\n\n- Locate the 'products' CSV file in the public folder of the repository and upload it for demo products.\n  ![Screenshot_4](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/4.png)\n\n- On the admin dashboard, click on ‘Settings’ at the bottom of the left sidebar.\n  ![Screenshot_5](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/5.png)\n\n- On the Settings page, click on ‘Apps and sales channels’ on the left sidebar.\n  ![Screenshot_6](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/6.png)\n\n- In the Apps and sales channels page that opens, click on ‘Develop apps’ on the top right.\n  ![Screenshot_7](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/7.png)\n\n- Now, on the App development page that opens, click on ‘Create an app’.\n  ![Screenshot_8](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/8.png)\n\n- A ‘Create an app’ popup opens. Fill in any name in the ‘App Name’ text box. In the App Developer text box, your name and email id is automatically fetched. Else type in the same email id you used while signing up for the Shopify store.\n  ![Screenshot_9](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/9.png)\n\n- Next, click on ‘Configure’ in the Storefront API integration section.\n  ![Screenshot_10](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/10.png)\n\n- In the Storefront API access scopes, select and check all the boxes and click on ‘Save’ and then ‘Install app’.\n  ![Screenshot_11](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/11.png)\n\n- Navigate to the 'API credentials' tab and locate three essential pieces of information. Subsequently, update your `.env` file by replacing the placeholder quotes(\"\") in the `.env.example` file with your Shopify credentials.\n  ![Screenshot_12](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/12.png)\n\n- When adding your product, use the same alt title for images with the same color. This helps the first image appear as the color variant in the selector.\n  ![Screenshot_13](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/13.png)\n  ![Screenshot_14](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/14.png)\n\n- We have the option to create additional collections for products.\n  ![Screenshot_15](https://raw.githubusercontent.com/tfmurad/images-shopify-commerce/refs/heads/main/15.png)\n\n## 🚀 Setting Up the Hero Slider\n\n1. Go to the file `/src/config/config.json` in your Shopify project and find the 'hero_slider' section. You’ll see something like this:\n\n   ```json\n   \"shopify\": {\n     \"currencySymbol\": \"৳\",\n     \"currencyCode\": \"BDT\",\n     \"collections\": {\n       \"hero_slider\": \"hidden-homepage-carousel\",\n       \"featured_products\": \"featured-products\"\n     }\n   }\n   ```\n\n2. Change the 'hero_slider' collection name to something of your choice.\n\n3. Then, go to your Shopify Partner Dashboard, navigate to Products \u003e Collections, and create a collection with the same name you set in the config file (e.g., 'hidden-homepage-carousel').\n\n4. Add the products you want to display in the hero slider to this collection.\n\n### 👉 Install Dependencies\n\n```bash\nnpm install\n```\n\n### 👉 Development Command\n\n```bash\nnpm run dev\n```\n\n### 👉 Build Command\n\n```bash\nnpm run build\n```\n\n\u003c!-- reporting issue --\u003e\n\n## 🐞 Reporting Issues\n\nWe use GitHub Issues as the official bug tracker for this Template. Please Search [existing issues](https://github.com/zeon-studio/commerceplate/issues). It’s possible someone has already reported the same problem.\nIf your problem or idea has not been addressed yet, feel free to [open a new issue](https://github.com/zeon-studio/commerceplate/issues).\n\n\u003c!-- licence --\u003e\n\n## 📝 License\n\nCopyright (c) 2023 - Present, Designed \u0026 Developed by [Zeon Studio](https://zeon.studio/)\n\n**Code License:** Released under the [MIT](https://github.com/zeon-studio/commerceplate/blob/main/LICENSE) license.\n\n**Image license:** The images are only for demonstration purposes. They have their license, we don't have permission to share those images.\n\n## 💻 Need Custom Development Services?\n\nIf you need a custom theme, theme customization, or complete website development services from scratch you can [Hire Us](https://zeon.studio/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeon-studio%2Fcommerceplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeon-studio%2Fcommerceplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeon-studio%2Fcommerceplate/lists"}