Cambiar el estilo de la insignia
Personaliza las fuentes, los colores, los fondos, los bordes, la opacidad y la rotación de las insignias de texto y de imagen.
Usa la pestaña Design para cambiar el aspecto de una insignia. Las insignias de texto ofrecen controles de fuente, color, fondo, borde, opacidad y rotación. Las insignias de imagen ofrecen controles de opacidad y rotación para la ilustración seleccionada.
Abre una insignia en el editor
Sección titulada «Abre una insignia en el editor»-
Abre Badges & Labels
Sección titulada «Abre Badges & Labels»En el panel de administración de Shopify, abre Sami Product Labels > Badges & Labels.
-
Selecciona una insignia
Sección titulada «Selecciona una insignia»Busca la insignia que quieres actualizar y haz clic en Edit badge/label en su fila.
Para dar estilo a una insignia nueva, haz clic en Create badge y elige Text badge o Image badge.
Haz clic en Edit badge/label en la insignia que quieras personalizar.
-
Permanece en la pestaña Design
Sección titulada «Permanece en la pestaña Design»El editor se abre en Design. Las secciones disponibles dependen de si seleccionaste una insignia de texto o una de imagen.
Personaliza una insignia de texto
Sección titulada «Personaliza una insignia de texto»Elige una fuente y el color del texto
Sección titulada «Elige una fuente y el color del texto»Usa los controles situados debajo de Badge text para personalizar el texto:
- Font picker: elige una fuente de la lista integrada.
- Use Custom Font Style: activa esta opción para introducir una familia tipográfica en Font y elige después un estilo o grosor de fuente disponible, como Regular o Bold.
- Text color: abre el selector de color y elige un color que siga siendo legible sobre el fondo de la insignia.
Elige una fuente integrada o activa Use Custom Font Style y define después el color del texto.
El tamaño del texto y el espaciado entre letras se configuran en Size. Consulta Cambiar el tamaño de la insignia para ver esos controles.
Elige un fondo
Sección titulada «Elige un fondo»Expande Style y selecciona un Fill type:
| Fill type | Úsalo para |
|---|---|
| Solid | Un único color de fondo o un color predefinido. |
| Shape | Una forma de plantilla con un tratamiento de color sólido o en degradado. |
| Image | Una textura, un patrón o una ilustración usados como fondo de la insignia de texto. |
Expande Style y selecciona el tipo de fondo de la insignia de texto.
Usa un fondo sólido
Sección titulada «Usa un fondo sólido»Selecciona Solid y elige un Background color. También puedes seleccionar uno de los ajustes predefinidos en Choose template.
Usa una forma o un fondo en degradado
Sección titulada «Usa una forma o un fondo en degradado»Selecciona Shape y configura lo siguiente:
- Choose from library: abre la galería de plantillas y filtra los diseños por categorías como Sales, Autotext, Stock, Free shipping, Pre-order y más.
- Start color y End color: usa el mismo color para un acabado plano o dos colores distintos para un degradado.
- Gradient direction: elige Left to right, Top to bottom, Diagonal o Radial.
- Choose template: aplica una forma predefinida directamente desde el editor.
Elige una forma, define sus colores y selecciona la dirección del degradado.
Usa una imagen como fondo
Sección titulada «Usa una imagen como fondo»Selecciona Image y haz clic en Select Image para elegir un fondo personalizado. El editor admite archivos PNG, JPG o SVG de hasta 5 MB. Haz clic en Remove para borrar el fondo seleccionado.
Selecciona una ilustración para usarla como fondo de una insignia de texto.
Agrega un borde o redondea las esquinas
Sección titulada «Agrega un borde o redondea las esquinas»Expande Border & corners. Ambas opciones se pueden activar de forma independiente:
| Opción | Controles disponibles |
|---|---|
| Add border | Define Border width de 0 a 8 px, elige un Border color y selecciona Solid, Dotted o Dashed. |
| Round corners | Define Corner radius de 0 a 100 px. |
Agrega un borde, redondea las esquinas o usa ambos ajustes a la vez.
Da estilo a una insignia de imagen
Sección titulada «Da estilo a una insignia de imagen»Las insignias de imagen no muestran los controles de fuente, fondo ni Border & corners de la insignia de texto. Usa Content en la parte superior de la pestaña Design para cambiar la ilustración de la insignia y usa después Advanced settings para ajustar su opacidad o rotación.
Para las dimensiones y la ubicación de la imagen, consulta Cambiar el tamaño de la insignia y Cambiar la posición de la insignia.
Ajusta la opacidad o la rotación
Sección titulada «Ajusta la opacidad o la rotación»Estos efectos están disponibles tanto para las insignias de texto como para las de imagen:
- Expande Advanced settings.
- En Effects, activa la opción que necesites.
- Ajusta el valor mientras compruebas la vista previa en vivo.
| Efecto | Intervalo |
|---|---|
| Adjust opacity | De 0 % a 100 % |
| Rotate badge | De 0° a 360° |
Activa Adjust opacity o Rotate badge y define el valor del efecto.
Previsualiza y guarda
Sección titulada «Previsualiza y guarda»Usa la barra de herramientas de vista previa para comprobar la insignia en Collection page y Product page y alterna después entre Desktop view y Mobile view. Cuando la insignia se vea bien en todas las vistas previas necesarias, haz clic en Save.
Siguientes pasos
Sección titulada «Siguientes pasos»- Cambiar el tamaño de la insignia: cambia el tamaño de la insignia y ajusta el tamaño del texto o el espaciado entre letras.
- Cambiar la posición de la insignia: mueve la insignia y ajusta su margen o relleno.
- Agregar una animación a una insignia: aplica un efecto de animación y configura su velocidad y número de repeticiones.
- Usar CSS personalizado: afina la insignia con CSS personalizado.