AstroVueE-commerce

tema-prumo — Astro Ecommerce Template

By ecomplus

An E-Com Plus menswear e-commerce theme template built on Astro and Vue, centered on a size-based repurchase shopping path, with a static size chart and a placeholder repurchase entry point.

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

A menswear theme whose purchase path is size-based repurchase, unlike occasion-based discovery

02

Adds a menswear section Astro component registered via the c: convention, avoiding the issue that inline utility classes in the CMS do not generate CSS

03

Adjusts theme-layer content such as brand settings, color scheme, notice bar, and homepage carousel and showcase

04

The repository is a thin shell, with the storefront and store logic in @cloudcommerce/* dependency packages

05

The README explicitly notes known limitations such as the size chart being a static model and one-click repurchase being only copy

Template Details

Prumo is an E-Com Plus store theme template for menswear (formalwear and shirts), built on Astro and Vue and themed from the ecomplus/store starter template. It frames the purchase path around repurchase rather than discovery: navigation is organized by size (for example, collar 39, sleeve 62), and the homepage and inner pages emphasize buying the same item again rather than re-selecting by occasion. On top of the starter template, the theme adjusts settings.json (brand name, domain, logo, green and brass color scheme, Pix discount, installments, and free-shipping threshold), Tailwind neutral colors and border radius, the layout.json notice bar and footer, and the homepage carousel and showcase; it also adds NichoModaMasculinaSection.astro as a menswear section component, registered via the c: convention. This section is implemented as an .astro component rather than CMS custom HTML because UnoCSS/Tailwind only scans ./src/**, so utility classes written in content/pages/*.json would not generate CSS. The repository is a thin shell: the storefront, components, and store logic live in @cloudcommerce/* packages, and upgrading the platform version is done by updating dependencies rather than merging with the starter template. The README explicitly lists known limitations: the size chart is a static model and does not come from product data; "one-click repurchase" is only copy, and the link points to the starter template's existing /app/account, with the actual flow depending on smart shelves being productized; the logo and icons are placeholder bitmaps; and routes such as /s/camisaria and /p/medidas respond only after the corresponding categories exist in the catalog. The demo site is noindex and uses a shared demo catalog.

AstroVueE-commerce

Is it right for your project?

Use Cases

  • Building a menswear storefront focused on size-based repurchase of shirts, formalwear, and similar items
  • Using it as a starting point for E-Com Plus theme customization, modifying content, colors, and homepage structure at the theme layer
  • Studying component registration and style scanning in an e-commerce theme combining Astro and Vue
  • Using it for demos or internal evaluation of an interface prototype for a menswear repurchase-oriented shopping path

Suitable For

  • E-Com Plus store developers who need a size-based repurchase path for menswear
  • Front-end teams willing to customize at the theme layer (src, content, public)
  • Projects that accept following platform versions by updating dependencies rather than merging the starter template

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; the local address is http://localhost:3000

  2. 2

    The catalog is a remote data source; configure an E-Com Plus store via npm run setup, otherwise the product showcase will be empty, though the carousel, banners, and menswear section will still render

  3. 3

    Replace placeholder content before launch: the brand name, domain, logo, colors, and contact details in settings.json; images in public/img/uploads; page copy in extra-pages; blocking rules in robots.txt; and the storeId and Firebase project in functions/*/config.json

  4. 4

    The README mentions Firebase integration; before enabling related dynamic features, configure it yourself and check Firebase quotas and billing

  5. 5

    Demo images come from Unsplash; third-party assets such as fonts and icons must be checked against their respective licenses and cannot be judged solely by the code's MIT license

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

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

Must comply with when using

  • You may use, modify, commercialize, and distribute this version's code for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • The README mentions Firebase integration; before enabling related dynamic features, configure it yourself and check Firebase quotas and billing.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
  • The product catalog is a remote data source; you must configure an E-Com Plus store (npm run setup), otherwise the product showcase will be empty.
  • The size chart is a static model and does not come from product data, so it cannot update automatically with product information.
  • "One-click repurchase" is only copy rather than an actual feature; the link points to /app/account, and a true one-click flow depends on smart shelves being productized.
  • The logo and icons are placeholder bitmaps and must be replaced and vectorized before production use.
  • Some routes are accessible only after the corresponding categories exist in the catalog.
  • robots.txt currently blocks all crawling because the demo site is noindex; it must be modified before launch.
  • You need to configure the storeId and Firebase project; before enabling dynamic features, check Firebase quotas and billing yourself.
  • Banner images come from Unsplash; third-party asset licensing must be checked against their respective licenses.
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

- **A régua de medidas é maquete estática.** Não vem do cadastro de produto.

Original README

- **O "repetir pedido" é copy, não recurso.** O link vai para `/app/account`, que existe no starter, mas o fluxo de um clique descrito na seção depende do smart shelves ser produtizado.

Original README

- Logo e ícone são wordmarks placeholder rasterizados. Ao fechar a identidade, vetorizar o texto.

Original README

- As rotas (`/s/camisaria`, `/p/medidas`…) só respondem depois que o catálogo tiver as categorias correspondentes.

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

Banners do Unsplash; imagens do starter removidas. Créditos em `CREDITOS.md`

Original README
https://github.com/ecomplus/tema-prumo/blob/main/LICENSEhttps://github.com/ecomplus/tema-prumo/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: a87360400878e7067e14d190a5c5ec0932a5ac9ad0e1daf622a7a2716d78c15e

2026-10-13T01:31:01.704Z

Source file / repository
# Prumo — loja demo do nicho de moda masculina

Cópia do starter [`ecomplus/store`](https://github.com/ecomplus/store)
tematizada para **moda masculina** (alfaiataria e camisaria). É a segunda
metade do par de moda, junto com [store-alinhavo](../store-alinhavo/).

> **Este nicho ainda não existe no site institucional.** Não há marca em
> `src/config/brands.ts` nem página em `/segmentos/`. O posicionamento foi
> **proposto**, não portado. Nome, logo e domínio são placeholders.

## Por que duas lojas de moda, e não uma

A diferença entre as duas não é a foto: é o **eixo de compra**, e é isso que
justifica ter as duas como demos separadas.

| | Alinhavo (feminina) | Prumo (masculina) |
|---|---|---|
| Eixo | **Descoberta** | **Repetição** |
| Navegação | Por ocasião (trabalho, festa, praia) | Por medida (colarinho 39, manga 62) |
| Problema central | Achar a peça certa e acertar a grade | Repor o mesmo item sem refazer a pesquisa |
| Bloco de fecho | Primeira troca de tamanho grátis | Repetir o último pedido em um clique |
| Ciclo | Muda a cada estação | Camisa branca não muda de estação |

O bloco de recompra do Prumo é aplicação direta do **"repetir último pedido"**
que a [auditoria de recursos](../planning/produto/planejamento/auditoria-recursos-storefront.md)
lista como parte do smart shelves da Atlas Parafusos — hoje construído sob
medida em uma loja só, marcado como PARCIAL, ainda fora do template padrão.

## 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` verde-loden + `secondaryColor` latão, 5% no Pix, 6x sem juros, frete grátis a partir de R$ 349 |
| `functions/ssr/tailwind.config.js` | Escala neutra levemente esverdeada, canto quase reto |
| `functions/ssr/content/layout.json` | Pitch bar (medida, frete, Pix), listas do rodapé, `ogImage` |
| `functions/ssr/content/pages/home.json` | Hero de 2 slides, 3 vitrines, grade de 3 banners e a seção de nicho |
| `functions/ssr/src/sections/NichoModaMasculinaSection.astro` | **Novo.** Régua de medidas em cm, três caimentos declarados e chamada de recompra |
| `functions/ssr/src/sections/_Sections.astro` | Registro da seção `c:nicho-moda-masculina` |
| `functions/ssr/content/extra-pages/` | Contato, trocas e termos em PT-BR |
| `functions/ssr/public/img/uploads/` | Banners do Unsplash; imagens do starter removidas. Créditos em `CREDITOS.md` |

## Por que loden e não azul-marinho

Azul-marinho é o lugar-comum da categoria, e o azul-aço já está ocupado pela
variante de clubes de tiro. O verde-loden com latão vem do vestuário masculino
de herança (militar/utilitário), que é o campo de referência do nicho — e é o
que a foto de banner (arara de peças em terrosos e mostarda) já entrega.

## 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

- **A régua de medidas é maquete estática.** Não vem do cadastro de produto.
- **O "repetir pedido" é copy, não recurso.** O link vai para `/app/account`,
  que existe no starter, mas o fluxo de um clique descrito na seção depende do
  smart shelves ser produtizado. Está marcado no componente.
- Logo e ícone são wordmarks placeholder rasterizados. Ao fechar a identidade,
  vetorizar o texto.
- As rotas (`/s/camisaria`, `/p/medidas`…) só respondem depois que o catálogo
  tiver as categorias correspondentes.
- Se a hipótese avançar, vale criar a marca em `brands.ts` e a rota
  `/demo/prumo` no site, como já existe para as três primeiras variantes.

## 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-prumo.web.app](https://tema-prumo.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.