AstroVueE-commerce

tema-despensa — Astro Ecommerce Template

By ecomplus

An E-Com Plus e-commerce theme template for grocery, food and beverage categories, built with Astro and Vue, including custom sections for dietary restriction filters, shelf life and cold chain information.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-13View source

What stands out

A quick read of the recorded project description.

01

E-Com Plus e-commerce theme based on Astro and Vue, for grocery, food and beverage categories

02

Adds a food category section supporting dietary restriction filters, shelf life and cold chain assurance descriptions, and a subscription replenishment entry

03

Custom brand settings, Tailwind neutral color scale and border radius, homepage hero, product showcases and banner grid

04

Additional pages such as contact, exchange and terms rewritten in Portuguese, with terms text still a to-do

05

Repository is a thin shell; storefront and store logic reside in @cloudcommerce/* dependency packages

06

Licensed under MIT, permitting free use, modification, commercial use and distribution of this version's code

Template Details

tema-despensa is an e-commerce theme template on the E-Com Plus platform, positioned as a demo store for grocery, food and beverage categories. It is a themed modification of the public ecomplus/store starter template; the brand name, logo and domain are placeholders, and it is an internal prototype rather than a ready-to-launch store.

The theme adjusts the starter template's brand settings (name, description, domain, logo/icon, primary and secondary colors, Pix discount, free shipping threshold), Tailwind neutral color scale and border radius, layout content (pitch bar, footer headings, ogImage), homepage content (two-slide hero, three product showcases, three-banner grid and food category section), and adds a NichoAlimenticioSection.astro section for filtering by dietary restrictions, displaying shelf life and cold chain assurance, and a subscription replenishment entry. Additional pages such as contact, exchange and terms are rewritten in Portuguese, with the terms still marked as a to-do and no fabricated legal text.

The repository is a thin shell: the storefront, components and store logic reside in @cloudcommerce/* packages, not in this repository. Updating the platform version requires upgrading dependency versions rather than merging with the starter template. The product catalog is remote data; without a configured E-Com Plus store, product showcases are empty, but the hero, banners and food category section still render. Known to-dos include placeholder SVG text for logo and icons, filter routes requiring the catalog to have corresponding categories and specifications, the icon set defaulting to heroicons only, and the food category color scheme not yet validated.

AstroVueE-commerce

Is it right for your project?

Use Cases

  • Building a demo store or prototype for grocery, food or beverage e-commerce
  • Evaluating how the E-Com Plus platform handles theme customization for food categories
  • Using as a starting point for a food category store, after replacing brand, logo, domain and content
  • Referencing the implementation of the added food category section (Astro component + c: registration convention)

Suitable For

  • Developers or teams needing a food category e-commerce theme prototype
  • Stores using the E-Com Plus platform and wanting to start from a template
  • Readers wanting to understand how Astro + Vue organize sections in an e-commerce theme

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Run npm i and npm run dev to start local development, default address http://localhost:3000

  2. 2

    Product catalog is remote data; configure an E-Com Plus store via npm run setup, otherwise product showcases are empty

  3. 3

    Before launch, replace placeholder content in settings.json such as name, domain, logo, colors and contact information

  4. 4

    Replace logo, icons and banners in public/img/uploads/ (current images from Unsplash, attribution in CREDITOS.md)

  5. 5

    robots.txt currently blocks all crawling because the demo site is noindex; adjust before launch

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is this version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • Permits free use, modification, commercial use and distribution of this version's code.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • Code is provided as is; warranties and liability limitations are governed by the original license and applicable law.

Additional costs & items to verify

  • README mentions Firebase integration; configure it yourself before enabling related dynamic features, and check Firebase quotas and charges.
  • Demo images, fonts, icons and other third-party assets must be checked against their respective licenses; do not judge solely by the code's MIT license.
  • External services such as domain, hosting, database, payment or AI may incur additional charges.
  • Product catalog is remote data; you must configure an E-Com Plus store (npm run setup) to display product showcases, otherwise they are empty.
  • Filter routes (e.g. /s/sem-gluten, /s/mercearia, /assine) are only available after the catalog has corresponding categories and specifications.
  • Default icon set includes only heroicons etc.; switching to lucide or tabler requires adding @iconify-json/<set> dependencies yourself.
  • Food category color scheme has not been validated by theme research, marked as TODO: validar, and needs your own confirmation.
  • Logo and icons are placeholder SVG text; replace before launch and vectorize the text to avoid relying on device fonts.
  • robots.txt currently blocks all crawling (demo site is noindex); adjust before launch.
  • Configure storeId and Firebase project in config.json (npm run setup).
  • Current banner photos are from Unsplash, attribution in CREDITOS.md; replace before launch and verify asset licenses.
  • If the build fails after upgrading platform dependencies, fixes belong to the cloud-commerce repository, not this theme repository.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

O catálogo é remoto: sem uma loja E-Com Plus configurada (`npm run setup`), as vitrines de produto vêm vazias

Original README

As rotas de filtro (`/s/sem-gluten`, `/s/mercearia`, `/assine`…) só respondem depois que o catálogo tiver as categorias e especificações correspondentes.

Original README

Conjunto de ícones segue o padrão do starter (heroicons). Trocar por lucide ou tabler exige adicionar `@iconify-json/<set>` às dependências

Original README

A paleta do nicho, diferente da de beleza, não veio de levantamento de temas campeões — está marcada como `TODO: validar` em `brands.ts` e aqui.

Original README

Logo e ícone são wordmarks SVG placeholder, com o texto em `<text>`. Ao definir a identidade, vetorizar o texto para não depender da fonte do dispositivo.

Original README

`functions/ssr/public/robots.txt` — hoje bloqueia tudo, porque a demo é `noindex`

Original README

`functions/*/config.json` — `storeId` e projeto Firebase (`npm run setup`)

Original README

as fotos atuais vêm do Unsplash; créditos em `CREDITOS.md`

Original README

Se o build quebrar depois de atualizar, a correção pertence ao [`cloud-commerce`](https://github.com/ecomplus/cloud-commerce), não a este repositório.

Original README
https://github.com/ecomplus/tema-despensa/blob/main/LICENSEhttps://github.com/ecomplus/tema-despensa/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 85 / 100
Technologies
Astro · Vue
Website type
E-commerce
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-08-03
Screenshot last checked
2026-10-13

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-13

Inspect the recorded source material

SHA-256: 8a7caf524c118bd477838a9a70c0ac17d12405789d2545d8112d48cfae71f736

2026-10-13T01:29:54.283Z

Source file / repository
# Despensa — loja demo do nicho alimentício

Cópia do starter [`ecomplus/store`](https://github.com/ecomplus/store)
tematizada para **alimentos, bebidas e mercearia**. Serve de vitrine navegável
para a hipótese de nicho que hoje só existe como página de venda no site
institucional.

- Marca e copy: `www.e-com.plus/src/config/brands.ts`, objeto `despensa`
  (rota `/demo/despensa`).
- Argumentos do nicho: `www.e-com.plus/src/pages/segmentos/alimenticio.astro`.
- Vitrine do nicho: `www.e-com.plus/src/components/alimenticio/vitrine/`.
- Referência de mercado: [tiasonia.com.br](https://www.tiasonia.com.br) — case
  publicado da plataforma, granola D2C de indústria.

> **Protótipo interno.** Nome, logo e domínio são placeholders. Nenhum número
> de resultado foi inventado: os únicos dados de performance citados no
> material do nicho são os publicados nas páginas de case do site.

## O que foi customizado em relação ao starter

| Arquivo | O que mudou |
|---|---|
| `functions/ssr/content/settings.json` | Nome, descrição, domínio, logo/ícone, `primaryColor` terracota + `secondaryColor` verde erva, desconto de 5% no Pix, frete grátis a partir de R$ 129 |
| `functions/ssr/tailwind.config.js` | Escala neutra quente (creme/areia) no lugar do cinza padrão, raio de borda mais suave |
| `functions/ssr/content/layout.json` | Pitch bar (frete, Pix, assinatura), títulos das listas do rodapé, `ogImage` |
| `functions/ssr/content/pages/home.json` | Hero de 2 slides, 3 vitrines de produto, grade de 3 banners e a seção de nicho |
| `functions/ssr/src/sections/NichoAlimenticioSection.astro` | **Novo.** Filtros por restrição alimentar, garantias de validade/cadeia fria e chamada de reposição programada |
| `functions/ssr/src/sections/_Sections.astro` | Registro da seção customizada `c:nicho-alimenticio` |
| `functions/ssr/content/extra-pages/` | Contato, trocas e termos reescritos em PT-BR (termos ficaram como pendência explícita, sem texto jurídico inventado) |
| `functions/ssr/public/img/uploads/` | Banners do Unsplash; imagens de demo do starter removidas. Créditos em `CREDITOS.md` |

## Por que a seção de nicho é um componente, e não HTML no CMS

O UnoCSS/Tailwind desta stack varre apenas `./src/**` — classe utilitária
escrita dentro de `content/pages/*.json` (seção `custom-html`) não gera CSS. Por
isso a vitrine do nicho é um `.astro` em `src/sections/`, registrado pela
convenção `c:` que o `_Sections.astro` já previa.

## Rodando

```bash
npm i
npm run dev     # http://localhost:3000
npm run build
```

O catálogo é remoto: sem uma loja E-Com Plus configurada (`npm run setup`), as
vitrines de produto vêm vazias — o hero, os banners e a seção de nicho
renderizam normalmente.

## Pendências conhecidas

- Logo e ícone são wordmarks SVG placeholder, com o texto em `<text>`. Ao
  definir a identidade, vetorizar o texto para não depender da fonte do
  dispositivo.
- As rotas de filtro (`/s/sem-gluten`, `/s/mercearia`, `/assine`…) só respondem
  depois que o catálogo tiver as categorias e especificações correspondentes.
- Conjunto de ícones segue o padrão do starter (heroicons). Trocar por lucide
  ou tabler exige adicionar `@iconify-json/<set>` às dependências — hoje só
  heroicons, fa6-brands e logos vêm com `@cloudcommerce/storefront`.
- A paleta do nicho, diferente da de beleza, não veio de levantamento de temas
  campeões — está marcada como `TODO: validar` em `brands.ts` e aqui.

## Como atualizar a base da plataforma

Este repositório é uma **casca fina**. O storefront, os componentes e a lógica
de loja moram nos pacotes `@cloudcommerce/*`, não aqui. Atualizar o tema para
uma versão nova da plataforma **não** é fazer merge com o starter
[`ecomplus/store`](https://github.com/ecomplus/store) — é subir a versão das
dependências, exatamente como as lojas em produção fazem: a
[tiasonia](https://www.tiasonia.com.br) tem mais de 260 commits `Update to v`
no próprio repositório e nenhum merge com o starter.

Todos os pacotes `@cloudcommerce/*` andam na mesma versão, na raiz e em cada
grupo de functions (`ssr`, `many`, `with-apps`):

```bash
# 1. ver a versão mais recente e o changelog
npm view @cloudcommerce/cli version
# https://github.com/ecomplus/cloud-commerce/releases

V=2.61.4   # troque pela versão alvo

# 2. raiz
npm i -D @cloudcommerce/cli@$V @cloudcommerce/eslint@$V

# 3. cada grupo de functions
(cd functions/ssr && npm i \
  @cloudcommerce/api@$V @cloudcommerce/firebase@$V @cloudcommerce/ssr@$V \
  @cloudcommerce/i18n@$V @cloudcommerce/storefront@$V @cloudcommerce/types@$V)
(cd functions/many && npm i \
  @cloudcommerce/feeds@$V @cloudcommerce/firebase@$V @cloudcommerce/passport@$V)
(cd functions/with-apps && npm i \
  @cloudcommerce/events@$V @cloudcommerce/firebase@$V @cloudcommerce/modules@$V)

# 4. validar antes de commitar
npm run build

# 5. commitar no padrão das lojas em produção
git commit -am "Update to v$V"
```

Se o build quebrar depois de atualizar, a correção pertence ao
[`cloud-commerce`](https://github.com/ecomplus/cloud-commerce), não a este
repositório. Aqui só entra o que é **do tema**: `functions/ssr/src/`,
`functions/ssr/content/` e `functions/ssr/public/`.

## Este repositório é um template

Use **"Use this template"** no GitHub para começar uma loja a partir deste tema.
O repositório gerado é independente: não existe upstream para puxar, e a
manutenção segue o fluxo de versão acima.

Antes de ir ao ar, troque o que é placeholder:

- `functions/ssr/content/settings.json` — nome, domínio, logo, cores, contato
- `functions/ssr/public/img/uploads/` — logo, ícone e banners (as fotos atuais
  vêm do Unsplash; créditos em `CREDITOS.md`)
- `functions/ssr/content/extra-pages/` — contato, trocas e termos
- `functions/ssr/public/robots.txt` — hoje bloqueia tudo, porque a demo é
  `noindex`
- `functions/*/config.json` — `storeId` e projeto Firebase (`npm run setup`)

> **Demo publicada:** [tema-despensa.web.app](https://tema-despensa.web.app) — `noindex`, com
> catálogo compartilhado de demonstração.

---

Documentação do starter: [SETUP.pt-BR.md](./SETUP.pt-BR.md) ·
[Cloud Commerce](https://github.com/ecomplus/cloud-commerce)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.