AstroVueE-commerce

tema-morada — Astro Ecommerce Template

By ecomplus

An E-Com Plus e-commerce theme template for furniture, lighting, and home decor categories, built on Astro and Vue, with customizations to colors, homepage, content pages, and home-scenario navigation on top of the official store starter.

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

Themed customization for home decor categories on top of the ecomplus/store starter

02

Added category section with room-based navigation, dimension information, and in-stock vs. custom lead time comparison

03

Homepage includes a dual-slide Hero, three product showcases, and a three-banner grid

04

Provides additional Portuguese-language pages such as contact, exchange, and terms

05

Uses Astro and Vue, with styles based on Tailwind/UnoCSS configuration

06

Released under the MIT license, repository marked as a template, can be forked into an independent store using "Use this template"

Template Details

tema-morada is a Cloud Commerce e-commerce theme template for E-Com Plus, with the repository ecomplus/tema-morada, using Astro and Vue. It is a themed version of the official starter ecomplus/store, tailored for furniture, lighting, and home decor categories: it adjusts the site name, description, domain, logo/icons, primary color (blue-green) and secondary color (wood), configures Pix discount, installments, and free shipping threshold; updates Tailwind's neutral color scale and border radius; rewrites the homepage content (dual-slide Hero, three product showcases, three-banner grid) and layout (including a notice bar for dimensions, shipping, and corporate purchasing, plus a footer organized by "environment"); adds a home decor category section with room-based navigation, dimension information (including door width), in-stock vs. custom lead time comparison, and a corporate purchasing entry point; and supplements Portuguese-language contact, exchange, and terms pages. The template uses a remote catalog: when no E-Com Plus store is configured, product showcases are empty, but the Hero, banners, and category sections still render normally. The README explicitly states that the dimension tables and lead times are currently static placeholders and do not read product data or perform real shipping calculations; the corporate purchasing section is only copy, with links pointing to a non-existent /corporativo route; room-based paths also only respond if the corresponding categories exist in the catalog. The repository is positioned as a "thin shell," with storefront and store logic residing in @cloudcommerce/* packages; updating the platform version is done by upgrading dependency versions, not by merging with the starter.

AstroVueE-commerce

Is it right for your project?

Use Cases

  • Building an E-Com Plus storefront for furniture, lighting, or home decor categories
  • As a starting point for Cloud Commerce theme customization, replacing branding, colors, and homepage content
  • Demonstrating common information structures for home e-commerce such as room-based browsing, dimension descriptions, and lead time differentiation
  • Reference for adding and registering custom category sections in Astro

Suitable For

  • Developers using E-Com Plus / Cloud Commerce who need a home decor theme
  • Teams looking to adapt an existing starter for a specific category
  • Front-end developers needing a reference implementation of 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, npm run build to build

  2. 2

    Product showcases depend on a remote catalog; configure an E-Com Plus store via npm run setup, otherwise showcases will be empty

  3. 3

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

  4. 4

    Replace the logo, icons, and banners under public/img/uploads/, and verify third-party asset licenses

  5. 5

    public/robots.txt currently blocks all crawling because the demo site is noindex

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 applies to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • 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, you must configure it yourself and check Firebase's quotas and charges.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be assumed free solely based on the code's MIT license.
  • External services such as domain, hosting, database, payment, or AI may incur additional charges.
  • Product showcases depend on a remote catalog: an E-Com Plus store must be configured (npm run setup), otherwise showcases will be empty and only the Hero, banners, and category sections will render normally.
  • Dimension tables and lead times are static placeholders only; they do not read product registration data or perform real shipping calculations.
  • The corporate purchasing section is only copy, with links pointing to a non-existent /corporativo route; the functionality is not implemented.
  • Room-based paths (e.g., /s/sala-de-estar, /s/iluminacao) only respond if the corresponding categories exist in the catalog.
  • robots.txt currently blocks all crawling because the demo site is noindex; it must be modified before going live.
  • The logo and icons are placeholder bitmap wordmarks and must be replaced and vectorized before going live.
  • The current banner photos are from Unsplash; third-party asset licenses must be checked and replaced with your own assets.
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 ficha de dimensões e os prazos são maquete estática.** Não leem o cadastro de produto nem o cálculo real de frete.

Original README

**A frente corporativa é copy.** O link vai para `/corporativo`, rota que ainda não existe.

Original README

As rotas (`/s/sala-de-estar`, `/s/iluminacao`…) 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

Logo e ícone são wordmarks placeholder rasterizados.

Original README

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

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

2026-10-13T01:29:25.279Z

Source file / repository
# Morada — loja demo do nicho de casa e decoração

Cópia do starter [`ecomplus/store`](https://github.com/ecomplus/store)
tematizada para **móveis, iluminação e decoração**. A categoria cresceu ~17%,
sustentada por home office e reforma, e é a segunda vertical com mais lojas na
base atual da plataforma.

> **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.

## De onde vem o posicionamento

Lojas de casa já na base: **Conexão Home** (móveis, 20 anos), **Conexão
Office** (móveis corporativos), **Para la Casa** (tableware e décor), **Lado
Rosa** (decoração), **Clube do LED** (iluminação), **Les Bains**.

O bloco corporativo da seção de nicho não é invenção: **Conexão Home + Conexão
Office são literalmente duas frentes — consumidor final e escritório — sobre o
mesmo catálogo**. É o argumento de multilojas se demonstrando sozinho, e foi um
dos motivos de este nicho entrar na lista.

O eixo escolhido são as três dores que só existem aqui e quebram a compra:

1. **Dimensão** — "cabe na minha sala?" vem antes do preço.
2. **Prazo de fabricação** — móvel sob encomenda não é pronta-entrega, e
   descobrir isso depois de pagar é o começo de um cancelamento.
3. **Frete volumoso** — pode passar do valor do produto; esconder até o
   checkout é a maior causa de abandono do 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` azul-petróleo + `secondaryColor` madeira, 7% no Pix, 10x sem juros, frete grátis a partir de R$ 499 |
| `functions/ssr/tailwind.config.js` | Escala neutra quente e clara, canto levemente arredondado |
| `functions/ssr/content/layout.json` | Pitch bar (medidas, frete, corporativo), rodapé com lista de "Ambientes", `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/NichoCasaDecoracaoSection.astro` | **Novo.** Navegação por ambiente, ficha de dimensões (com passagem de porta), pronta-entrega × sob encomenda e chamada corporativa |
| `functions/ssr/src/sections/_Sections.astro` | Registro da seção `c:nicho-casa` |
| `functions/ssr/content/extra-pages/` | Contato, trocas (avaria no transporte, item sob encomenda, montagem) 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 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 ficha de dimensões e os prazos são maquete estática.** Não leem o
  cadastro de produto nem o cálculo real de frete. Está marcado no componente.
- **A frente corporativa é copy.** O link vai para `/corporativo`, rota que
  ainda não existe. Implementar de verdade é o caso de uso de
  [multilojas](https://www.e-com.plus/recursos/multilojas), com preço por grupo
  de cliente — exatamente o que Conexão Home/Office fazem.
- Logo e ícone são wordmarks placeholder rasterizados. Ao fechar a identidade,
  vetorizar o texto para não depender da fonte do ambiente.
- As rotas (`/s/sala-de-estar`, `/s/iluminacao`…) 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/morada` no site.

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