AstroVueE-commerce

tema-alinhavo — Astro Ecommerce Template

By ecomplus

A Cloud Commerce women's fashion e-commerce theme for E-Com Plus, built on Astro and Vue, customized from the official store starter template with demo content such as a size chart and exchange policy.

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

Built with Astro and Vue on top of E-Com Plus's Cloud Commerce starter template

02

Customized for the women's fashion category: near-black primary color with camel secondary color, square corners, and a gray-beige neutral palette

03

Adds a category block component offering navigation by occasion, a centimeter-based size chart, and exchange information

04

Homepage includes a double carousel, three product showcases, and a three-banner grid, plus Portuguese-language pages for contact, exchanges, and terms

05

The repository is a thin shell; storefront and store logic come from @cloudcommerce/* dependency packages

Template Details

Alinhavo is a women's fashion category variant of E-Com Plus's official starter template ecomplus/store, used to build women's fashion online stores on the Cloud Commerce platform. The repository itself is a thin shell: storefront components and store logic live in @cloudcommerce/* packages, while theme-related code is concentrated in functions/ssr/src/, functions/ssr/content/, and functions/ssr/public/. Compared to the starter template, it rewrites site settings (name, domain, logo, near-black primary color with camel secondary color, Pix discount, installments, and free shipping threshold), the Tailwind neutral gray-beige palette and square corners, homepage content (double carousel, three product showcases, three-banner grid), and additional Portuguese-language pages such as contact, exchanges, and terms. The added NichoModaFemininaSection.astro component provides navigation by occasion, displays a size chart in centimeters, measurement assurance, and free exchange notices, and is registered via _Sections.astro as c:nicho-moda-feminina. The product catalog is remote data; without an E-Com Plus store configured, product showcases are empty, but the hero, banners, and category blocks still render. The README explicitly lists several incomplete items: the size chart is a static mockup not connected to product specifications; out-of-stock notification functionality does not exist; the logo and icons are placeholder bitmaps; some routes are only accessible after the corresponding category exists in the catalog.

AstroVueE-commerce

Is it right for your project?

Use Cases

  • Building a women's fashion online store on the Cloud Commerce platform
  • Serving as a category customization reference for the E-Com Plus starter template, showing settings and page changes for the women's fashion direction
  • Demonstrating women's fashion shopping paths such as browsing by occasion, size charts, and exchange policies
  • Serving as a GitHub template repository to derive an independent store project via Use this template

Suitable For

  • Developers or merchants using the E-Com Plus / Cloud Commerce stack
  • Teams needing starter code for a women's fashion e-commerce theme
  • Developers looking for a reference on customizing an Astro + Vue e-commerce theme

Getting started & customization

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

  1. 1

    Run npm i to install dependencies, npm run dev to start local development (default http://localhost:3000), and npm run build to build

  2. 2

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

  3. 3

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

  4. 4

    Before launch, replace placeholder content: the name, domain, logo, and colors in settings.json, images in public/img/uploads/, and the contact, exchange, and terms pages in extra-pages/

  5. 5

    public/robots.txt currently blocks all crawling because the demo site is noindex; adjust before going live

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 the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • You may use, modify, commercialize, and distribute the code of this version for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full 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 verify Firebase quotas and pricing.
  • Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses; they cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
  • The product catalog is remote data; you must configure an E-Com Plus store (npm run setup), otherwise product showcases will be empty and only the hero, banners, and category blocks will render normally.
  • The size chart is a static mockup and does not come from product registration data; to truly integrate it, sizes must first be registered as product specifications.
  • Out-of-stock notification (back-in-stock alert) functionality does not exist; it depends on a per-variant restock queue and is an unimplemented capability.
  • The logo and icons are placeholder bitmaps and must be replaced and vectorized before launch.
  • Some routes are only accessible after the corresponding category exists in the catalog.
  • robots.txt currently blocks all crawling because the demo site is noindex; adjust before going live.
  • You need to configure storeId and a Firebase project (npm run setup), which involves external services and account configuration.
  • Banner images come from Unsplash; comply with its license and retain the attribution in CREDITOS.md.
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 tabela de grade é maquete estática.** Não vem do cadastro de produto. Ligar de verdade depende de as medidas estarem cadastradas como especificação.

Original README

**"Avise-me quando voltar" não existe.** Depende de fila de reposição por variação

Original README

Logo e ícone são wordmarks placeholder rasterizados

Original README

As rotas (`/s/trabalho`, `/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-alinhavo/blob/main/LICENSEhttps://github.com/ecomplus/tema-alinhavo/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: e2d25dcfd1ce9eb80f1d376e70cdce4deb0d998b80b81faf4e9ac2ed73f3fde3

2026-10-13T01:28:25.516Z

Source file / repository
# Alinhavo — loja demo do nicho de moda feminina

Cópia do starter [`ecomplus/store`](https://github.com/ecomplus/store)
tematizada para **moda feminina**. Moda lidera o e-commerce brasileiro em
volume de pedidos, e é a vertical com mais lojas na base atual da plataforma.

> **Diferente das três primeiras variantes, 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 abaixo foi **proposto**, não portado — a base
> foram as lojas de moda que já rodam na plataforma e a auditoria de recursos.
> Nome, logo e domínio são placeholders.

## De onde vem o posicionamento

Lojas de moda feminina já na base: **Don't Quest** (18 anos), **Lado Fit**
(fitness), **Lua Cheia** (homewear), **Todoverde** (atacado, Brás),
**Vestizze**. Todas vendem peça com grade — e grade é onde a conversão vaza.

O eixo escolhido é **tamanho, não tendência**: errar o número é a maior causa
de devolução em moda online e o maior motivo de abandono em peça de grade.
Toda a seção de nicho gira em torno disso.

Vale notar: **Lado Rosa + Lado Fit já é o case de duas marcas no mesmo
backend** que o material de beleza usa como prova emprestada. Em moda ele deixa
de ser emprestado e vira prova do próprio nicho.

## 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` quase-preto quente + `secondaryColor` camel, 5% no Pix, 6x sem juros, frete grátis a partir de R$ 299 |
| `functions/ssr/tailwind.config.js` | Escala neutra greige, canto reto (`borderRadius: 0`) |
| `functions/ssr/content/layout.json` | Pitch bar (troca de tamanho, 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/NichoModaFemininaSection.astro` | **Novo.** Navegação por ocasião, tabela de grade em centímetros, garantias de medida e chamada de troca grátis |
| `functions/ssr/src/sections/_Sections.astro` | Registro da seção `c:nicho-moda-feminina` |
| `functions/ssr/content/extra-pages/` | Contato, trocas (troca de tamanho, lacre de higiene) e termos em PT-BR |
| `functions/ssr/public/img/uploads/` | Banners do Unsplash; imagens do starter removidas. Créditos em `CREDITOS.md` |

## Por que a cor primária é quase-preta

Nas outras variantes a primária é uma cor viva. Aqui não: **em moda a foto é o
produto**, e vitrine colorida disputa atenção com ela. O camel entra como
`secondary`, para preço e destaque. É uma decisão de nicho, não preguiça de
paleta.

## 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 tabela de grade é maquete estática.** Não vem do cadastro de produto.
  Ligar de verdade depende de as medidas estarem cadastradas como especificação.
- **"Avise-me quando voltar" não existe.** Depende de fila de reposição por
  variação — é copy de produto proposto, e está marcado no componente.
- Logo e ícone são wordmarks placeholder rasterizados (texto em `<text>`,
  fonte do ambiente que rasteriza). Ao fechar a identidade, vetorizar.
- As rotas (`/s/trabalho`, `/p/medidas`…) só respondem depois que o catálogo
  tiver as categorias correspondentes.
- Sem página `/segmentos/moda` no site institucional para linkar — se a
  hipótese avançar, vale criar a marca em `brands.ts` e a rota `/demo/alinhavo`,
  como já existe para as três primeiras.

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