O tema padrão da Kiwify conta com seis tipos de seção, que podem ser totalmente customizadas de acordo com suas preferências.

​
Login

Exibe o botão de login da Kiwify com layout, imagem de título e imagem de fundo. Expõe os seguintes parâmetros para o Editor de Temas:
  • variant: controla o layout — sidebar ou fundo completo
    layout full

    Layout de fundo completo

    layout sidebar

    Layout sidebar

  • image_background: imagem exibida no fundo da tela de login (opcional)
  • image_header: imagem exibida acima do botão de login (opcional; usa o logotipo da área de membros como fallback)
Essa seção utiliza o snippet auth-button para exibir o botão de login, que é um simples wrapper para o botão de login implementado nativamente na Área de Membros Kiwify. Carrossel de imagens com passagem automática de slides. Utiliza a biblioteca Embla Carousel para controle de slides. Saiba mais sobre as bibliotecas disponíveis.
banner
Quando há mais de um slide, exibe setas para avançar e retroceder slides, e um controle de acesso direto aos slides na parte inferior. Expõe um único parâmetro:
  • slides_delay: quantos segundos o componente deve esperar até trocar para o slide seguinte, quando há mais de um
Os slides podem ser no máximo 3, e são representados como blocos, que podem ter os seguintes parâmetros:
  • mobile_image: imagem do slide na versão mobile; caso ausente, a imagem desktop é exibida no mobile também
  • desktop_image: imagem do slide na versão desktop; caso ausente, a imagem mobile é exibida no desktop também
Caso nenhuma das imagens esteja presente, a seção aparecerá quebrada para o usuário final.

​
Cursos

Carrossel com links para cursos da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome do curso. Expõe os seguintes parâmetros para o Editor de Temas:
  • title: título exibido no topo da seção
  • items_variant: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
    • content_over: título sempre visível sobre a imagem do curso
    • content_hidden: título não é exibido
    • mouse_hover: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
  • items_layout: formato de exibição dos cards; pode ter os valores portrait (retrato) ou landscape (paisagem). Vide
  • all_accessible_courses: booleano que controla quais cursos serão exibidos na seção; se seu valor for verdadeiro, todos os cursos aos quais o usuário tem acesso serão exibidos, em ordem alfabética; se for falso, serão exibidos os cursos referenciados nos blocos da seção
Essa seção pode conter blocos, indicando quais cursos devem ser exibidos na seção e em qual ordem. Cada bloco contém apenas uma propriedade: course_id. Caso um curso referenciado em um bloco não seja acessível ao usuário final, ele será exibido mesmo assim. Se o curso tiver venda na área de membros configurada, o usuário final será capaz de clicar no link para realizar a compra.

​
Módulos

Carrossel com links para módulos de um curso da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome do módulo. Expõe os seguintes parâmetros para o Editor de Temas:
  • title: título exibido no topo da seção
  • items_variant: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
    • content_over: título sempre visível sobre a imagem do curso
    • content_hidden: título não é exibido
    • mouse_hover: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
  • items_layout: formato de exibição dos cards; pode ter os valores portrait (retrato) ou landscape (paisagem)
  • course_id: identificador do curso cujos módulos serão listados nessa seção
Caso um módulo do curso não seja acessível ao usuário final, ele será exibido mesmo assim. Se o curso tiver venda na área de membros configurada, o usuário final será capaz de clicar no link para realizar a compra do curso completo.

​
Aulas

Carrossel com links para aulas de um curso da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome da aula. Expõe os seguintes parâmetros para o Editor de Temas:
  • title: título exibido no topo da seção
  • items_variant: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
    • content_over: título sempre visível sobre a imagem do curso
    • content_hidden: título não é exibido
    • mouse_hover: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
  • items_layout: formato de exibição dos cards; pode ter os valores portrait (retrato) ou landscape (paisagem)
  • module_id: identificador do módulo cujas aulas serão listadas nessa seção
Caso o módulo selecionado não seja acessível ao usuário final, a seção inteira não é exibida.

​
Continuar Assistindo

Carrossel com links para aulas recomendadas para o usuário final continuar assistindo (vide objeto last_watched_lessons). Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome da aula. Expõe os seguintes parâmetros para o Editor de Temas:
  • items_layout: formato de exibição dos cards; pode ter os valores portrait (retrato) ou landscape (paisagem)
Caso não haja nenhuma aula para continuar assistindo, a seção inteira não é exibida.

​
Cards

As seções de cursos, módulos, aulas e “continuar assistindo” são bem similares: exibem links para conteúdo da área de membros na forma de cards. Para evitar duplicação de código, esses links estão implementados nos snippets cards e cards-item. O snippet cards é responsável por exibir o título, configurar o carrossel e percorrer a lista de links, chamando o snippet cards-item para cada link. Ele recebe alguns argumentos que o tornam bastante flexível:
  • section_items: lista de objetos que serão exibidos; mais detalhes abaixo
  • is_horizontal: booleano que indica se os cards devem assumir o layout horizontal ou vertical
    card horizontal

    Card horizontal

    card vertical

    Card vertical

  • should_display_progress: booleano que indica se a barra de progresso deve ser exibida ou não
  • percentage_field: propriedade dentro do campo user_data de cada item de section_items que contém o valor a ser exibido na barra de progresso
  • path_format: string que indica o formato da URL para a qual o conteúdo aponta. Exemplos:
    • {id}: a URL final será o ID do item
    • {course_id}/{id}: a URL final será o valor do campo course_id do item, seguido da barra e do ID do item
Ele também precisa que sejam repassados os seguintes objetos globais para ele:
  • section
  • is_preview
O snippet cards-item recebe esses mesmos parâmetros exceto o section_items. No lugar, recebe o parâmetro item, que é basicamente um dos itens da lista section_items. Esse parâmetro item deve ser um objeto e pode ter as seguintes propriedades:
  • thumbnail_slider_cover, logo_url e thumbnail: URL para a imagem do card. Qualquer um dos três nomes pode ser usado
  • user_data: objeto do tipo user_data ou, no caso do item ser uma aula, lesson_user_data
  • custom_offer: objeto do tipo custom_offer
  • course_id: ID do curso ao qual o item pertence, no caso de módulos e aulas
  • module_id: ID do módulo ao qual a aula pertence
  • id: ID do curso, módulo ou aula
  • name: nome do curso, módulo ou aula, a ser exibido no card