Cómo crear una sección personalizada de Shopify desde cero (guía paso a paso)

La versión 2.0 de la Tienda en línea de Shopify ha transformado la forma en que los comerciantes personalizan sus tiendas. Con las secciones personalizadas, puedes crear componentes reutilizables y flexibles que los comerciantes pueden agregar, eliminar y personalizar directamente desde el Editor de temas, sin tener que editar el código cada vez.

Ya sea que estés creando un banner principal, una sección de preguntas frecuentes, una galería de imágenes, un carrusel de testimonios o una presentación de productos, comprender el desarrollo de secciones de Shopify es una habilidad esencial para todo desarrollador de Shopify.

En esta guía, recorreremos el proceso completo para crear una sección personalizada de Shopify desde cero utilizando Liquid, HTML, CSS, JavaScript y la configuración de esquemas de Shopify.

¿Por qué crear secciones personalizadas de Shopify?

Las secciones personalizadas ofrecen varias ventajas:

• Mayor flexibilidad de diseño
• Mejor rendimiento de la tienda en comparación con muchas aplicaciones de terceros
• Personalización más sencilla para los comerciantes
• Componentes reutilizables en múltiples páginas
• Mejora de la experiencia del usuario y de las tasas de conversión

Para agencias y desarrolladores de Shopify, las secciones personalizadas también ayudan a crear tiendas únicas que destacan frente a la competencia.

Comprender las secciones de Shopify

Una sección de Shopify es un bloque de contenido modular que se puede personalizar a través del Editor de temas.

Algunos ejemplos comunes incluyen:

• Banners principales
• Productos destacados
• Testimonios
• Preguntas frecuentes
• Galerías de imágenes
• Secciones de vídeo
• Presentaciones de colecciones
• Banners promocionales

Con la versión 2.0 de la Tienda en línea, las secciones se pueden utilizar en casi todas las páginas, lo que hace que la personalización de la tienda sea más potente que nunca.

Paso 1: Crear un nuevo archivo de sección

Dirígete a:

Tienda en línea → Temas → Editar código → Secciones

Crea un nuevo archivo llamado:

custom-hero.liquid

Este archivo contendrá el marcado, los estilos, la configuración y la funcionalidad de tu sección.

Paso 2: Crear el marcado de la sección

Agrega el siguiente 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>

Esto permite controlar el contenido dinámicamente a través del Editor de temas.

Paso 3: Agregar 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;
}

Usar un prefijo personalizado como ck- ayuda a evitar conflictos de CSS con temas y aplicaciones.

Paso 4: Crear la configuración del Editor de temas

Agrega la sección de esquema:

{% schema %}
{
  "name": "Banner principal CK",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Encabezado"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Descripción"
    }
  ],
  "presets": [
    {
      "name": "Banner principal CK"
    }
  ]
}
{% endschema %}

Estos ajustes aparecen automáticamente dentro del Editor de temas de Shopify.

Paso 5: Agregar bloques dinámicos

Los bloques permiten a los comerciantes crear múltiples elementos de contenido sin programar.

Ejemplo:

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

Perfecto para:

• Testimonios
• Preguntas frecuentes
• Miembros del equipo
• Características
• Galerías de imágenes

Paso 6: Agregar funciones interactivas

Para carruseles, acordeones, pestañas y animaciones:

document.addEventListener('DOMContentLoaded', () => {
  console.log('Sección personalizada cargada');
});

Para proyectos más grandes, mueve el JavaScript a un archivo de recurso dedicado.

Mejores prácticas para el desarrollo de secciones de Shopify

Mantén las secciones modulares

Crea cada sección para un único propósito y evita combinar demasiadas funciones en un solo componente.

Optimiza las imágenes

Usa los filtros de imagen de Shopify:

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

Haz que todo sea responsivo

Prueba siempre en dispositivos de escritorio, tablet y móvil.

Usa ajustes con significado

Organiza los ajustes claramente para que los comerciantes puedan personalizar las secciones fácilmente.

Concéntrate en el rendimiento

Minimiza el JavaScript innecesario y optimiza los recursos para una carga más rápida.

Reflexiones finales

Las secciones personalizadas de Shopify son la base del desarrollo moderno de temas de Shopify. Al dominar Liquid, la configuración de esquemas, el diseño responsivo y los componentes reutilizables, los desarrolladores pueden crear experiencias de tienda altamente flexibles que los comerciantes pueden gestionar con facilidad.

En CodeKanon, creamos secciones personalizadas de Shopify, personalizaciones de temas y aplicaciones de Shopify que ayudan a los comerciantes a crear tiendas más rápidas, atractivas y enfocadas en la conversión.

¿Necesitas ayuda con el desarrollo de Shopify? Contacta a CodeKanon para dar vida a tu próximo proyecto de Shopify.