CSS personalizado

Para los estilos que van más allá del editor visual, Sami Product Labels incluye un editor de CSS integrado. También puedes controlar las capas de las insignias con z-index, agregar información sobre herramientas al pasar el cursor y definir el texto alternativo de las insignias de imagen.

Cómo agregar CSS personalizado

1. Abre el editor de insignias

   En Sami Product Labels, ve a Badges & Labels. Selecciona Create badge o selecciona el icono Edit badge/label de la columna Actions en una insignia existente.

2. Ve a la pestaña Design

   Selecciona Design en el editor de insignias. Esta pestaña está seleccionada por defecto al abrir el editor.

3. Desplázate hasta Advanced Settings

   Expande Advanced settings cerca de la parte inferior de la pestaña Design.

4. Activa «Custom css»

   En Advanced, activa Custom css.

5. Inserta un selector y agrega tu CSS

   El editor de CSS aparece con tres opciones en CSS reference:

   • .samita_productLabel-content da estilo a toda la insignia.
   • .samita_productLabel-content-text da estilo a las insignias de texto.
   • .samita_productLabel-content img da estilo a las insignias de imagen.

   Selecciona la opción que necesites. La aplicación inserta en el editor un selector limitado al ID de la insignia actual, como .__content--94129. Conserva esa parte específica de la insignia en el selector y agrega solo las declaraciones que necesites dentro de las llaves.

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   Selecciona una clase en CSS reference para insertar en el editor de Custom CSS un selector limitado a la insignia.

6. Previsualiza y guarda

   Comprueba la vista previa en vivo mientras editas. Cuando el resultado sea el esperado, selecciona Save y verifica la insignia en la página de colección o de producto correspondiente de tu tienda online.

Precaución

El CSS personalizado se guarda con esta insignia, pero sus selectores siguen determinando qué elementos de la tienda online puede afectar. Conserva el selector limitado a la insignia que genera la aplicación. Un selector amplio como .samita_productLabel-content por sí solo también puede coincidir con otras insignias.

Control de z-index

Corrige una insignia que queda oculta detrás de una superposición de la imagen del producto, un encabezado fijo u otra insignia.

1. En Advanced settings, activa Z-index.
2. Introduce un valor de 1 a 100. Los valores más altos colocan la insignia por delante de los elementos con valores de z-index más bajos.

Define un valor de z-index para controlar las capas de la insignia.

Nota

El z-index también se ve afectado por el contexto de apilamiento que crea tu tema. Si subir el valor de la insignia no la trae al frente, puede que un contenedor superior del tema necesite su propio ajuste de CSS.

Información sobre herramientas al pasar el cursor

Agrega una información sobre herramientas que aparece cuando la clientela pasa el cursor sobre tu insignia; es útil para explicar qué significa «New Arrival» o «Limited Edition» sin sobrecargar la imagen del producto.

1. En Advanced settings, activa Show tooltip on hover.
2. Introduce el texto de la información que debe aparecer al pasar el cursor.

Agrega el texto de la información que se muestra cuando se pasa el cursor sobre la insignia.

No pongas información esencial solo en la información sobre herramientas. Es posible que las personas que usan pantallas táctiles o navegan con el teclado no activen el estado de cursor encima.

Texto alternativo SEO para insignias de imagen

Define el texto alternativo para que los lectores de pantalla puedan describir el significado de una insignia de imagen. Un texto alternativo descriptivo también puede favorecer el SEO de las imágenes.

1. En Advanced settings, activa Seo alt text.
2. Introduce una descripción concisa del mensaje que transmite la insignia, como «20% off sale badge» o «Free shipping label». Evita el exceso de palabras clave y frases como «imagen de».

Define el texto alternativo para la accesibilidad y el SEO.

Siguientes pasos

• Cambiar el estilo de la insignia: personaliza tu insignia con los controles del editor visual.
• Cambiar la posición de la insignia: coloca tu insignia en el lugar adecuado de la página.

Consejo

¿Necesitas ayuda?

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