---
updatedAt: 2025-05-08T20:59:23.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Tornando sua loja única

<HTMLBlock>{`
<img src="https://appliancetheme.vtexassets.com/assets/app/src/styles_course_icon___e66a5085f6323e5feb92e3aada493d39.svg" width=120/>
`}</HTMLBlock>

## Customizando sua loja para criar uma experiência única para o usuário final

Os blocos do Store Framework provêm uma ampla oportunidade de customização através de propriedades do CSS e estilização. Neste curso, você aprenderá como customizar blocos do Store Framework, de forma a criar frentes de loja que sejam alinhadas com a sua identidade visual.

<HTMLBlock>{`
  <style>
    section#hub-content header h1, section#hub-content header h2 {
      color: #f71963
    }

    p {
      line-height: 1.5rem;
    }

    .container {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .row-item {
      display: flex;
      align-items: center;
      border-top: 1px solid #e1e4e8 !important;
    }

    .last {
      border-bottom: 1px solid #e1e4e8 !important;
    }
    .counter {
      padding: 0 2rem 0 2rem;
      color: #717786;
    }

    .heading-text {
      color: #f71963;
      font-weight: bold;
      padding: 1rem 0 0.5rem 0;
    }

    .step {
      color: #717786;
      font-weight: bold;
    }

    .course-link {
      text-decoration: none !important;
    }
  </style>
  <div class="container">
    
  <a class="course-link" href="course-styles-course-step00introduction-lang-pt">
    <div class="row-item">
        <h2 class="counter">1</h1>
        <span class="step">Introdução</span>  
    </div>
  </a>
  <a class="course-link" href="course-styles-course-step01csshandles-lang-pt">
    <div class="row-item">
        <h2 class="counter">2</h1>
        <span class="step">CSS handles e o poder da customização de blocos</span>  
    </div>
  </a>
  <a class="course-link" href="course-styles-course-step02styles-lang-pt">
    <div class="row-item">
        <h2 class="counter">3</h1>
        <span class="step">Estilos globais</span>  
    </div>
  </a>
  <a class="course-link" href="course-styles-course-step03custom-template-lang-pt">
    <div class="row-item">
        <h2 class="counter">4</h1>
        <span class="step">Criando templates customizados</span>  
    </div>
  </a>
  <a class="course-link" href="course-styles-course-step04richtextmarkdown-lang-pt">
    <div class="row-item">
        <h2 class="counter">5</h1>
        <span class="step">Explorando o poder do rich text</span>  
    </div>
  </a>
  <a class="course-link" href="course-styles-course-step05landing-lang-pt">
    <div class="row-item">
        <h2 class="counter">6</h1>
        <span class="step">Construindo uma landing customizada de busca</span>  
    </div>
  </a>
  </div>
`}</HTMLBlock>