Correcto
Botón
Cree una llamada a la acción flexible con opciones personalizables de estilo, icono, enlace y visualización en móviles.
Añada un bloque de llamada a la acción clara dentro de una sección o bloque. Puede mantenerlo simple con texto y un enlace, o hacerlo más visual con un icono, estilos alternativos y opciones de visualización específicas para móviles.
Ajustes principales
Sección titulada «Ajustes principales»Empiece con el texto y el enlace del botón, y luego ajuste el estilo visual para que coincida con la importancia que debe transmitir la acción. Los estilos más destacados funcionan mejor para las acciones principales, mientras que los estilos simples o secundarios son adecuados para enlaces de apoyo y acciones menos destacadas.
Puede añadir un emoji o un nombre de icono compatible para dar al botón una referencia visual rápida. En la mayoría de los casos, el icono debe reforzar la etiqueta en lugar de sustituirla.
El diseño controla dónde aparece el icono o si el botón muestra solo el icono. Los botones que solo muestran el icono funcionan mejor cuando el significado es obvio por el contenido circundante o cuando el símbolo es ampliamente reconocido.
Si utiliza un diseño que solo muestra el icono, asegúrese de que la acción siga siendo fácil de entender de un vistazo. Las etiquetas de texto suelen ser más claras y accesibles.
Utilice las variantes de tamaño más pequeñas o más grandes cuando el botón predeterminado parezca desproporcionado respecto al contenido circundante. Los estilos grandes pueden ayudar a que una promoción destacada llame la atención, mientras que los estilos pequeños encajan mejor en diseños compactos.
La opción móvil de ancho completo hace que el botón sea más fácil de pulsar en pantallas pequeñas. Esto es especialmente útil en diseños apilados o áreas promocionales donde un botón en línea estrecho podría pasar desapercibido.
Si el botón apunta a un destino externo, abrir el enlace en una nueva pestaña puede ayudar a los clientes a conservar su lugar. Para destinos internos, abrirlo en la misma pestaña suele resultar más natural.
Ajustes estándar de bloque
Sección titulada «Ajustes estándar de bloque»Ajustes de visibilidad
Sección titulada «Ajustes de visibilidad»Los ajustes de visibilidad le permiten mostrar u ocultar este bloque en escritorio o móvil. Esto resulta útil cuando desea distintos tratamientos del botón para distintos tamaños de pantalla o necesita simplificar un diseño móvil recargado. Para conocer el comportamiento relacionado del editor de temas, consulte la documentación de Shopify sobre la personalización de secciones
Consulte Ajustes de visibilidad para conocer el comportamiento compartido de estos controles.
Notas de uso
Sección titulada «Notas de uso»- Use un texto de acción claro. Elija etiquetas que indiquen a los clientes exactamente qué ocurrirá a continuación, como Comprar ahora, Más información o Reservar una cita.
- Adapte la prominencia a la prioridad. Reserve los estilos más destacados o más grandes para la acción principal y utilice estilos más discretos para los enlaces secundarios.
- Haga que los iconos sean de apoyo. Añada iconos para reforzar el significado, pero evite depender solo de ellos salvo que el contexto haga la acción inequívoca.
- Optimice para toques en móviles. Active la visualización a ancho completo cuando el botón necesite más presencia o sea más fácil pulsarlo en pantallas pequeñas.
- Revise los valores de reserva del estilo. Deje sin definir los colores y las anulaciones visuales cuando quiera que el botón herede el estilo de reserva del área circundante; añada un estilo explícito solo cuando el botón deba destacar de su contenedor.
- Revise los estados ocultos. Si oculta el bloque en escritorio o móvil, asegúrese de que la misma acción siga disponible en algún otro lugar de ese dispositivo.