Cookie Store - Astro Starter Template 🛸

Cookie Store is a starter template for online product seller's. Built with Astro, Shopemaa Commerce & TailwindCSS.

This Free Template is sponsored by Web3Templates

Live Demo

https://cookie-store.shopemaa.com

Demo

Home

Cart

Pagespeed Score

Installation

If you are reading this on github, you can click on the "Use this template" button above to create a new repository from astroship to your account. Then you can do a git clone to clone it to your local system.

Alternatively, you can clone the project directly from this repo to your local system.

1. Clone the repo

git clone git@github.com:shopemaa/astro-cookie-store.git myProjectName
# or
git clone git@github.com:shopemaa/astro-cookie-store.git .

The . will clone it to the current directory so make sure you are inside your project folder first.

2. Install Dependencies

npm install
# or
yarn install
# or (recommended)
pnpm install

3. Environment Setup

Create an .env file & set store key & secret.

PUBLIC_SHOPEMAA_KEY={APP_KEY}
PUBLIC_SHOPEMAA_SECRET={APP_SECRET}

4. Start development Server

npm run dev
# or
yarn dev
# or (recommended)
pnpm dev

Preview & Build

npm run preview
npm run build
# or
yarn preview
yarn build
# or (recommended)
pnpm preview
pnpm build

We recommend using pnpm to save disk space on your computer.

Other Commands

pnpm astro ...
pnpm astro add
pnpm astro --help

Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── ...
├── src/
│   ├── components/
│   │   └── ...
│   ├── layouts/
│   │   └── ...
│   └── pages/
│       └── ...
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

Any static assets, like images, can be placed in the public/ directory.

TailwindCSS

TailwindCSS is already configured in this repo, so you can start using it without any installation.

Checkout powered by Shopemaa Commerce

Shopemaa Commerce

Credits

Hero Illustration by Streamline

👀 Want to learn more?

Feel free to check out Astro Docs or jump into our Discord Chat.