Documentación del tema Helm

1. 1

   Añade Helm a tu tienda

   Helm se distribuye a través de la Shopify Theme Store. Una vez añadido, aparece en tu biblioteca de temas, en Online Store de tu admin de Shopify.

2. 2

   Abre el editor de temas

   En la tarjeta de Helm, haz clic en Edit theme. La página de inicio se abre con su composición por defecto: un hero, una fila de cifras, un cómo funciona, tarjetas de colección, preguntas frecuentes y una llamada a la acción, cada una en una sección Canvas.

3. 3

   Define tus colores y tus fuentes

   Haz clic en el icono Theme settings. En Colors, ajusta los esquemas de color; en Typography, elige las fuentes de títulos, texto y acento.

4. 4

   Conecta tus menús y publica

   Crea tus menús en Content > Menus, elige el menú principal en los ajustes de la sección Header y sustituye los textos y las imágenes de ejemplo. Publica el tema cuando tus páginas estén listas.

Las etiquetas del admin de Shopify están escritas aquí en inglés, como las escribe el centro de ayuda de Shopify. Tu admin las muestra en su propio idioma. Los ajustes propios de Helm aparecen en inglés en el editor de temas: la versión 1.0.8 trae sus etiquetas del editor solo en inglés.

El preset Helm

El preset fija los valores iniciales de Theme settings. Cambia los que quieras después: el preset es solo el punto de partida de la tienda.

Presets de la sección Canvas

Al añadir una sección, el editor ofrece estas composiciones de Canvas. Todas, salvo el Canvas vacío, llegan con sus bloques y un texto de ejemplo.

• Añadir una sección. En la barra lateral del editor, haz clic en Add section y elige Canvas o uno de sus presets.
• Añadir un bloque. Pasa el cursor sobre una sección Canvas y haz clic en Add block. Canvas acepta todos los bloques de tema y los bloques de aplicación.
• Reordenar. Arrastra un bloque o una sección por su asa y haz clic en Save.
• Ocultar sin borrar. Pasa el cursor sobre el nombre de un bloque o de una sección y haz clic en Hide.
• Ajustes de la sección. Cada sección Canvas define su ancho, el espacio entre sus bloques, su margen superior e inferior en ordenador y en móvil, su esquema de color y un identificador de ancla para los enlaces.
• Bloques dentro de bloques. Estos bloques acogen otros bloques: Group, Columns, Split, Hero, Slide, Tab, Accordion item.

Bloques con un comportamiento que conviene conocer

• Heading. El nivel de título y el tamaño visual son dos ajustes separados, así que un título pequeño puede seguir siendo el título principal de la página. Mantén un solo título principal por página.
• Button. Estilos Primary, Secondary y Ghost, tamaños Small, Medium y Large. Link relationship pone nofollow, sponsored, ugc o noreferrer solo en ese enlace; Default sigue Theme settings.
• Video. Sube un vídeo a Shopify o pega una URL de YouTube o Vimeo, y luego ajusta la reproducción automática, el bucle, el silencio y los controles.
• Icon. Elige uno de 18 iconos y luego su tamaño, su color y su alineación.
• Countdown. Cuenta atrás hasta la fecha indicada en End date, la misma para todos. No muestra nada sin una fecha futura, y se oculta cuando la fecha ya ha pasado.
• Email capture. Crea un cliente en Shopify con la etiqueta indicada en Customer tag, leadmagnet por defecto, para que tu herramienta de email pueda segmentar con ella.
• Review card. Vincúlalo a una entrada de un metaobjeto product_review, con los campos title, review, rating, author_name y author_avatar, o rellénalo a mano. Los metaobjetos están en Content > Metaobjects.
• Product rating. Muestra estrellas a partir de los metacampos de producto reviews.rating y reviews.rating_count, y nada mientras estén vacíos.
• Step list. Rellena HowTo name (for SEO) y la lista también emite datos estructurados HowTo para sus pasos.
• Store location. Dirección, horario, teléfono, coordenadas y rango de precios. El bloque también emite datos estructurados LocalBusiness.
• Product price. Muestra el precio de la variante elegida, con su precio de comparación y su precio unitario, y sigue la variante que elige el cliente. La disponibilidad de recogida y el banner de Shop Pay Installments también la siguen.
• Product bundle. Muestra la primera variante disponible de cada producto elegido a su precio real, y luego su total real, sin descuento. Un botón los añade todos al carrito; los productos agotados quedan fuera.

La plantilla de producto empieza con el título, el precio, la valoración, el selector de variante, la cantidad, los botones de compra, la disponibilidad de recogida, Shop Pay Installments y la descripción, y luego los productos complementarios, argumentos de venta, una garantía, los productos relacionados, preguntas frecuentes y la barra fija de añadir al carrito.

No hay plantilla customers: Shopify aloja las cuentas de cliente, y el icono de cuenta de la cabecera abre el inicio de sesión.

• Los productos del carrito, con su cantidad y un botón para quitarlos.
• Una barra de progreso hacia el envío gratis, cuando el umbral es mayor que cero.
• Los descuentos ya aplicados al carrito, como los descuentos automáticos. No hay campo de código de descuento: los clientes introducen sus códigos al pagar.
• Una nota del pedido, cuando Show order note está activado.
• Los datos del destinatario de una tarjeta de regalo, bajo la línea correspondiente.
• Recomendaciones de productos, configuradas en la sección Cart drawer.

Con otro Cart type, el icono del carrito lleva a la página del carrito.

Indexación

• Fuera de los buscadores por defecto. El carrito, los resultados de una búsqueda, las colecciones filtradas por etiqueta y cada página después de la primera se marcan con noindex.
• Plantillas de aterrizaje. Auto-noindex landing pages, activado en el preset, marca con noindex las plantillas cuyo nombre contiene landing, leadmagnet o advertorial.
• Página por página. Un metacampo de texto seo.robots en una página, un producto, un artículo o una colección sustituye el valor para ese elemento, por ejemplo noindex,follow.
• Buscadores de IA. Cuando Allow AI engines to read your content está desactivado, Helm añade etiquetas noindex dirigidas a GPTBot, ClaudeBot, PerplexityBot, CCBot y Google-Extended.
• Enlaces a otros sitios. Los botones, los enlaces de imagen, la barra de anuncios, el pie y la ubicación de tienda añaden nofollow, noreferrer y una pestaña nueva a los enlaces que salen de tu tienda, según los ajustes de SEO. Un botón o una imagen puede cambiarlo con su Link relationship.

Datos estructurados

El JSON-LD que emite Helm y lo que activa cada tipo.

• Organization. En cada página, con tu logo, la descripción de tu tienda y las cuentas sociales de Theme settings. La página de inicio añade WebSite con una acción de búsqueda.
• Product. En las páginas de producto, con la oferta de la variante elegida.
• BlogPosting. En los artículos.
• CollectionPage. En las páginas de colección.
• BreadcrumbList. Donde se muestra la ruta de navegación.
• FAQPage. A partir del metacampo de página faq.items, una lista de metaobjetos con una pregunta y una respuesta, en las páginas que usan page.faq o llevan ese metacampo.
• HowTo. A partir de un Step list con el HowTo name rellenado.
• LocalBusiness. A partir de cada bloque Store location.

• Sin script de seguimiento. Helm no añade ningún script de analítica ni de publicidad. Conecta tus píxeles en Settings > Customer events, o mediante las aplicaciones que los ofrecen.
• Consentimiento. Helm lee el consentimiento de los visitantes de la API Customer Privacy de Shopify. Activa el banner de cookies en Settings > Customer privacy.
• Preferencias de cookies. El bloque Cookie preferences, en el pie por ejemplo, vuelve a abrir las opciones de privacidad del visitante.
• Un script propio. Usa una sección o un bloque Custom Liquid en las plantillas que lo necesiten.

• Traducciones de la tienda. Los textos de la tienda vienen en inglés, francés, español y alemán.
• Añadir un idioma. Añade y publica un idioma en Settings > Languages. Para un idioma que Helm no trae, tradúcelo con la aplicación Translate & Adapt de Shopify u otra aplicación de traducción.
• Editor de temas. Las etiquetas de los ajustes de Helm están solo en inglés, sea cual sea el idioma del admin.
• De derecha a izquierda. Para el árabe, el hebreo, el persa, el urdu y los demás idiomas que se escriben de derecha a izquierda, Helm invierte la dirección de la página.