Skip to content

microCMSテンプレート: シンプルなECサイトテンプレート

microCMSとStripeを利用した、シンプルなECサイトのテンプレートです。 microCMSで商品情報を管理し、決済時や商品情報の更新時にデータをStripeに同期することでオンライン決済に対応しました。 カスタマイズを前提に、Taildwind CSSとDaisyUIを利用したシンプルなデザインで実装しています。 ECサイトをmicroCMSで構築する際のベーステンプレートとしてお使いください。Demo: https://microcms-template-stripe-simple-commerce.pages.dev/

applications
microCMSテンプレート: シンプルなECサイトテンプレート

Background

microCMSのテンプレートを作ってみたいという意図で着手したプロジェクトです。Next.js App RouterやCloudflare Pagesなどにも挑戦する目的もありました。

Stripeがノーコード・ローコードで決済フォームを提供する仕組み・APIを用意していますが、結局のところECサイトやサービスサイトなどのフロントエンドは必要です。このあたりの連携をどのように設計するのがよいかを試行錯誤する意味も込めてテンプレート化しました。

Architecture

テンプレートですので、Next.js / Tailwind CSSを使っていることと、microCMS / StripeのAPIを利用することが前提になっていること以外に特別な要件などはありません。

ただ、デモサイトをデプロイするにあたって、すこしCloudflare Pagesで動作させるための調整を入れたバージョンを用意しています。

Visit site / repository
Hidetaka Okamoto profile photo

Hidetaka Okamoto

Developer Experience Engineer

Developer Experience Engineer. A developer specialized in serverless application development on AWS and Cloudflare. Former Stripe Developer Advocate / AWS Samurai 2017. Skilled in creating content and presentations that introduce service usage and best practices. You can follow me on Twitter at @hidetaka_dev