Cambiar el tamaño de la insignia
Cambia el tamaño de las insignias de texto y de imagen para escritorio, móvil, páginas de producto y páginas de listado.
Usa la sección Size del editor de insignias para cambiar el tamaño de una insignia en todas partes o definir un tamaño distinto para cada dispositivo y tipo de página.
Abre la sección Size
Sección titulada «Abre la sección Size»-
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 cuyo tamaño quieres cambiar y haz clic en Edit badge/label en su fila.
Para cambiar el tamaño de una insignia nueva, haz clic en Create badge y elige Text badge o Image badge.
-
Expande Size
Sección titulada «Expande Size»En el editor de insignias, permanece en la pestaña Design, desplázate hasta Size y expande la sección.
Abre una insignia, permanece en Design y expande Size.
Usa un mismo tamaño en escritorio y móvil
Sección titulada «Usa un mismo tamaño en escritorio y móvil»En Responsive size, deja seleccionada la opción Use same size on desktop and mobile cuando la insignia deba usar un único conjunto de dimensiones en todos los dispositivos y en las vistas previas de página compatibles.
- En una insignia de texto, define Width y Height por separado.
- En una insignia de imagen con Lock aspect ratio activado, usa el control deslizante Size o el campo Width. La altura cambia automáticamente para conservar las proporciones de la imagen.
Usa un único conjunto de dimensiones para escritorio y móvil.
Personaliza cada dispositivo y tipo de página
Sección titulada «Personaliza cada dispositivo y tipo de página»Selecciona Customize desktop and mobile separately cuando la insignia necesite dimensiones distintas en contextos distintos.
- Elige Desktop o Mobile.
- Elige Product page size o Listing pages size.
- Define las dimensiones para esa combinación.
- Repite el proceso para las demás combinaciones de dispositivo y página que necesites.
| Selección | Dónde se aplica el tamaño |
|---|---|
| Desktop > Product page size | Páginas de producto en escritorio |
| Desktop > Listing pages size | Páginas de listado, incluidas las de colección, en escritorio |
| Mobile > Product page size | Páginas de producto en móvil |
| Mobile > Listing pages size | Páginas de listado, incluidas las de colección, en móvil |
Selecciona un dispositivo y un tipo de página y define el tamaño para esa combinación.
Elige una unidad de tamaño
Sección titulada «Elige una unidad de tamaño»Cada dimensión puede usar una de estas unidades:
| Unidad | Úsala cuando |
|---|---|
| px | Necesites una dimensión exacta en píxeles. |
| % | Quieras que la insignia se escale en relación con el área disponible de la imagen del producto. Previsualiza el resultado en cada tipo de página y dispositivo. |
En una insignia de texto, Width y Height tienen sus propios selectores de unidad. No es necesario que usen la misma unidad.
Ajusta el tamaño de una insignia de texto
Sección titulada «Ajusta el tamaño de una insignia de texto»Las insignias de texto ofrecen controles adicionales debajo de Width y Height:
- Auto-fit text to badge desactivado: define Text size como un tamaño de fuente fijo en píxeles.
- Auto-fit text to badge activado: la aplicación ajusta automáticamente el tamaño del texto al fondo de la insignia, y Text size pasa a ser un control de porcentaje.
- Letter spacing: aumenta o reduce el espacio entre caracteres en píxeles.
Activa Auto-fit text to badge para que el texto cambiante se mantenga dentro del fondo de la insignia.
Mantén o cambia las proporciones de una insignia de imagen
Sección titulada «Mantén o cambia las proporciones de una insignia de imagen»En las insignias de imagen, Lock aspect ratio está activado por defecto.
- Mantenlo activado para cambiar el tamaño de la imagen con un único control Size o Width conservando las proporciones originales.
- Desactívalo solo cuando necesites definir Width y Height de forma independiente. Cambiarlos a una proporción distinta puede estirar o aplastar la imagen.
Mantén Lock aspect ratio activado para cambiar el tamaño de una insignia de imagen sin deformarla.
Previsualiza y guarda
Sección titulada «Previsualiza y guarda»Usa la barra de herramientas de vista previa para alternar entre Product page y Collection page y comprueba después 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 la posición de la insignia: coloca tu insignia en el lugar adecuado de las imágenes de producto o de los elementos de la página.
- Cambiar el estilo de la insignia: personaliza las fuentes, los colores, los bordes y los efectos visuales.