Cómo añadir una sección personalizada en Shopify

Qué necesitas

• Una tienda Shopify y permiso para editar su tema (propietario de la tienda o personal con acceso a Temas).
• El código de la sección: un archivo .liquid que termina en una etiqueta {% schema %}. Escríbelo tú, genéralo con Klorr o elige uno del marketplace.
• Un tema Online Store 2.0, si quieres la sección en páginas que no sean la página de inicio.

1. Duplica primero tu tema

   En el panel de control de Shopify, ve a Tienda online → Temas. Junto a tu tema actual, abre el menú … y elige Duplicar. Trabaja en la copia, así tu tienda publicada no se toca hasta que estés conforme.

2. Abre el editor de código

   En la copia, vuelve a abrir el menú … y elige Editar código. Las carpetas del tema —layout, sections, snippets, assets y el resto— aparecen a la izquierda.

3. Crea el archivo de la sección

   En la carpeta sections, elige Agregar una nueva sección (en el editor más reciente, el + junto a la carpeta y luego Nuevo archivo). Ponle un nombre según lo que hace, como countdown-banner. Shopify crea sections/countdown-banner.liquid con algo de código de ejemplo.

4. Pega tu código y guarda

   Selecciona todo el contenido del nuevo archivo, sustitúyelo por el código de tu sección —incluido el bloque {% schema %} del final— y haz clic en Guardar. Si Shopify muestra un error, más abajo tienes las soluciones.

5. Agrégala en el editor de temas

   Vuelve a Temas y haz clic en Personalizar en la copia. Abre la página que quieras —inicio, un producto, una colección— y haz clic en Agregar sección en la barra lateral izquierda. Tu sección aparece con el nombre que tiene en su schema.

6. Configúrala y publica

   Rellena los ajustes de la sección —textos, imágenes, colores—, arrástrala a su sitio y haz clic en Guardar. Cuando la vista previa esté bien, publica la copia desde la página Temas.

Una sección completa para probar

Pega esto en un nuevo archivo de sección para ver todo el proceso en marcha. Es un título, una línea de texto y un botón, cada uno editable en el editor de temas.

<div class="promo-{{ section.id }}">
  <h2>{{ section.settings.heading | escape }}</h2>
  <p>{{ section.settings.text | escape }}</p>
  {% if section.settings.button_label != blank %}
    <a href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
  {% endif %}
</div>

{% style %}
  .promo-{{ section.id }} {
    padding: 48px 20px;
    text-align: center;
    background: {{ section.settings.background }};
  }
{% endstyle %}

{% schema %}
{
  "name": "Promo banner",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Free shipping this week" },
    { "type": "text", "id": "text", "label": "Text", "default": "On every order over $50." },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "color", "id": "background", "label": "Background", "default": "#f1ecfb" }
  ],
  "presets": [{ "name": "Promo banner" }]
}
{% endschema %}

Generador de schema →

Por qué añadir una sección sin app

• Sin cuota mensual: la sección forma parte de tu tema, no de una suscripción.
• Nada extra que cargar: el script de una app puede ejecutarse en todas las páginas; el código de una sección solo se ejecuta donde está la sección.
• Se queda aunque se vayan las apps: desinstalar una app puede dejar huecos en las páginas que creó. Un archivo de sección se queda hasta que lo borres.

Relacionado