Cómo agregar un botón personalizado a Shopify

Si vendes en Shopify, el diseño de tu botón de CTA es fundamental. Ya sea que lleve a una página promocional, a la suscripción a un boletín VIP o a un enlace de afiliado, un botón que llama la atención se pulsa con más frecuencia que uno que se mezcla con la página, y en una tienda, más clics significan más ventas.

Los temas de Shopify OS 2.0, incluido Dawn, tienen bloques de botones nativos, pero te dan poco control sobre cómo lucen esos botones. El bloque te permite establecer la etiqueta, el enlace y si el estilo es sólido o con contorno, mientras que los colores provienen de la configuración global de tu tema. Eso mantiene tu tienda coherente (que es el objetivo de la configuración del tema), pero también significa que un botón pensado para destacar lucirá igual que todos los demás botones de tu sitio.

Conseguir un botón independiente con sus propios colores, efecto al pasar el cursor o icono requiere uno de dos enfoques. Puedes añadir un bloque de Liquid personalizado en tu editor de temas y escribir tú mismo el HTML y el CSS, o puedes usar un widget alojado gratuito que se encarga del estilo y te da un código de inserción para pegar.

Si quieres un botón de CTA personalizado y optimizado para conversiones en tu tienda de Shopify sin editar el código del tema ni pagar a un desarrollador, esta guía explica cómo añadir un botón en Shopify usando ambos métodos.

Watch on youtube

How to Add a Custom Button to Shopify

Opción 1: Usar Liquid personalizado y CSS

La forma estándar de conseguir un diseño de botón único en una tienda de Shopify sin instalar una aplicación de terceros es escribir el código tú mismo. El editor de temas de Shopify incluye una sección de Liquid personalizado donde puedes añadir tu propio HTML y CSS, de modo que puedes definir un botón y darle el estilo exactamente como quieras sin editar directamente los archivos de tu tema.

Así es cómo añadir un botón en Shopify usando Liquid personalizado y CSS:

1. Desde tu panel de administración de Shopify, ve a Tienda online en el menú de la izquierda. Luego haz clic en el icono del lápiz junto a Tienda online o haz clic en Editar tema en la pantalla.

2. En la barra lateral izquierda, haz clic en Agregar sección, busca Liquid personalizado y selecciónalo. Aparece un campo de texto a la derecha donde va tu código.

3. Agrega el HTML de tu botón junto con un bloque <style> que contenga tu CSS, luego haz clic en Guardar en la esquina superior derecha. Tus cambios aparecen en la vista previa a medida que trabajas.

Una advertencia al usar este método: escribir el estilo tú mismo significa que corres el riesgo de cometer errores. Las reglas escritas sin selectores acotados pueden afectar a otros elementos de la página, y el Liquid personalizado añadido a tu encabezado o pie de página se muestra en todas las páginas de tu tienda, por lo que un pequeño error puede tener un impacto mayor que solo el botón que estabas diseñando. Shopify también recomienda duplicar tu tema como copia de seguridad antes de editar el código, lo que refleja cómo la plataforma considera el riesgo.

Contratar a un desarrollador podría resolver el problema técnico, pero añade un coste difícil de justificar para un solo botón, en especial cuando quieres probar varias versiones y cada cambio implica otra solicitud.

Opción 2: Añadir un widget de botón gratuito y personalizable (recomendado)

¿Quieres el control del diseño sin el riesgo? Un widget de botón gratuito alojado es una alternativa al Liquid personalizado en Shopify con sus propios colores, estado al pasar el cursor e icono. Puedes personalizar el botón en un creador visual, copiar el código de inserción y pegarlo en un bloque de Liquid personalizado en tu editor de temas.

El widget de Botón de Jotform ofrece las opciones de estilo que el bloque nativo de Shopify deja fuera. Estableces de forma independiente los colores de fondo, de texto y al pasar el cursor, añades un icono antes o después de la etiqueta, y ajustas el radio de las esquinas, la altura, el relleno y la sombra.

Así es cómo añadir un botón en Shopify usando el widget de botón de Jotform: 

1. En tu página de Workspace de Jotform, haz clic en Crear, selecciona Widget de sitio web, busca “Botón” y luego haz clic en Usar widget.

2. En la pestaña General, elige la acción de tu botón, introduce la información solicitada (correo electrónico, número de teléfono, enlace URL, etc.) y escribe la etiqueta de tu botón. Añade una segunda línea o texto adicional si tu oferta necesita contexto.

3. En la pestaña Estilos, define tus colores, activa un icono y elige su posición, luego ajusta la forma y el tamaño. La pestaña Diseño controla si el botón es en línea o flotante, y si aparece en escritorio, en móvil o en ambos.

4. Haz clic en Publicar en la barra de navegación superior, luego haz clic en Copiar código en la sección Insertar del menú de la izquierda.

También puedes hacer clic en Plataformas y seleccionar Shopify para obtener instrucciones de inserción específicas de la plataforma.

5. Para insertar tu botón personalizado en Shopify, abre tu editor de temas, selecciona la plantilla de tu página, haz clic en Agregar sección o Agregar bloque, elige Liquid personalizado, pega tu código de inserción y haz clic en Guardar en la esquina superior derecha. 

Con esta opción, como diseñas el botón en Jotform en lugar de hacerlo directamente en el tema de tu sitio web, tus cambios permanecen separados de los ajustes globales de tu tema. Probar un color o una etiqueta diferentes significa editar el widget en lugar de editar de nuevo el código del tema. Para la configuración completa, consulta cómo añadir un botón a un sitio web.

Potencia tu tienda de Shopify con widgets inteligentes y sin servidor

Un botón es una de las muchas funciones que puedes añadir a tu sitio sin contratar a un desarrollador ni pagar por otra aplicación mensual. Como alternativa de llamada a la acción para Shopify, el directorio de widgets de sitio web gratuitos de Jotform tiene más de 150 opciones, incluidas varias orientadas a las mismas carencias de la tienda que el botón.

Por ejemplo, un widget de Barra de anuncios coloca tu umbral de envío gratuito o las fechas de tus rebajas en la parte superior de cada página, donde los compradores lo ven antes de finalizar la compra. Un widget de Botón de compra lleva a los compradores directamente a una URL de producto, carrito o pago con una llamada a la acción de compra, lo que resulta ideal para una página de aterrizaje de campaña o una venta adicional posterior a la compra. Y la categoría de comercio electrónico cuenta con tarjetas de producto y tablas de precios. También existe una integración de Jotform con Shopify que te permite recopilar información de los clientes junto con tu tienda. 

Cada widget se inserta de la misma manera que el botón, por lo que no pagas por otra suscripción de aplicación cada vez que quieres añadir una función sencilla.

Como marca de comercio electrónico, tu tiempo y tu presupuesto deberían dedicarse a cosas como abastecerte de productos y mejorar tus embudos de anuncios, no a escribir Liquid personalizado para que un botón se vea diferente de los demás. El widget de Botón de Jotform te ofrece una llamada a la acción que puedes rediseñar en un minuto sin tocar tu tema. Pruébalo gratis hoy mismo.