Cómo crear tu primera sección de tema de Shopify

Dar a sus clientes el control creativo es clave, especialmente cuando quieren la capacidad de personalizar su escaparate. La función de secciones de Shopify es una herramienta poderosa para personalizar los temas de Shopify, por lo que usarlos de manera eficiente y seguir las mejores prácticas desbloqueará una variedad de opciones para sus clientes.

Si está creando un tema de Shopify desde cero o ajustando un tema para un cliente, deberá crear algunos tipos diferentes de secciones, que variarán según el contexto. Además, los clientes esperan una experiencia fácil de usar e intuitiva, lo que significa que la sección correcta, en el lugar correcto puede tener un gran impacto en la conversión.

En este artículo, cubriremos cómo comenzar a crear diferentes tipos de secciones temáticas y las reglas para usarlas, para que pueda ayudar a sus clientes a personalizar su tienda. También exploraremos algunos ejemplos de secciones específicas de nuestro tema Dawn disponible en la fuente, para demostrar exactamente cómo puede usarlos en escenarios del mundo real.

¿Qué son las secciones temáticas?

En un nivel alto, las secciones son componentes modulares de un tema de Shopify que los comerciantes pueden personalizar. Las secciones contienen contenido y configuraciones para áreas específicas de una tienda Shopify, como los elementos básicos de una página de producto o un componente de presentación de diapositivas.

Dentro de estas secciones, los desarrolladores tienen acceso a una gama de diferentes tipos de configuraciones, desde entradas de texto y selectores de imágenes, hasta HTML y menús personalizados, que los comerciantes pueden personalizar desde el editor de temas y completar con su contenido.

Las secciones se encuentran dentro del directorio /sections de un tema y se pueden incluir de forma estática en los archivos de diseño de un tema (como el encabezado y el pie de página) o se pueden agregar dinámicamente a cualquier plantilla desde el Editor de temas. Para tener una idea de los diversos componentes que se pueden representar como secciones, puede explorar el directorio /sections del tema Dawn.

Con el lanzamiento de la Tienda en línea 2.0, las secciones ahora se pueden usar como la forma principal de organizar todos los diferentes aspectos de su tema, desde páginas completas hasta elementos individuales. Como veremos en este artículo, la capacidad de agregar secciones a cualquier plantilla JSON le permitirá organizar fácilmente diferentes páginas, lo que se puede mejorar aún más cuando los comerciantes personalizan su tema.

Plantillas y secciones

Uno de los requisitos previos para aprender cómo funcionan las secciones en los temas de Shopify es comprender el sistema de plantillas de temas de Shopify. Con Online Store 2.0, cada tipo de página se puede representar como un archivo .json dentro del directorio /templates de un tema. Los desarrolladores pueden estructurar cada tipo de página definiendo qué secciones aparecerán de forma predeterminada en estos archivos de plantilla JSON.

Estas plantillas JSON no incluyen marcas ni objetos Liquid para mostrar el contenido de la tienda, son simplemente archivos de datos que indican qué secciones aparecerán de forma predeterminada en una página y en qué orden.

Un ejemplo básico de cómo podría verse un archivo de plantilla product.json sería:

En este caso, una página de producto se mostraría con una sección llamada main-product.liquid y sería la única sección que aparecería de manera predeterminada. Cuando un comerciante personaliza esta página y agrega más secciones a la página, el archivo de plantilla product.json se actualizará con esta información. Exploraremos más este proceso en este artículo cuando veamos cómo se incluyen las secciones en las plantillas.

Conceptos básicos de las secciones.

Al desarrollar su tema usando secciones y plantillas JSON, puede considerar crear archivos de sección en dos categorías distintas: secciones de página "principal" y componentes modulares individuales.

Secciones de la página principal

Dentro de una sección de la página principal, debe incluir todo el contenido predeterminado para esa página. Por ejemplo, en la sección principal de la página de un producto, incluiría los elementos importantes para mostrar un producto y sus propiedades asociadas, como el título del producto, la descripción, los medios, el precio y el formulario para agregar al carrito.

Puede acceder a las variables u objetos de Liquid dentro de una sección, según la plantilla de página en la que se incluye una sección. Esto significa que una sección que se representará dentro de una plantilla product.json podrá acceder a cualquier atributo del product Liquid objeto, que representa el producto cuya página se está representando.

De manera similar, una sección que se incluye en un archivo collection.json podrá acceder a todos los atributos del objeto Liquid de la collection . Todas las secciones, independientemente de dónde aparezcan, pueden acceder a cualquiera de los objetos globales de Liquid.

Además del marcado y los objetos Liquid específicos de la página que agregará a una sección de la página principal, también puede crear configuraciones dentro de las etiquetas {% schema %} . Estos ajustes pueden hacer referencia a elementos de la sección y los comerciantes pueden configurarlos en el editor de temas.

Dado que una sección de la página principal incluye marcado específico para un tipo de página, solo querrá incluirlo dentro de su plantilla asociada. Para evitar que una sección de la página principal se agregue a otros tipos de página desde el editor de temas, no debe contener ajustes preestablecidos dentro de su esquema de sección.

Para ver un ejemplo de una sección de la página principal, puede explorar el archivo main-product.liquid en el directorio /sections de Dawn, o cualquiera de las secciones que tienen el prefijo main en el título. Como regla general, también debe nombrar las secciones de su página principal con main en el título para ayudarlo a distinguir entre los diferentes tipos de sección.

Secciones modulares

Las secciones modulares son secciones que se pueden reutilizar en diferentes áreas de una tienda en línea y complementan los elementos principales de una página. Ejemplos de este tipo de secciones incluyen colecciones destacadas, presentaciones de diapositivas y formularios de suscripción a boletines.

Por lo general, los comerciantes agregarían estas secciones a las páginas mediante el editor de temas, en lugar de que las secciones se agreguen de forma predeterminada a una plantilla de página. Para que una sección se agregue a una página a través del editor, la sección debe contener ajustes preestablecidos dentro de su esquema. Una vez que se agreguen estos ajustes preestablecidos, la sección será una opción disponible cuando el comerciante haga clic en Agregar sección en el editor de temas.

A diferencia de las secciones de la página "principal", las secciones modulares generalmente contienen contenido y marcas que se pueden reutilizar en diferentes tipos de página y en diferentes contextos en una tienda Shopify. Por lo tanto, los desarrolladores deben evitar depender de objetos Liquid específicos de la página dentro de estas secciones.

Sin embargo, es posible restringir una sección para que solo esté disponible en tipos de página específicos utilizando el atributo de templates dentro del esquema de la sección. Por ejemplo, si quisiera limitar una sección a solo páginas de productos y colecciones, incluiría esta línea dentro de las etiquetas de schema de la sección:

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

El atributo templates acepta una lista de cadenas que representan el tipo de página.

Según la funcionalidad que desee incluir en su tema o los requisitos específicos que tenga su cliente, es probable que cree una variedad de secciones diferentes que habiliten características únicas. Para ver ejemplos de secciones modulares, puede explorar la sección de boletines o la sección de texto enriquecido que se usa en Dawn.

Configuración de la sección

Hemos analizado brevemente cómo se puede usar la configuración de un archivo de sección para crear opciones de personalización a las que los comerciantes pueden acceder, pero profundicemos un poco más en esto para ver cómo se construyen.

Como hemos visto, las configuraciones se incluyen dentro de los archivos de sección, dentro de las etiquetas {% schema %} , que indican que estas son configuraciones que deben mostrarse en la interfaz de usuario del editor de temas. Un ejemplo muy simple de esto podría verse con una sección de texto personalizada que podría verse así:

En este ejemplo tenemos dos elementos HTML: un elemento de encabezado y un elemento de párrafo. Cada uno de estos elementos contiene contenido dinámico que hemos creado con el objeto líquido section.settings . Este objeto de sección nos permite recuperar valores de configuración haciendo referencia a la identificación única de la configuración.

Debajo del marcado HTML y Liquid tenemos nuestra configuración de sección, contenida en nuestras etiquetas {% schema %} . Cada configuración está representada por un objeto, donde podemos definir el id de la configuración, su type y cómo aparecerá en el editor. Para acceder a la configuración de una sección en Liquid, agregue su id al objeto liquid section.settings . También definimos el tipo de configuración que es y cómo aparecerá en el editor de temas.

Dentro de la configuración de nuestras etiquetas de esquema:

• id se refiere a la variable Liquid que se está definiendo
• type define el tipo de salida que estamos creando
• la label proporciona el contexto que se muestra en el editor de temas
• default asigna un valor por defecto

En este ejemplo, he creado un cuadro de text para nuestro encabezado y un cuadro de texto richtext para nuestro cuerpo, pero puede agregar una amplia gama de tipos de salida, según los requisitos de su cliente. Otros tipos de entrada válidos incluyen image_picker , radio , video_url y font_picker .

Este ejemplo ahora es una sección válida, sin embargo, nos falta un aspecto clave: determinar dónde aparecerá exactamente la sección en el tema. Exploraremos algunos enfoques diferentes para incluir secciones más adelante, pero por ahora permitiremos que la sección se agregue mediante el editor de temas a cualquier página mediante la creación de ajustes preestablecidos en la sección.

Los ajustes preestablecidos son configuraciones predeterminadas de secciones y se agregan dentro de las etiquetas {% schema %} de una sección. En nuestro ejemplo simple, los ajustes preestablecidos podrían verse así:

 "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"
 }
 ]

Una vez agregado a nuestro ejemplo, la sección del cuadro de texto personalizado se vería así:

Ahora, si navegamos al editor de temas y seleccionamos Agregar sección en cualquier página, esta sección aparecerá como una opción disponible. La configuración de la sección que hemos creado aparecerá en la barra lateral derecha con las etiquetas y el texto predeterminado que hemos agregado, y podemos completar la configuración del texto de entrada, que se mostrará en nuestra sección.

Este es un ejemplo simple que muestra la relación entre la configuración de la sección y las variables que puede crear dentro de las secciones, así como también cómo se representan en el editor de temas. Para un modelo más avanzado, puede explorar la sección de texto enriquecido del tema Dawn.

Incluir secciones en las páginas

Como ya hemos mencionado, existen varios métodos para incluir secciones en las páginas de un tema. Exploremos cada uno de estos enfoques individualmente y desglosemos algunas de las reglas que se aplican a ellos.

1. Incluir secciones en plantillas JSON

Cuando observamos las secciones de la página principal, vimos que los archivos de plantilla JSON aceptan una propiedad "main" , que se convierte en la sección predeterminada para ese tipo de página y debe incluir todos los elementos de contenido importantes para esa página.

Además de una sección "main" , también es posible incluir otras secciones en una plantilla JSON que aparecerá de forma predeterminada en ese tipo de página. Si usamos una plantilla JSON de producto como ejemplo, podríamos incluir una sección de recomendaciones de productos en la página agregando un nuevo objeto debajo de la sección "main" :

En este caso, estamos asignando un nombre a la sección, recommendations , y la propiedad type se usa para identificar qué archivo en el directorio /sections queremos incluir.

Dado que esta plantilla JSON hace referencia a más de una sección, debemos definir cómo aparecen las secciones secuencialmente, dentro del objeto de order . A cada sección incluida en una plantilla JSON se le deberá asignar un orden predeterminado; sin embargo, los comerciantes aún pueden reorganizar las secciones en el editor de temas.

Las secciones sin ajustes preestablecidos que se agregan a las plantillas JSON no se pueden eliminar en el editor de temas, pero se pueden ocultar si un comerciante no las requiere. Para ver un ejemplo de la vida real de cómo se pueden organizar las secciones en una plantilla JSON, puede explorar la plantilla del producto Dawn.

2. Incluir secciones como opciones en todas las páginas

Como vimos con nuestro texto personalizado, es posible hacer que una sección esté disponible en todas las páginas de un tema cuando los presets están presentes en la configuración del 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"
 }
 ]

Cuando se incluyen con este enfoque, estas secciones se pueden agregar, cambiar de posición y eliminar desde el editor de temas. Estas secciones también se pueden limitar a páginas específicas con la propiedad de templates .

Esta funcionalidad de arrastrar y soltar significa que cuando crea secciones dinámicas personalizadas, se desbloqueará una amplia gama de opciones para personalizar tiendas. Puede crear secciones móviles para videos, productos o galerías de imágenes. Un buen ejemplo de una sección que usa este método sería la sección del boletín de noticias de Dawn.

3. Usar etiquetas {% section %} para agregar secciones estáticas

La etiqueta de section de Liquid le permite representar una sección del directorio /sections en un archivo de plantilla o diseño de Liquid. Esta etiqueta podría aparecer como:

 {% section 'header' %}

Las secciones añadidas con esta etiqueta de section no se pueden eliminar, cambiar de posición ni ocultar en el editor de temas. La posición de esta sección en la página está bloqueada, en función de dónde se haya agregado dentro de un archivo de diseño o una plantilla.

Este enfoque se usa más comúnmente para contenido y componentes que siempre deben estar visibles, como encabezados, pies de página y barras de anuncios. Para ver un ejemplo de esto en Dawn, puede consultar el archivo theme.liquid donde se agregan la barra de anuncios estática, la sección de encabezado y las secciones de pie de página con la etiqueta de section .

Potenciando la creatividad

Ahora que ha visto cómo crear y agregar secciones a sus temas, puede crear infinitas opciones para las tiendas de sus clientes.

Trabajar con plantillas JSON desbloquea el poder de las secciones para todas las páginas de un tema, lo que permitirá a los comerciantes construir su tienda exactamente como les gustaría, con algunas instrucciones de usted.