Cambiar la posición de la insignia

Usa la sección Position para colocar una insignia de texto o de imagen sobre la imagen del producto, debajo de un elemento de la página de producto o junto a un elemento personalizado del tema.

Abre la sección Position

1. Abre Badges & Labels

   En el panel de administración de Shopify, abre Sami Product Labels > Badges & Labels.

2. Crea o selecciona una insignia

   Para crear una insignia, haz clic en Create badge y elige Text badge o Image badge.

   Para actualizar una insignia existente, haz clic en Edit badge/label en la fila de esa insignia.

3. Expande Position

   En el editor de insignias, permanece en la pestaña Design, desplázate hasta Position y expande la sección.

   

   Abre la pestaña Design y expande Position.

Coloca la insignia dentro de la imagen del producto

Selecciona Inside product image cuando la insignia deba superponerse a la imagen del producto.

Elige dónde se aplica el ajuste

Usa Badge placement para elegir uno de estos modos:

• Use the same position for collection page and product page: una misma posición se aplica a ambos tipos de página.
• Set different position for collection page and product page: usa las pestañas Listing pages y Product page para configurar cada posición por separado.

Nota

El editor actual llama Listing pages, y no Collection page, a la primera pestaña por página.

Aplica una misma posición dentro de la imagen en todas partes o configura Listing pages y Product page por separado.

Elige una posición predefinida

En Badge position, selecciona uno de los nueve puntos de la cuadrícula de posiciones.

Posición	Ubicación en la imagen
Top left	Esquina superior izquierda
Top center	Centro del borde superior
Top right	Esquina superior derecha
Center left	Centro del borde izquierdo
Center	Centro de la imagen
Center right	Centro del borde derecho
Bottom left	Esquina inferior izquierda
Bottom center	Centro del borde inferior
Bottom right	Esquina inferior derecha

Selecciona una de las nueve posiciones predefinidas dentro de la imagen del producto.

Define una posición personalizada por porcentaje

Activa Use Custom Position cuando las nueve posiciones predefinidas no sean lo bastante precisas. El editor sustituye la cuadrícula por:

• Un anclaje vertical: Top o Bottom.
• Un anclaje horizontal: Left o Right.
• Un control deslizante de porcentaje para el desplazamiento desde cada anclaje seleccionado.

Usa los botones de cambio de posición para alternar los anclajes y ajusta después los controles deslizantes mientras compruebas la vista previa.

Elige los anclajes vertical y horizontal y define sus desplazamientos en porcentaje.

Coloca la insignia fuera de la imagen del producto

Selecciona Outside product image cuando la insignia deba aparecer junto a la información del producto en lugar de superponerse a la imagen.

Abre Predefined position y elige una de estas opciones:

Opción	Ubicación en la página de producto
Below the product image	Justo debajo de la imagen del producto
Below the product title	Justo debajo del título del producto
Below the product price	Justo debajo del precio del producto
Below the product quantity	Justo debajo del control de cantidad
Below the add to cart button	Justo debajo del botón de agregar al carrito
Below the buy now button	Justo debajo del botón de comprar ahora
Custom	Junto a un elemento identificado por un ID o una clase de tu tema

En Badge position, elige la alineación de la insignia a la izquierda, al centro o a la derecha.

Elige un elemento de la página de producto y alinea la insignia a la izquierda, al centro o a la derecha.

Coloca la insignia con un selector del tema

Elige Custom en Predefined position para apuntar a un elemento de tu tema. Introduce el ID o la clase correspondiente en cada campo que necesites:

Campo	Tipo de página
Position in product page	Páginas de producto
Position in home page	Página de inicio
Position in collection page	Páginas de colección
Position in other page	Otros tipos de página

Por ejemplo, introduce .product-form para una clase o #ProductInfo para un ID. Agrega un valor para cada tipo de página en el que la insignia necesite esta ubicación personalizada.

Precaución

Los ID y las clases del tema varían. Inspecciona el tema de tu tienda online para encontrar un selector estable y verifica el resultado en cada tipo de página donde deba aparecer la insignia.

Introduce el ID o la clase del tema para cada tipo de página que necesite una posición de insignia personalizada.

Ajusta el margen y el relleno

Expande Margin para cambiar el espacio exterior en píxeles. El editor muestra los lados relevantes para la posición seleccionada.

Expande Padding para cambiar el espacio entre el contenido de la insignia y sus bordes. Puedes definir los valores superior, inferior, izquierdo y derecho de forma independiente.

Afina la insignia con valores de margen y relleno en píxeles.

Previsualiza y guarda

Usa los controles de vista previa para comprobar Collection page y Product page y alterna después entre Desktop view y Mobile view. Cuando la insignia aparezca en la ubicación prevista, haz clic en Save.

Siguientes pasos

• Cambiar el tamaño de la insignia: cambia el tamaño de la insignia para distintas ventanas gráficas y tipos de página.
• Cambiar el estilo de la insignia: personaliza las fuentes, los colores, los bordes y los fondos.
• Mostrar por dispositivo y página: controla qué dispositivos y páginas muestran la insignia.

Consejo

¿Necesitas ayuda?

Si tienes alguna dificultad al seguir estos pasos, escríbenos a [email protected].