Documentação: CST - Look Completo

Esta seção foi desenvolvida para permitir que lojistas exibam uma imagem de estilo (Lookbook) ao lado de um grid de produtos selecionados, incentivando a compra do "look completo" diretamente em uma única seção.

1. Arquivos da Seção

Certifique-se de que o seguinte arquivo está presente no seu tema:

sections/cst-complete-look.liquid

2. Funcionalidades Principais

Layout Split (50/50): No Desktop, o design é dividido igualmente entre imagem e produtos.
Responsividade Nativa: No Mobile, a imagem se posiciona no topo e os produtos em uma lista vertical otimizada.
Adicionar ao Carrinho via AJAX: Botões de compra rápida que adicionam o produto sem recarregar a página, com feedback visual de carregamento e sucesso.
Integração com Esquemas de Cores: Utiliza o sistema nativo de color_scheme do Shopify, adaptando-se automaticamente às cores globais do tema (Dawn e similares).
Customização de Posição: Permite escolher se a imagem principal fica à esquerda ou à direita no Desktop.

3. Configurações no Editor de Temas

Conteúdo Principal

Imagem do Look: Selecione a foto principal que demonstra as peças sendo usadas.
Posição da Imagem: Escolha entre "Esquerda" ou "Direita".
Produtos do Look: Selecione de 2 a 4 produtos que compõem o visual através do seletor product_list.
Títulos: Customize o título e subtítulo da seção.

Design e Layout

Esquema de Cores: Selecione um dos esquemas pré-definidos do seu tema.
Alinhamento do Texto: Esquerda ou Centralizado.
Largura Máxima: Ajuste a largura do container (ex: 1200px).
Espaçamento (Padding): Ajuste os espaços superiores e inferiores da seção.

4. Detalhes Técnicos

Tecnologias: Desenvolvido 100% com Liquid, Vanilla CSS (Flexbox/Grid) e Vanilla JS (Fetch API).
Zero Dependências: Não utiliza bibliotecas externas como jQuery, garantindo a melhor performance possível (Lighthouse Friendly).
Eventos de Carrinho: Ao adicionar um produto, a seção dispara um evento cart:updated. Se o seu tema possuir um mini-carrinho ou Drawer (como o tema Dawn), ele será aberto automaticamente após a adição bem-sucedida.

5. Como Usar

No Customizador de Temas, clique em Adicionar Seção.
Procure por CST - Look Completo.
Adicione a imagem de referência e selecione os produtos correspondentes.
Salve e publique.