¿Cómo crear un botón HTML de llamada a la acción para tu tienda Shopify?

Para crear experiencias de usuario fluidas para tus clientes de ecommerce es fundamental diseñar botones prestando especial atención a los detalles.

Un diseño deficiente puede resultar en ventas perdidas.Los botones de llamada a la acción permiten a los comerciantes impulsar la interacciónde los visitantes con productos específicos o llevar a cabo una actividad específica, como crear una cuenta o acceder al contenido.

Crear botones intuitivos de llamada a la acción puede estar fuera del alcance de muchos comerciantes, por lo que es importante considerar una estrategia de llamada a la acción cuando crees temas personalizados o realices trabajos para clientes.

✅ Hoy vas a aprender a crearlos con html. ¿No sabes programar? Da igual. Nosotros te indicamos en este artículo cómo hacerlo:

1. ¿Cómo agregar un botón html de llamada a la acción a una landing page?
2. ¿Cómo añadir un botón html dinámico de llamada a la acción a tu página 'home'?

Un botón ideal de llamada a la acción dirigirá a los clientes a la acción deseada, mejorará las tasas de conversión y, en última instancia, ayudará al sitio web de tu cliente a alcanzar sus objetivos definidos.

En este tutorial, te mostraremos cómo crear una sección con un botón de llamada a la acción que puedes incluir en una landing page o página de destino.

También veremos cómo este botón de llamada a la acción puede personalizarse desde el Editor de temas para agregar texto al botón y un enlace.

¿Cómo agregar un botón html de llamada a la acción a una landing page?

Las páginas de destino generalmente se emplean cuando tú o un cliente llevan a cabo una campaña de marketing y desean dirigir a los clientes potenciales a un punto específico.

Puedes crear una landing page única en Shopify, que se diferencie claramente de las páginas normales, configurando una plantilla de página alternativa para tu landing page.

☝ Ladocumentación de nuestro centro de ayuda(disponible en inglés) te muestra cómo puedes editar tu tema para crear una plantilla alternativa para las páginas.

1. Crea una nueva sección

El primer paso aquí es crear una nueva sección titulada call-to-action.liquid que luego puedas conectar a tu plantilla de página alternativa.

Cuando creas nuevassecciones de Shopifydesde el editor de archivos de temas, se crea automáticamente un "andamio" para cada nueva sección, con etiquetas de esquema, CSS y JavaScript.

Dentro de las etiquetas de esquema, debes agregarJSON, que define cómo el Editor de temas "lee" nuestro contenido.

Genera ingresos haciendo lo que amas:

El Programa de Shopify Partner te permite usar tus conocimientos para ayudar a emprendedores en todo el mundo. Con más de 800.000 comerciantes a nivel mundial, las oportunidades para hacer dinero son ilimitadas.

Obtén más información

El HTML que agregarás a esta sección se colocará sobre las etiquetas de esquema.

Si estás utilizando un editor de texto comoAtompara crear una nueva sección, entonces deberás agregar este andamio manualmente.

Puedes ampliar la funcionalidad del editor utilizandopaquetes Atom(disponible en inglés) si deseas personalizarlo más allá de lo que se permite de forma nativa. A continuación el código correspondiente:

2. Agrega HTML para el botón

En este caso, quisiéramos a tener un encabezado sobre el botón de llamada a la acción para proporcionar a los visitantes una descripción del botón, y también sería importante agregar texto dentro del botón.

Para ello, debes envolver el botón dentro de un contenedor y asignarle al botón una clase para darle estilo más adelante.

En el ejemplo a continuación, asignaremos una clasebutton一个埃斯特boton,佩罗podrias城市搜救cualquier瞿领导班级e se adapte a la estructura de tu tema. Para el título sobre el botón de llamada a la acción, asignaremos un h3, y este encabezado se vinculará al esquema debajo del HTML usando la etiquetaLiquid{{section.settings.text-box}}.

También agregaremos un atributohrefpara especificar el destino del enlace, una clasebuttonque diseñaremos más adelante y un campo de texto para agregar texto al botón en sí.

Finalmente, envolvemos todo esto en etiquetashrque agregarán una línea horizontal arriba y debajo del botón para una mejor definición de la sección.

Una vez que hayas agregado todos estos elementos, el código HTML para este botón de llamada a la acción se vería así:

3. Utiliza JSON para definir configuraciones

A continuación, deberás agregar JSON dentro de las etiquetas de esquema, para que los elementos se muestren en el Editor de temas y puedas asignar texto y enlaces.

Cada ID de Liquid en el HTML está referenciada por suIDen el objeto de esquema.

Ahora, puedes asignar de qué tipo de input se trata. En este caso, el encabezado tendrá un tipo de texto, una etiqueta para mostrar algunas instrucciones sobre el Editor de temas y un marcador de posición de texto predeterminado.

El enlace tendrá un tipo de URL y el texto del enlace un tipo detext.

Las etiquetas describirán el propósito de los campos, por ejemplo,HeadingoButton link, mientras que los valores predeterminados mostrarán texto de marcador de posición. Deberías asignar un marcador de posición para el enlace del botón, ya que no habría ningún valor predeterminado aquí.

Así es como la matriz del esquema se vería en tu archivo de sección:

También te puede interesar:10 consejos para crear landing page que ayuden a convertir clientes

4. Dale estilo a tu botón

Ahora podemos pasar a la parte emocionante: ¡el estilo! En el archivopage.landing.liquid, asignamos una clasebuttonal botón de llamada a la acción, por lo que cuando agreguemos CSS a la hoja de estilo, usaremos.buttoncomo selector.

Dentro de la hoja de estilo本金,你能去asignar diferentes propiedades y valores a la clase del botón(class), y personalizar el botón para que se vea exactamente como te gustaría.

Las propiedades comopadding,font-size, yborder-radius(relleno, tamaño de fuente y radio del borde) son particularmente importantes para darle personalidad a tu botón, mientras que un color cuidadosamente seleccionado ayudará a que el botón se destaque frente a otros elementos de la página.

También puedes experimentar con propiedades como elcursorpara cambiar el comportamiento del mouse del usuario cuando interactúa con el botón.

En nuestro caso, optaremos por un botón de tamaño mediano con esquinas ligeramente redondeadas y una ligera sombra en la parte inferior. Asimismo, usaremos color púrpura contrastante y un ícono de puntero de mano para indicar un enlace, por lo que el estilo para.button-clickluce así:

Esto generará un botón que se ve así:

罪禁运,可能quieras,埃斯特botonluzca más realista, por lo que un efecto animado ayudará a mostrar que este botón es un objeto de varios estados, muy parecido a un botón de la vida real.

Para lograrlo, puedes usarpseudo-clases CSSpara cambiar la forma en la que luce el botón cuando un visitante sitúa el cursor sobre el botón, y también cuando activan o hacen clic en el botón.

En primer lugar, quisiéramos mostrar una reacción cuando el visitante poner el cursor sobre nuestro botón, revelando un color más claro.

Usaremos el selector.button-clickcon la pseudoclasehoverpara asignar un color específico cuando un cursor está en el botón, por lo que el estilo se vería así:

Ahora verás un efecto como este:

干草una伽马德对de desplazamiento CSS,puedes usar en tus botones de llamada a la acción clicables, como la opacidad, lo que hará que el botón se vea ligeramente transparente cuando el cliente pase el cursor sobre el botón.

Luego, también puedes mostrar algo de movimiento cuando se hace clic en el botón, moviendo ligeramente la posición del botón de llamada a la acción y ajustando la sombra del cuadro.

Esta técnica proporciona retroalimentación visual al visitante y demuestra que se está produciendo una interacción y confirma que se está presionando el botón.

La pseudo clase que usarás para definir los cambios cuando el usuario haga clic en el botón se llamaactive.

Dentro de esta clase, puedes usar lapropiedad de transformación, que te permite cambiar la posición del botón cuando está activo o al hacer clic.

En este caso, agregaríatransform: translateY (0.25em);, que hará caer el botón verticalmente en0.25emal hacer clic. UtilizartranslateYes más eficaz que moverse con posicionamiento en CSS, ypuedes aprender más sobre este proceso con Paul Irish. También reduciremos la sombra de la caja a la mitad, y devolveremos el color del botón a su tono más oscuro.

Ahora, cuando desplaces el mouse y hagas clic en el botón, verás un efecto como este:

5. Incluye la sección de llamada a la acción en tu landing page

El paso final es agregar la sección de llamada a la acción a la plantilla de la página de destino, para que aparezca en el Editor de temas y puedas asignar texto y enlaces.

Todo lo que necesitas hacer es regresar a la plantilla de página alternativa que creaste y agregar código para incluir la sección call-to-action.liquid dentro de esa página.

Para nuestro ejemplo, queremos que el botón de llamada a la acción aparezca en la parte inferior de la página de destino, por lo que dentro de la page.landing.liquid agregaremos{% section 'call-to-action'%}. La plantilla page.landing.liquid completa se vería así:

Para que aparezca este botón de llamada a la acción, deberás cambiar a qué plantilla está asignada una página. Puedes cambiar fácilmente una plantilla de página desde el panel de control cuando estés editando la página.

Ahora, cuando vayas a tu Editor de temas y te muevas a la landing page, verás esto:

6. ¡Haz lo tuyo!

如果好埃斯特boton especifico de la acci llamadaón podría encajar bien en nuestra tienda de prueba, es importante tener en cuenta el tipo de colores, formas y tamaños que serían adecuados para los diferentes proyectos de tus clientes.

Un botón de estilo verdaderamente único y complementario, que se logra con una solución a la medida, generalmente se verá y funcionará de manera más efectiva que una solución general para todos.

Observa el diseño existente de la página en la que estás trabajando y mira si tus botones tienen consistencia, etiquetas claras y están posicionados adecuadamente.

Los botones de llamada a la acción deben ser llamativos y fácil de reconocer, para propiciar un flujo natural cuando los compradores visitan las páginas de tus clientes.

¿Cómo añadir un botón html dinámico de llamada a la acción a tu página 'home'?

También es posible agregar un botón de llamada a la acción como una sección dinámica que se puede incluir en la página de inicio.

Dado que el botón podría ser una sección dinámica, podría moverse a diferentes puntos de la página de inicio, lo que permite a tus clientes ser creativos con la personalización de sus tiendas.

Otra ventaja de un botón de llamada a la acción personalizable en las páginas de inicio es que brinda la oportunidad de llamar rápidamente la atención sobre cualquier oferta especial, o incentivos de la parte superior del embudo que los clientes puedan tener.

1. Crea ajustes preestablecidos

La principal diferencia estructural entre una sección estática y una sección dinámica es la adición de"presets"o ajustes preestablecidos dentro de la configuración del esquema de una sección dinámica.

Cuando se incluyen estos ajustes preestablecidos, el tema reconocerá automáticamente que esta sección es una sección dinámica que se puede agregar a la página de inicio.

Los ajustes preestablecidos definirán cómo aparece la sección en el Editor de temas, y deben tener un nombre y una categoría.

Estos ajustes preestablecidos no se incluyen en el archivo base cuando hace clic en Agregar nueva sección, pero agregarlos manualmente es sencillo.

Por ejemplo, si deseas otorgar propiedades dinámicas a la sección de llamada a la acción que creaste anteriormente, puedes agregar el siguiente código dentro de sus etiquetas de esquema, después de la configuración existente.

2. Revisa la sección

Una vez que hayas agregado los ajustes preestablecidos dentro del esquema de tu sección de llamada a la acción existente, el archivo Liquid completo se verá así:

En este caso, queremos conservar el estilo del botón, por lo que podemos mantener el CSS igual. Pero si deseas configurar nuevas clases o IDs para este botón específico, también puedes hacerlo y agregar un nuevo estilo dentro de la hoja de estilo.

3. Renderiza en el editor de temas

Como se han agregado lospresets, el Editor de temas extraerá esta sección como una posible nueva sección, en la categoríaCall to Action.

Ahora, si deseas agregar un botón de llamada a la acción a tu página de inicio, sigue estos pasos:

Puedes asignar una URL y un texto, pero lo más importante, puedes cambiar el posicionamiento de la sección en la página.

Diseño responsable

Crear botones de llamada a la acción atractivos le dará a tus clientes una ventaja competitiva cuando necesiten dirigir a los compradores a puntos específicos, y tomar en cuenta los estilos más apropiados para los botones puede impulsar el potencial de un sitio web.

Ya sea que los comerciantes utilicen botones de llamada a la acción para promocionar obsequios, fomentar la interacción con los clientes o simplemente realizar una venta, es tu responsabilidad como diseñador proporcionar botones útiles y fáciles de usar.

---

Publicadopor Pablo Golán, editor en jefe del blog de Shopify en español y responsable de marketing de contenidos y localización para Latinoamérica. Texto original de Liam Griffin. Traducción a cargo de Gabriela Agüero.