Los desarrolladores de WooCommerce que personalizaban los escaparates usaban anulaciones de plantillas PHP, hooks y filtros — reemplazando los archivos de woocommerce/templates/ en el tema hijo y enganchando en woocommerce_before_add_to_cart_button y otros hooks de acción similares. El equivalente de Shopify es el sistema de plantillas Liquid, con una arquitectura completamente diferente. Esta guía mapea los patrones de desarrollador de WooCommerce a sus equivalentes en Shopify Liquid.

Sistema de plantillas de WooCommerce vs Shopify Liquid

Concepto	WooCommerce	Shopify
Lenguaje de plantilla	PHP	Liquid (basado en Ruby)
Anulación de plantillas	Copiar al tema hijo en woocommerce/	Editar los archivos del tema directamente (o usar la extensión de app del tema)
Hooks de acción	add_action('woocommerce_before_add_to_cart_button', ...)	Sin sistema de hooks — editar los archivos Liquid directamente
Hooks de filtro	add_filter('woocommerce_product_title', ...)	Sin sistema de filtros — lógica en Liquid o embed de app
Secciones dinámicas	Parcial PHP + AJAX	Secciones Liquid + Section Rendering API
Configuración del tema	Personalizador de WordPress	Editor de temas de Shopify (settings_schema.json)
Metafields en plantillas	get_post_meta() en PHP	product.metafields.namespace.key en Liquid
Lógica condicional	PHP if/else/foreach	Liquid if/unless/for
SCSS/CSS	style.css del tema hijo	assets/theme.css o CSS en línea en secciones
JavaScript	wp_enqueue_script() en functions.php	assets/*.js referenciado en layout/theme.liquid o archivos de sección

Fundamentos de la sintaxis de Liquid

Variables y salida

{{ product.title }}
{{ product.price | money }}
{{ product.description }}
{{ product.metafields.sizing.fit_notes }}

Flujo de control

{% if product.available %}
  <button>Añadir al carrito</button>
{% else %}
  <p>Agotado</p>
{% endif %}

{% for variant in product.variants %}
  <option value="{{ variant.id }}">{{ variant.title }} — {{ variant.price | money }}</option>
{% endfor %}

{% unless product.tags contains 'sale' %}
  <!-- no está en oferta -->
{% endunless %}

Filtros (equivalentes a los filtros de WordPress/WooCommerce pero integrados)

{{ product.price | money }}                    {# £29,99 #}
{{ product.title | upcase }}                   {# TÍTULO DEL PRODUCTO #}
{{ 'image.jpg' | asset_url | img_tag }}        {# <img src="cdn.shopify.com/..." #}
{{ product.description | strip_html | truncate: 150 }}
{{ collection.products | sort: 'title' }}

Arquitectura del tema Dawn

Dawn es el tema de referencia de Shopify (gratuito, código abierto). Comprender su estructura se corresponde con la estructura del tema hijo de WooCommerce:

dawn/
├── assets/              ← CSS, JS, fuentes, imágenes (servidos tal cual desde la CDN)
├── config/
│   ├── settings_schema.json   ← Controles del Editor de temas (como el personalizador de WordPress)
│   └── settings_data.json     ← Valores guardados de la configuración del tema
├── layout/
│   ├── theme.liquid     ← Maqueta global (como WP header.php + footer.php + wp_head())
│   └── password.liquid  ← Maqueta de página de contraseña antes del lanzamiento
├── locales/             ← Cadenas de traducción i18n
├── sections/            ← Secciones de página reutilizables y configurables (arrastrables en el editor)
├── snippets/            ← Parciales Liquid reutilizables (como WP template-parts)
└── templates/           ← Plantillas de página
    ├── product.json     ← Plantilla de página de producto (referencia secciones)
    ├── collection.json  ← Plantilla de página de colección
    ├── index.json       ← Plantilla de página de inicio
    ├── cart.json
    ├── page.json
    └── page.about.json  ← Plantilla personalizada para páginas específicas

Secciones y bloques

Las secciones son el bloque de construcción central de los temas de Shopify — regiones editables por el comerciante y que se pueden arrastrar. Cada sección tiene un bloque {% schema %} que define su configuración:

{%- comment -%} sections/product-badges.liquid {%- endcomment -%}

<div class="product-badges">
  {% if section.settings.show_sale_badge and product.compare_at_price > product.price %}
    <span class="badge badge--sale">{{ section.settings.sale_text }}</span>
  {% endif %}
  {% if section.settings.show_new_badge and product.tags contains 'new' %}
    <span class="badge badge--new">Nuevo</span>
  {% endif %}
{% for block in section.blocks %}
  {% if block.type == 'custom_badge' %}
    <span class="badge" style="background: {{ block.settings.color }}">{{ block.settings.text }}</span>
  {% endif %}
{% endfor %}
</div>

{% schema %}
{
  "name": "Insignias de producto",
  "settings": [
    { "type": "checkbox", "id": "show_sale_badge", "label": "Mostrar insignia de oferta", "default": true },
    { "type": "checkbox", "id": "show_new_badge", "label": "Mostrar insignia de nuevo", "default": false },
    { "type": "text", "id": "sale_text", "label": "Texto de la insignia de oferta", "default": "Oferta" }
  ],
  "blocks": [
    {
      "type": "custom_badge",
      "name": "Insignia personalizada",
      "settings": [
        { "type": "text", "id": "text", "label": "Texto de la insignia" },
        { "type": "color", "id": "color", "label": "Color de la insignia", "default": "#c0392b" }
      ]
    }
  ]
}
{% endschema %}

Snippets (reemplaza los parciales de plantilla de WooCommerce)

Los snippets son parciales Liquid reutilizables — el equivalente de las partes de plantilla de WooCommerce y wc_get_template_part():

{%- comment -%} snippets/product-card.liquid {%- endcomment -%}
{%- assign product = product_card_product -%}

<div class="product-card">
  <a href="{{ product.url }}">
    {{ product.featured_media | image_url: width: 600 | image_tag: class: 'product-card__image', loading: 'lazy', alt: product.featured_media.alt }}
  </a>
  <div class="product-card__info">
    <h3>{{ product.title }}</h3>
    <span class="product-card__price">{{ product.price | money }}</span>
  </div>
</div>

{%- comment -%} Uso en una sección: {%- endcomment -%}
{% render 'product-card', product_card_product: product %}

Configuración del tema (settings_schema.json)

La configuración del tema define los controles globales visibles en el Editor de temas — equivalente a los ajustes del personalizador de WordPress:

// config/settings_schema.json (extracto)
[
  {
    "name": "Marca",
    "settings": [
      { "type": "color", "id": "accent_color", "label": "Color de acento", "default": "#3a8c9c" },
      { "type": "font_picker", "id": "heading_font", "label": "Fuente de título", "default": "helvetica_n4" },
      { "type": "checkbox", "id": "show_announcement_bar", "label": "Mostrar barra de anuncios", "default": false },
      { "type": "text", "id": "announcement_text", "label": "Texto del anuncio" }
    ]
  }
]

Acceso en Liquid: {{ settings.accent_color }}, {{ settings.announcement_text }}

Añadir CSS personalizado

Los desarrolladores de WooCommerce añadían CSS en el style.css del tema hijo o mediante el CSS personalizado del personalizador de WordPress. Equivalente en Shopify:

Crear assets/custom.css en el tema.
Referenciar en layout/theme.liquid: {{ 'custom.css' | asset_url | stylesheet_tag }}
Para CSS específico de sección: escribir el CSS directamente dentro de la etiqueta <style> del archivo de sección (Shopify lo delimita a la sección).
Variables CSS: definir en assets/base.css (Dawn) o en línea en el bloque <style> de theme.liquid basándose en settings.*.

Añadir JavaScript personalizado

{%- comment -%} En layout/theme.liquid, antes de </body> {%- endcomment -%}
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

{%- comment -%} En una sección, listeners de evento delimitados a la sección {%- endcomment -%}
<script>
document.addEventListener('DOMContentLoaded', function() {
  var section = document.getElementById('shopify-section-{{ section.id }}');
  // JavaScript delimitado a la sección
});
</script>

Mostrar metafields en las plantillas

WooCommerce usaba get_post_meta($product_id, 'custom_field', true) en las plantillas PHP. En Shopify Liquid:

{% comment %} En snippets/product-metafields.liquid {% endcomment %}
{% if product.metafields.sizing.fit_notes != blank %}
  <div class="fit-notes">
    <h3>Guía de tallas</h3>
    <p>{{ product.metafields.sizing.fit_notes }}</p>
  </div>
{% endif %}

{% if product.metafields.bike.frame_material != blank %}
  <dl class="bike-specs">
    <dt>Cuadro</dt>
    <dd>{{ product.metafields.bike.frame_material }}</dd>
    <dt>Peso</dt>
    <dd>{{ product.metafields.bike.weight_kg }} kg</dd>
  </dl>
{% endif %}

Flujo de trabajo de desarrollo de temas

Usar Shopify CLI: shopify theme dev --store tutienda.myshopify.com para desarrollo local con vista previa en vivo.
Descargar el tema localmente: shopify theme pull.
Subir cambios: shopify theme push.
Trabajar en un tema duplicado no publicado para evitar romper la tienda en vivo.
No editar nunca el tema publicado directamente en producción — usar siempre un tema de desarrollo.
Código fuente de Dawn: GitHub en Shopify/dawn — referencia para patrones.

Lista de verificación para la migración del desarrollador

Mapear las anulaciones de plantillas PHP de WooCommerce a sus equivalentes en secciones/snippets Liquid.
Convertir la lógica PHP (condicionales, bucles) a sintaxis Liquid.
Mover el CSS personalizado del style.css del tema hijo a assets/custom.css.
Mover los JS de wp_enqueue_script a assets/*.js con carga diferida en theme.liquid.
Añadir ajustes de tema personalizados para valores editables por el comerciante (colores, texto) en settings_schema.json.
Mostrar metafields en las plantillas usando product.metafields.namespace.key.
Probar todas las plantillas Liquid con casos extremos: productos agotados, productos sin imágenes, metafields vacíos.
Usar Shopify CLI para el flujo de trabajo de desarrollo local.
Revisar el código fuente de Dawn para los patrones de implementación estándar antes de escribir código personalizado.

El mayor cambio de mentalidad al pasar del desarrollo de temas en WooCommerce a Shopify es pasar de los hooks a las ediciones directas. WooCommerce fomentaba no editar nunca las plantillas de los plugins — usar hooks para inyectar código alrededor de ellas. Shopify no tiene sistema de hooks; se editan los archivos Liquid directamente. Esto es a la vez más sencillo (ves exactamente lo que se renderiza) y más frágil (las actualizaciones del tema pueden sobreescribir las ediciones). La mitigación es el versionado de temas de Shopify: trabajar siempre en un tema de desarrollo, confirmar los cambios en el control de versiones y revisar las diferencias antes de aplicar las actualizaciones del tema para asegurarse de que las personalizaciones sobreviven.

Personalización de temas de Shopify para desarrolladores de WooCommerce (2026)