Como criar sua primeira seção de tema Shopify

Dar a seus clientes o controle criativo é fundamental, especialmente quando eles desejam a capacidade de personalizar sua vitrine. O recurso de seções da Shopify é uma ferramenta poderosa para personalizar os temas da Shopify, portanto, usá-los com eficiência e seguir as práticas recomendadas abrirá uma variedade de opções para seus clientes.

Se você estiver criando um tema Shopify do zero ou aprimorando um tema para um cliente, precisará criar alguns tipos diferentes de seções, que variam dependendo do contexto. Além disso, os clientes esperam uma experiência amigável e intuitiva, o que significa que a seção certa, no lugar certo, pode ter um grande impacto na conversão.

Neste artigo, abordaremos como começar a criar diferentes tipos de seções temáticas e as regras para usá-las, para que você possa ajudar a capacitar seus clientes a personalizar sua loja. Também exploraremos alguns exemplos de seções específicas de nosso tema Dawn disponível na fonte, para demonstrar exatamente como você pode usá-las em cenários do mundo real.

O que são seções temáticas?

Em um nível alto, as seções são componentes modulares de um tema da Shopify que os lojistas podem personalizar. As seções contêm conteúdo e configurações para áreas específicas de uma loja da Shopify, como os elementos básicos de uma página de produto ou um componente de apresentação de slides.

Nessas seções, os desenvolvedores têm acesso a uma variedade de tipos de configuração diferentes, desde entradas de texto e seletores de imagens até HTML e menus personalizados, que os comerciantes podem personalizar a partir do editor de temas e preencher com seu conteúdo.

As seções estão contidas no diretório /sections de um tema e podem ser incluídas estaticamente nos arquivos de layout de um tema (como o cabeçalho e o rodapé) ou podem ser adicionadas dinamicamente a qualquer modelo do Editor de tema. Para ter uma noção dos vários componentes que podem ser representados como seções, você pode explorar o diretório /sections do tema Dawn.

Com o lançamento da Loja Online 2.0, as seções agora podem ser usadas como a principal forma de organizar todos os diferentes aspectos do seu tema, desde páginas inteiras até elementos individuais. Como abordaremos neste artigo, a capacidade de adicionar seções a qualquer modelo JSON permitirá que você organize páginas diferentes com facilidade, o que pode ser aprimorado ainda mais quando os comerciantes personalizarem seus temas.

Modelos e seções

Um dos pré-requisitos para aprender como as seções funcionam nos temas da Shopify é entender o sistema de modelos de temas da Shopify. Com a Online Store 2.0, cada tipo de página pode ser representado como um arquivo .json dentro do diretório /templates de um tema. Os desenvolvedores podem estruturar cada tipo de página definindo quais seções aparecerão por padrão nesses arquivos de modelo JSON.

Esses modelos JSON não incluem nenhuma marcação ou objetos Liquid para exibir o conteúdo da loja, eles são simplesmente arquivos de dados que indicam quais seções aparecerão por padrão em uma página e em qual ordem.

Um exemplo básico da aparência de um arquivo de modelo product.json seria:

Nesse caso, uma página de produto seria renderizada com uma seção chamada main-product.liquid e seria a única seção que apareceria por padrão. Quando um comerciante personaliza essa página e adiciona mais seções à página, o arquivo de modelo product.json é atualizado com essas informações. Exploraremos mais esse processo neste artigo quando examinarmos como as seções são incluídas nos modelos.

Noções básicas de seções

Ao desenvolver seu tema usando seções e modelos JSON, você pode considerar a criação de arquivos de seção em duas categorias distintas: seções de página “principais” e componentes modulares individuais.

Seções da página principal

Em uma seção da página principal, você deve incluir todo o conteúdo padrão dessa página. Por exemplo, na seção principal de uma página de produto, você incluiria os elementos importantes para exibir um produto e suas propriedades associadas, como título do produto, descrição, mídia, preço e o formulário de adição ao carrinho.

Você pode acessar variáveis ​​Liquid, ou objetos, dentro de uma seção, com base em qual modelo de página uma seção está incluída. Isso significa que uma seção que será renderizada dentro de um modelo product.json poderá acessar quaisquer atributos do product Liquid objeto, representando o produto cuja página está sendo renderizada.

Da mesma forma, uma seção incluída em um arquivo collection.json poderá acessar todos os atributos do objeto Liquid da collection . Todas as seções, independentemente de onde aparecem, podem acessar qualquer um dos objetos globais do Liquid.

Além da marcação e dos objetos Liquid específicos da página que você adicionará a uma seção da página principal, você também pode criar configurações nas tags {% schema %} . Essas configurações podem fazer referência a elementos na seção e podem ser configuradas pelos comerciantes no editor de temas.

Como uma seção da página principal inclui marcações específicas para um tipo de página, você só desejará incluí-la em seu modelo associado. Para evitar que uma seção da página principal seja adicionada a outros tipos de página do editor de tema, ela não deve conter predefinições em seu esquema de seção.

Para visualizar um exemplo de uma seção da página principal, você pode explorar o arquivo main-product.liquid no diretório /sections do Dawn, ou qualquer uma das seções que são prefixadas com main no título. Como regra geral, você também deve nomear as seções da página principal com main no título para ajudá-lo a distinguir entre os diferentes tipos de seção.

seções modulares

As secções modulares são secções que podem ser reutilizadas em diferentes áreas de uma loja online, e complementam os principais elementos de uma página. Exemplos desses tipos de seções incluem coleções em destaque, apresentações de slides e formulários de inscrição em newsletters.

Essas seções geralmente seriam adicionadas às páginas por comerciantes usando o editor de tema, em vez de as seções serem adicionadas por padrão a um modelo de página. Para que uma seção seja adicionada a uma página por meio do editor, a seção deve conter predefinições em seu esquema. Depois que essas predefinições forem adicionadas, a seção será uma opção disponível quando o lojista clicar em Adicionar seção no editor de temas.

Em contraste com as seções da página “principal”, as seções modulares geralmente contêm conteúdo e marcação que podem ser reutilizados em diferentes tipos de página e em diferentes contextos em uma loja da Shopify. Os desenvolvedores devem, portanto, evitar depender de objetos Liquid específicos da página nessas seções.

É possível, no entanto, restringir uma seção para estar disponível apenas em tipos de página específicos usando o atributo templates no esquema da seção. Por exemplo, se você quiser limitar uma seção apenas a páginas de produtos e coleções, inclua esta linha nas tags de schema da seção:

 "templates": ["product", "collection"]

O atributo templates aceita uma lista de strings que representam o tipo de página.

Com base na funcionalidade que você deseja incluir em seu tema ou em quais requisitos específicos seu cliente possui, você provavelmente criará uma variedade de seções diferentes que habilitam recursos exclusivos. Para visualizar exemplos de seções modulares, você pode explorar a seção de boletim informativo ou a seção de rich text usada no Dawn.

Configurações da seção

Examinamos brevemente como as configurações de um arquivo de seção podem ser usadas para criar opções de personalização que os comerciantes podem acessar, mas vamos nos aprofundar um pouco mais para ver como são construídas.

Como vimos, as configurações são incluídas nos arquivos de seção, dentro das tags {% schema %} , que indicam que essas são configurações que devem ser renderizadas na interface do usuário do editor de tema. Um exemplo muito simples disso pode ser visto com uma seção de texto personalizada que pode ser algo como:

Neste exemplo, temos dois elementos HTML: um elemento de título e um elemento de parágrafo. Cada um desses elementos contém conteúdo dinâmico que criamos com o objeto section.settings Liquid. Este objeto de seção nos permite recuperar valores de configuração referenciando o ID exclusivo da configuração.

Abaixo da marcação HTML e Liquid, temos nossas configurações de seção, contidas em nossas tags {% schema %} . Cada configuração é representada por um objeto, onde podemos definir o id da configuração, seu type e como aparecerá no editor. Para acessar a configuração de uma seção no Liquid, anexe seu id ao objeto líquido section.settings . Também definimos o tipo de configuração que é e como aparecerá no editor de temas.

Nas configurações de nossas tags de esquema:

• id refere-se à variável Liquid que está sendo definida
• type define o tipo de saída que estamos criando
• label fornece contexto exibido no editor de tema
• default atribui um valor padrão

Neste exemplo, criei uma caixa de text para nosso título e uma caixa richtext text para nosso corpo, mas você pode adicionar uma ampla variedade de tipos de saída, dependendo dos requisitos do cliente. Outros tipos de entrada válidos incluem image_picker , radio , video_url e font_picker .

Este exemplo agora é uma seção válida, mas falta um aspecto importante: determinar onde exatamente a seção aparecerá no tema. Exploraremos algumas abordagens diferentes para incluir seções posteriormente, mas, por enquanto, permitiremos que a seção seja adicionada por meio do editor de tema a qualquer página, criando predefinições na seção.

As predefinições são configurações padrão de seções e são adicionadas às tags {% schema %} de uma seção. Em nosso exemplo simples, as predefinições podem ser:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Depois de adicionada ao nosso exemplo, a seção da caixa de texto personalizada ficaria assim:

Agora, se navegarmos até o editor de temas e selecionarmos Adicionar seção em qualquer página, esta seção aparecerá como uma opção disponível. As configurações de seção que criamos aparecerão na barra lateral direita com os rótulos e o texto padrão que adicionamos, e podemos preencher as configurações de texto de entrada, que serão exibidas em nossa seção.

Este é um exemplo simples que mostra a relação entre as configurações de seção e as variáveis ​​que você pode criar nas seções, bem como como elas são renderizadas no editor de tema. Para um modelo mais avançado, você pode explorar a seção rich text do tema Dawn.

Incluindo seções nas páginas

Como já mencionamos, há vários métodos para incluir seções nas páginas de um tema. Vamos explorar cada uma dessas abordagens individualmente e descompactar algumas das regras que se aplicam a elas.

1. Incluindo seções em modelos JSON

Quando examinamos as seções da página principal, vimos que os arquivos de modelo JSON aceitam uma propriedade "main" , que se torna a seção padrão para esse tipo de página e deve incluir todos os elementos de conteúdo importantes para essa página.

Além de uma seção "main" , também é possível incluir outras seções em um modelo JSON que aparecerá por padrão nesse tipo de página. Se usarmos um modelo JSON de produto como exemplo, poderíamos incluir uma seção de recomendações de produto na página adicionando um novo objeto abaixo da seção "main" :

Neste caso, estamos atribuindo um nome à seção, recommendations e a propriedade type é usada para identificar qual arquivo no diretório /sections queremos incluir.

Como esse modelo JSON está referenciando mais de uma seção, precisamos definir como as seções aparecem sequencialmente, dentro do objeto de order . Cada seção incluída em um modelo JSON precisará receber uma ordem padrão, no entanto, os comerciantes ainda podem reorganizar as seções no editor de temas.

As seções sem predefinições que são adicionadas aos modelos JSON não podem ser removidas no editor de temas, mas podem ser ocultadas se um comerciante não as exigir. Para obter um exemplo real de como as seções podem ser organizadas em um modelo JSON, você pode explorar o modelo de produto Dawn.

2. Incluindo seções como opções em todas as páginas

Como vimos com nosso texto personalizado, é possível disponibilizar uma seção em todas as páginas de um tema quando as presets estiverem presentes nas configurações do schema .

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Quando incluídas usando essa abordagem, essas seções podem ser adicionadas, reposicionadas e excluídas do editor de temas. Essas seções também podem ser limitadas a páginas específicas com a propriedade templates .

Essa funcionalidade de arrastar e soltar significa que, ao criar seções dinâmicas personalizadas, uma ampla gama de opções para personalizar lojas será desbloqueada. Você pode criar seções móveis para vídeos, produtos ou galerias de imagens. Um bom exemplo de uma seção que usa esse método seria a seção de newsletter da Dawn.

3. Usando tags {% section %} para adicionar seções estáticas

A tag de section Liquid permite que você renderize uma seção do diretório /sections em um layout Liquid ou arquivo de modelo. Esta tag pode aparecer como:

 {% section 'header' %}

As seções adicionadas usando esta tag de section não podem ser removidas, reposicionadas ou ocultadas no editor de tema. A posição desta seção na página é bloqueada, com base em onde ela foi adicionada em um arquivo de layout ou modelo.

Essa abordagem é mais comumente usada para conteúdo e componentes que devem estar sempre visíveis, como cabeçalhos, rodapés e barras de anúncio. Para ver um exemplo disso no Dawn, você pode verificar o arquivo theme.liquid onde a barra de anúncio estática, a seção de cabeçalho e as seções de rodapé são adicionadas com a tag de section .

Empoderando a criatividade

Agora que você viu como criar e adicionar seções aos seus temas, pode construir infinitas opções para as lojas de seus clientes.

Trabalhar com modelos JSON desbloqueia o poder das seções para todas as páginas de um tema, o que permitirá que os comerciantes construam suas lojas exatamente como gostariam - com alguma orientação sua.