Skip to main content
Os widgets podem ser customizados usando CSS variables, permitindo que você adapte as cores, espaçamentos e tipografia para combinar com o design da sua loja.

​
Variáveis CSS Disponíveis

​
Cores

VariávelDescrição
--rw-primary-colorCor primária (botões, links)
--rw-text-colorCor do texto principal
--rw-text-secondaryCor do texto secundário
--rw-border-colorCor das bordas
--rw-bg-colorCor de fundo
--rw-bg-secondaryCor de fundo secundária
--rw-star-colorCor das estrelas preenchidas
--rw-star-emptyCor das estrelas vazias
--rw-progress-bar-colorCor das barras de progresso (distribuição de estrelas)

​
Espaçamentos

VariávelDescrição
--rw-spacing-xsEspaçamento extra pequeno
--rw-spacing-smEspaçamento pequeno
--rw-spacing-mdEspaçamento médio
--rw-spacing-lgEspaçamento grande
--rw-spacing-xlEspaçamento extra grande

​
Tipografia

VariávelDescrição
--rw-font-familyFamília de fontes
--rw-font-size-baseTamanho de fonte base
--rw-font-size-smTamanho de fonte pequeno
--rw-font-size-lgTamanho de fonte grande

​
Outros

VariávelDescrição
--rw-border-radiusRaio das bordas
--rw-shadowSombra padrão
--rw-shadow-mdSombra média

​
Exemplo de Customização

<style>
  martan-reviews {
    --rw-primary-color: #10b981;
    --rw-star-color: #f59e0b;
    --rw-progress-bar-color: #f59e0b;
    --rw-bg-color: #ffffff;
    --rw-text-color: #1f2937;
    --rw-font-family: 'Arial', sans-serif;
  }

  martan-rating {
    --rw-star-color: #f59e0b;
    --rw-text-color: #1f2937;
    --rw-text-secondary: #6b7280;
  }
</style>

​
Customização por Widget

Você pode customizar cada widget individualmente: 
<style>
  /* Customização apenas para o widget de reviews */
  martan-reviews {
    --rw-primary-color: #10b981;
  }

  /* Customização apenas para o widget de rating */
  martan-rating {
    --rw-star-color: #f59e0b;
  }

  /* Customização apenas para o widget de questions */
  martan-questions {
    --rw-primary-color: #3b82f6;
  }
</style>

​
Customização Global

Para aplicar customizações a todos os widgets: 
<style>
  :root {
    --rw-primary-color: #10b981;
    --rw-star-color: #f59e0b;
    --rw-text-color: #1f2937;
    --rw-font-family: 'Inter', sans-serif;
  }
</style>