Cómo Crear una Sección y Bloques en Shopify con Liquid

Shopify permite crear secciones y bloques dinámicos dentro de sus temas usando Liquid. Esto es clave para personalizar la experiencia del usuario sin necesidad de modificar el código directamente. En este tutorial, aprenderás a crear una sección personalizada con bloques para agregar un título, descripción y un botón.

1. ¿Por qué usar secciones y bloques en Shopify?

Las secciones y bloques permiten a los administradores de la tienda personalizar el contenido sin tocar código. Esto hace que la edición de la tienda sea más accesible para personas sin conocimientos de programación. Además, mejora la flexibilidad del diseño, optimizando la experiencia del usuario y facilitando el mantenimiento.

2. Estructura de la Sección en Liquid

En Shopify, las secciones se definen en archivos .liquid y pueden incluir configuraciones personalizables. Nuestra sección incluirá una imagen de fondo y varios bloques de contenido.

Código de la Sección

<section
  class="custom-section"
  style="background-image: url('{{ section.settings.background_image | img_url: '1920x' }}');"
>
  <div class="custom-section__content">
    {% for block in section.blocks %}
      {% case block.type %}
        {% when 'title' %}
          <h2 class="custom-title block-{{ block.id }}">
            {{ block.settings.title_text }}
          </h2>

        {% when 'description' %}
          <p class="custom-description block-{{ block.id }}">
            {{ block.settings.desc_text }}
          </p>

        {% when 'button' %}
          <div class="custom-button-container block-{{ block.id }}">
            <a href="{{ block.settings.button_link }}" class="custom-button">
              {{ block.settings.button_text }}
            </a>
          </div>
      {% endcase %}
    {% endfor %}
  </div>
</section>

3. Estilos Dinámicos con {% style %}

Shopify permite definir estilos dentro de la propia sección usando {% style %} en Liquid. Esto es útil porque permite generar estilos dinámicos basados en las configuraciones de la sección y los bloques.

Ventajas de {% style %} en Shopify

• Permite modificar estilos sin tocar archivos CSS.
• Reduce la dependencia de archivos externos, optimizando tiempos de carga.
• Facilita la personalización rápida desde el editor de temas.

Código de Estilos

{% style %}
  .custom-section {
    width: 100%;
    position: relative;
    background-size: {{ section.settings.background_size }};
    height: {{ section.settings.section_height }}px;
    display: flex;
    justify-content: {{ section.settings.horizontal_alignment }};
    align-items: {{ section.settings.vertical_alignment }};
    padding: 20px;
  }

  .custom-section__content {
    max-width: 1200px;
    width: 100%;
  }

  {% for block in section.blocks %}
    .block-{{ block.id }} {
      text-align: {{ block.settings.title_alignment | default: block.settings.desc_alignment | default: block.settings.button_alignment }};
    }

    {% if block.type == "title" %}
      .block-{{ block.id }} {
        color: {{ block.settings.title_color }};
        font-size: {{ block.settings.title_size }}px;
      }
    {% endif %}

    {% if block.type == "description" %}
      .block-{{ block.id }} {
        color: {{ block.settings.desc_color }};
        font-size: {{ block.settings.desc_size }}px;
      }
    {% endif %}

    {% if block.type == "button" %}
      .block-{{ block.id }} {
        text-align: {{ block.settings.button_alignment }};
      }

      .block-{{ block.id }} .custom-button {
        background-color: {{ block.settings.button_color }};
        color: {{ block.settings.button_text_color }};
        display: inline-block;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 5px;
        transition: 0.3s;
      }

      .block-{{ block.id }} .custom-button:hover {
        background-color: {{ block.settings.button_hover_color }};
        color: {{ block.settings.button_hover_text_color }};
      }
    {% endif %}
  {% endfor %}
{% endstyle %}

4. Configuración de {% schema %}

El bloque {% schema %} define los ajustes y bloques de la sección. Aquí Shopify almacena las configuraciones que aparecen en el editor de temas.

Explicación de la Estructura {% schema %}

• "name": Define el nombre de la sección en el editor de Shopify.
• "settings": Contiene las opciones configurables de la sección.
• "blocks": Define los tipos de bloques que se pueden agregar.
• "presets": Proporciona una configuración predeterminada.

Beneficios de {% schema %}

• Permite agregar o modificar configuraciones sin alterar el código.
• Mejora la experiencia de administradores sin conocimientos técnicos.
• Hace que el diseño de la tienda sea más flexible y modular.

Código de {% schema %}

{% schema %}
{
  "name": "Sección Personalizada",
  "settings": [
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Imagen de fondo"
    },
    {
      "type": "select",
      "id": "background_size",
      "label": "Tamaño de imagen",
      "options": [
        { "value": "cover", "label": "Cover" },
        { "value": "contain", "label": "Contain" },
        { "value": "auto", "label": "Auto" }
      ],
      "default": "cover"
    },
    {
      "type": "range",
      "id": "section_height",
      "label": "Altura de la sección",
      "min": 200,
      "max": 800,
      "step": 50,
      "default": 400
    },
    {
      "type": "select",
      "id": "horizontal_alignment",
      "label": "Alineación Horizontal del Contenido",
      "options": [
        { "value": "left", "label": "Izquierda" },
        { "value": "center", "label": "Centro" },
        { "value": "right", "label": "Derecha" }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "vertical_alignment",
      "label": "Alineación Vertical del Contenido",
      "options": [
        { "value": "flex-start", "label": "Arriba" },
        { "value": "center", "label": "Centro" },
        { "value": "flex-end", "label": "Abajo" }
      ],
      "default": "center"
    }
  ],
  "blocks": [
    {
      "type": "title",
      "name": "Título",
      "settings": [
        { "type": "text", "id": "title_text", "label": "Texto del Título" },
        { "type": "color", "id": "title_color", "label": "Color del Título", "default": "#000000" },
        { "type": "range", "id": "title_size", "label": "Tamaño del Título", "min": 16, "max": 50, "step": 2, "default": 24 },
        { "type": "select", "id": "title_alignment", "label": "Alineación del Título",
          "options": [
            { "value": "left", "label": "Izquierda" },
            { "value": "center", "label": "Centro" },
            { "value": "right", "label": "Derecha" }
          ],
          "default": "center"
        }
      ]
    },
    {
      "type": "description",
      "name": "Descripción",
      "settings": [
        { "type": "textarea", "id": "desc_text", "label": "Texto de la Descripción" },
        { "type": "color", "id": "desc_color", "label": "Color del Texto", "default": "#333333" },
        { "type": "range", "id": "desc_size", "label": "Tamaño del Texto", "min": 14, "max": 40, "step": 2, "default": 18 },
        { "type": "select", "id": "desc_alignment", "label": "Alineación de la Descripción",
          "options": [
            { "value": "left", "label": "Izquierda" },
            { "value": "center", "label": "Centro" },
            { "value": "right", "label": "Derecha" }
          ],
          "default": "center"
        }
      ]
    },
    {
      "type": "button",
      "name": "Enlace con Botón",
      "settings": [
        { "type": "text", "id": "button_text", "label": "Texto del Botón" },
        { "type": "url", "id": "button_link", "label": "Enlace" },
        { "type": "color", "id": "button_color", "label": "Color del Botón", "default": "#007BFF" },
        { "type": "color", "id": "button_text_color", "label": "Color del Texto", "default": "#ffffff" },
        { "type": "color", "id": "button_hover_color", "label": "Color del Botón en Hover", "default": "#0056b3" },
        { "type": "color", "id": "button_hover_text_color", "label": "Color del Texto en Hover", "default": "#ffffff" },
        { "type": "select", "id": "button_alignment", "label": "Alineación del Botón",
          "options": [
            { "value": "left", "label": "Izquierda" },
            { "value": "center", "label": "Centro" },
            { "value": "right", "label": "Derecha" }
          ],
          "default": "center"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Sección Personalizada"
    }
  ]
}
{% endschema %}

Conclusión

Este código crea una sección en Shopify con bloques personalizables desde el editor de temas. La estructura de {% schema %} permite definir opciones que facilitan la edición sin tocar código. Además, {% style %} permite generar CSS dinámico basado en las configuraciones de la tienda.