Tarjeta de regalo

Enlaces destacados

1. documentación de Shopify sobre el editor de temas
2. documentación de Shopify sobre secciones y bloques
3. documentación de Company XYZ sobre ajustes de fondo de sección
4. documentación de Company XYZ sobre ajustes de espaciado de sección
5. documentación de Company XYZ sobre ajustes de separadores
6. documentación de Company XYZ sobre ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: personalización de tu tienda

Vídeo de Shopify Academy: personalización de tu tienda

Esta sección controla la página principal de la tarjeta de regalo que los destinatarios usan para ver y canjear su tarjeta de regalo. Puede personalizar el mensaje, sustituir la ilustración por una de marca y ajustar el diseño para que la página se vea clara, pulida y coherente con el resto de su tienda. Para obtener una visión general más amplia de cómo funcionan estos controles en el editor, consulte documentación de Shopify sobre el editor de temas

Ajustes básicos

Use el encabezado y el subencabezado para introducir la tarjeta de regalo y dar a los destinatarios una indicación breve y útil sobre lo que pueden hacer a continuación. Si deja estos campos en blanco, la sección puede recurrir al contenido predeterminado del tema, lo que resulta útil cuando desea una configuración más sencilla.

El ajuste de la imagen le permite reemplazar la ilustración de tarjeta de regalo integrada por su propio recurso visual de marca. Esto funciona mejor cuando la imagen complementa la página sin competir con los detalles de la tarjeta de regalo.

Los ajustes del estilo de imagen y la relación de aspecto controlan cómo se enmarca la ilustración. Use la proporción predeterminada cuando su imagen ya esté diseñada para el espacio, o elija una proporción fija cuando desee una presentación más uniforme entre distintas imágenes.

En móvil hay una opción propia de relación de aspecto. Si el recorte de escritorio se ve demasiado ancho o demasiado alto en pantallas pequeñas, ajuste la proporción para móvil en lugar de reemplazar la imagen.

Los ajustes del diseño de escritorio determinan cómo comparten el espacio la imagen y los detalles de la tarjeta de regalo. El ancho de columna cambia qué lado destaca más, y la posición de la galería controla si la imagen aparece a la izquierda o a la derecha; en móvil, el diseño siempre se apila en una sola columna. Para más contexto sobre el comportamiento de secciones y bloques, consulte documentación de Shopify sobre secciones y bloques

Revise la ilustración personalizada tanto en escritorio como en móvil antes de publicar. Un recorte que se ve equilibrado en escritorio puede ocultar partes importantes de la imagen en pantallas pequeñas.

Ajustes de color

Este grupo le permite reemplazar los colores predeterminados del texto y el subencabezado para esta sección. Resulta especialmente útil cuando añade un fondo personalizado y necesita más contraste o una jerarquía visual más clara.

Priorice la legibilidad. Si usa una imagen más clara, un degradado o un fondo de video, asegúrese de que tanto el mensaje principal como el texto de apoyo sigan siendo fáciles de leer de un vistazo.

Ajustes estándar de sección

Ajustes de fondo de sección

Ajustes de fondo de sección controlan el lienzo visual detrás del contenido de la tarjeta de regalo. Puede usar un color, un degradado, una imagen o un video, y luego añadir una superposición para ayudar a que el texto y los detalles de la tarjeta de regalo destaquen.

Esta página suele funcionar mejor con fondos discretos. Si elige contenido multimedia decorativo, ajuste juntos la intensidad de la superposición y los colores del texto para que la página siga priorizando la funcionalidad.

Ajustes de espaciado

Ajustes de espaciado controlan el espacio por encima y por debajo del contenido. Úselos para que la página se vea más compacta y centrada en la utilidad, o más amplia cuando quiera una presentación de marca más suave.

Un espaciado menor puede ayudar a que los detalles clave aparezcan antes, especialmente en móvil. Un espaciado mayor funciona mejor cuando la sección usa un tratamiento de fondo más intenso y necesita más margen visual.

Ajustes de separador

Ajustes de separador añaden una línea opcional encima o debajo de la sección. Esto puede ayudar a definir el área de la tarjeta de regalo con más claridad cuando la página incluye otro contenido alrededor.

Mantenga los separadores discretos aquí. Por lo general, un divisor ligero basta para separar visualmente la página sin distraer de la propia tarjeta de regalo.

Ajustes de ancho

Ajustes de ancho controlan el ancho máximo del contenido y el ancho del contenedor de la sección. Estos ajustes son útiles cuando desea que la página se vea más estrecha y fácil de leer, o más ancha cuando la combina con un fondo más inmersivo.

Para la mayoría de las tiendas, un ancho de contenido moderado mantiene la experiencia centrada. Si usa un fondo de sección más amplio, previsualice la página en vivo para asegurarse de que el diseño siga viéndose equilibrado y fácil de leer.

Nota

Los cambios de ancho pueden verse distintos en el editor que en la página en vivo, especialmente cuando hay fondos implicados.

Consejos de uso

1. Mantenga el texto breve. Use un encabezado y un subencabezado cortos que confirmen qué está viendo el destinatario y qué debe hacer a continuación.
   1. Use campos en blanco cuando quiera que el estilo predeterminado y el contenido de respaldo asuman una parte mayor de la página.
   2. Mantenga el mensaje fácil de leer tanto en el estado emitido como en el canjeado.
2. Elija una ilustración que se recorte bien. Los recursos visuales sencillos de marca suelen funcionar mejor que los gráficos detallados, que pueden perder impacto en pantallas pequeñas.
   1. Revise por separado escritorio y móvil, ya que los recortes y el diseño pueden variar entre vistas.
   2. Trate la ilustración separada para móvil como una forma de preservar la legibilidad, no solo de redimensionar la misma imagen.
3. Priorice el contraste. Cuando use colores o fondos personalizados, asegúrese de que el contenido de la tarjeta de regalo siga siendo fácil de leer de inmediato.
   1. Los colores locales más intensos, los degradados o el contenido multimedia pueden hacer que la sección se sienta más independiente del estilo circundante.
   2. Si mantiene el estilo predeterminado o en blanco, se mostrará más la presentación de respaldo del tema.
4. Use el diseño de escritorio con intención. Asigne la columna más grande al lado que deba tener más peso visual, sabiendo que la página se apilará en móvil.
   1. Vuelva a comprobar la alineación y la visibilidad en pantallas pequeñas, ya que el diseño móvil puede cambiar la forma en que se lee la página.
   2. Ajuste el diseño cuando el equilibrio se vea bien en escritorio, pero resulte ajustado en móvil.
5. Previsualice la página completa. Revise el espaciado, el ancho y las opciones de fondo en la tienda online en vivo antes de finalizar el diseño.
   1. Preste especial atención a cualquier mensaje de formulario o de canje para que los estados enviados, vacíos y de error sigan siendo fáciles de leer de un vistazo.
   2. Confirme que la página final siga viéndose clara cuando el contenido, los controles y la ilustración aparezcan juntos.