Como criar uma secção personalizada para a Shopify do zero (guia passo a passo)

A Online Store 2.0 da Shopify transformou a forma como os comerciantes personalizam as suas lojas. Com secções personalizadas, pode criar componentes reutilizáveis e flexíveis que os comerciantes podem adicionar, remover e personalizar diretamente no Editor de Temas, sem ter de editar o código sempre que necessário.

Quer esteja a criar um banner principal, uma secção de perguntas frequentes, uma galeria de imagens, um carrossel de testemunhos ou uma apresentação de produtos, compreender o desenvolvimento de secções da Shopify é uma competência essencial para todos os programadores Shopify.

Neste guia, vamos percorrer todo o processo de criação de uma secção personalizada da Shopify do zero, utilizando Liquid, HTML, CSS, JavaScript e as definições de esquema da Shopify.

Porque criar secções personalizadas da Shopify?

As secções personalizadas oferecem várias vantagens:

• Maior flexibilidade de design
• Melhor desempenho da loja em comparação com muitas aplicações de terceiros
• Personalização mais fácil para os comerciantes
• Componentes reutilizáveis em várias páginas
• Experiência do utilizador e taxas de conversão melhoradas

Para agências e programadores Shopify, as secções personalizadas também ajudam a criar lojas únicas que se destacam da concorrência.

Compreender as secções da Shopify

Uma secção da Shopify é um bloco de conteúdo modular que pode ser personalizado através do Editor de Temas.

Alguns exemplos comuns incluem:

• Banners principais
• Produtos em destaque
• Testemunhos
• Perguntas frequentes
• Galerias de imagens
• Secções de vídeo
• Apresentações de coleções
• Banners promocionais

Com a Online Store 2.0, as secções podem ser utilizadas em quase todas as páginas, tornando a personalização da loja mais poderosa do que nunca.

Passo 1: Criar um novo ficheiro de secção

Aceda a:

Loja online → Temas → Editar código → Secções

Crie um novo ficheiro com o nome:

custom-hero.liquid

Este ficheiro conterá a marcação, os estilos, as definições e a funcionalidade da sua secção.

Passo 2: Criar a marcação da secção

Adicione o seguinte código Liquid:

<div class="ck-hero">
  <div class="ck-container">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.description }}</p>

    <a href="{{ section.settings.button_link }}" class="ck-button">
      {{ section.settings.button_text }}
    </a>
  </div>
</div>

Isto permite que o conteúdo seja controlado dinamicamente através do Editor de Temas.

Passo 3: Adicionar estilos

.ck-hero {
  padding: 100px 20px;
  text-align: center;
}

.ck-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.ck-button {
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
}

Utilizar um prefixo personalizado, como ck-, ajuda a evitar conflitos de CSS com temas e aplicações.

Passo 4: Criar as definições do Editor de Temas

Adicione a secção de esquema:

{% schema %}
{
  "name": "Banner principal CK",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Título"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Descrição"
    }
  ],
  "presets": [
    {
      "name": "Banner principal CK"
    }
  ]
}
{% endschema %}

Estas definições aparecem automaticamente no Editor de Temas da Shopify.

Passo 5: Adicionar blocos dinâmicos

Os blocos permitem que os comerciantes criem vários elementos de conteúdo sem programação.

Exemplo:

{% for block in section.blocks %}
  <div class="testimonial">
    <h3>{{ block.settings.name }}</h3>
    <p>{{ block.settings.review }}</p>
  </div>
{% endfor %}

Perfeito para:

• Testemunhos
• Perguntas frequentes
• Membros da equipa
• Funcionalidades
• Galerias de imagens

Passo 6: Adicionar funcionalidades interativas

Para carrosséis, acordeões, separadores e animações:

document.addEventListener('DOMContentLoaded', () => {
  console.log('Secção personalizada carregada');
});

Para projetos maiores, mova o JavaScript para um ficheiro de recurso dedicado.

Melhores práticas de desenvolvimento de secções da Shopify

Mantenha as secções modulares

Crie cada secção para um único propósito e evite combinar demasiadas funcionalidades num só componente.

Otimize as imagens

Utilize os filtros de imagem da Shopify:

{{ image | image_url: width: 1200 | image_tag }}

Torne tudo responsivo

Teste sempre em computadores, tablets e dispositivos móveis.

Utilize definições significativas

Organize as definições de forma clara para que os comerciantes possam personalizar as secções facilmente.

Foque-se no desempenho

Minimize o JavaScript desnecessário e otimize os recursos para um carregamento mais rápido.

Considerações finais

As secções personalizadas da Shopify são a base do desenvolvimento moderno de temas da Shopify. Ao dominar Liquid, as definições de esquema, o design responsivo e os componentes reutilizáveis, os programadores podem criar experiências de loja altamente flexíveis que os comerciantes podem gerir com facilidade.

Na CodeKanon, criamos secções personalizadas da Shopify, personalizações de temas e aplicações da Shopify que ajudam os comerciantes a criar lojas mais rápidas, envolventes e focadas na conversão.

Precisa de ajuda com o desenvolvimento da Shopify? Contacte a CodeKanon para dar vida ao seu próximo projeto Shopify.