Crear un destacado

Un bloque de destacados es una cuadrícula de elementos (cada uno con una imagen, un título y una descripción) que colocas en tus páginas de producto para mostrar ventajas y puntos fuertes. El editor tiene dos pestañas: Design (contenido y estilo) y Placement (dónde y para quién aparece).

1. Abre la pestaña Highlights

   En el panel de administración de Shopify, abre la aplicación Sami Product Labels, haz clic en Extra Features en la barra lateral de la aplicación y cambia a la pestaña Highlights.

   

   La pestaña Highlights muestra todos los bloques de destacados que has creado.

2. Haz clic en Create highlights

   Haz clic en Create highlights. El editor de pantalla completa se abre en la pestaña Design.

   Nota

   Desplázate hasta Featured templates y haz clic en View all templates para empezar con un bloque ya preparado, como Free Delivery, en lugar de crearlo desde cero.

   

   Crea un destacado desde cero o parte de una plantilla destacada.

3. Pon un nombre al destacado

   El campo de nombre está sobre la vista previa. Sustituye New Highlight por un nombre de hasta 50 caracteres. Este nombre es interno: identifica el bloque en tu lista y no se muestra a la clientela.

4. Agrega un encabezado y una descripción

   En Content & Badges, completa Title y Description: son el encabezado y el texto de introducción de todo el bloque, por ejemplo «Why Choose Us». Ambos son editores de texto enriquecido con negrita, cursiva, subrayado, emojis, alineación y una vista HTML (</>), y ambos son específicos de cada idioma, por lo que la etiqueta muestra el idioma activo, por ejemplo Title (en).

   Los dos son opcionales; déjalos vacíos si solo quieres mostrar los elementos.

   

   El encabezado y la descripción del bloque son campos de texto enriquecido que se editan por idioma.

5. Agrega elementos destacados

   En Badges, haz clic en Add highlight y elige una opción:

   Opción	Qué hace
   Select badge image	Abre el selector de imágenes para agregar uno o varios elementos.
   Line break	Inserta un salto para que los elementos siguientes empiecen en una fila nueva.

   En el selector, Library contiene más de 1.800 imágenes. Busca por nombre o acota la lista con los filtros Images, Free Labels, All colors y Latest (Clear los restablece). Haz clic en las imágenes que quieras y luego en Select Image. También puedes cambiar el origen a Design your Images para usar las tuyas, o hacer clic en Edit with AI para modificar la imagen seleccionada.

   

   Filtra o busca en la biblioteca y elige las imágenes de tus elementos destacados.

6. Escribe el título y la descripción de cada elemento

   Cada elemento aparece como una fila en la lista Badges. Haz clic en el icono de engranaje de una fila para abrir su panel, donde puedes definir:

   • Image: haz clic en Change para cambiarla por otra.
   • Title: el encabezado breve de esa característica, por idioma.
   • Description: hasta 250 caracteres, por idioma.

   Usa Delete en el panel para eliminar el elemento y arrastra una fila por su control para reordenar la cuadrícula.

   

   Cada elemento tiene su propia imagen, título y descripción.

7. Define el estilo de la cuadrícula y del bloque

   Abre Design Main Section para controlar el bloque en conjunto:

   Ajuste	Qué hace
   Alignment	Izquierda, centro o derecha.
   Column	Cuántos elementos aparecen por fila.
   Width	El ancho del bloque, en % o px.
   Background Heading Color	Fondo detrás del encabezado y la descripción.
   Background Color	Fondo del área de elementos.
   Margin / Padding	Espaciado exterior e interior del bloque.
   Border & corners	Estilo y color del borde, y radio de las esquinas.

   

   Design Main Section controla la cuadrícula y el contenedor del bloque.

8. Da estilo a los elementos destacados

   Abre Design Badge para dar estilo a los propios elementos:

   Ajuste	Qué hace
   Alignment	Cómo se alinea el contenido de cada elemento.
   Style	Cuatro estilos de imagen: monocromo, monocromo en tarjeta, color original y color original en tarjeta.
   Background Color	Fondo de cada elemento.
   Size	Width y Height de la imagen, en px o % (50 px por defecto).
   Positions	Dónde se coloca la imagen respecto al texto, por ejemplo Image Position Top.
   Margin / Padding / Border & corners	Espaciado y borde de cada elemento.
   Title / Description	Fuente, color, tamaño e interlineado del texto del elemento.

   

   Design Badge da estilo a cada elemento destacado.

9. Da estilo al encabezado del bloque (opcional)

   Abre Design title & description. Design Title y Design Description tienen cada uno su propia fuente, color, tamaño e interlineado para el encabezado y el texto de introducción del bloque.

10. Define tamaños adaptables y CSS personalizado (opcional)

    • Responsive size: sustituye los tamaños en tableta y móvil.
    • Advance Section: agrega Custom CSS (Developer Zone). La lista CSS reference situada debajo del editor muestra los selectores que puedes usar, como .samita_highlight_container; haz clic en uno para insertarlo.

    

    La lista CSS reference muestra los selectores disponibles para el estilo personalizado.

11. Elige dónde aparece el destacado

    Cambia a la pestaña Placement:

    • Product page: actívalo para mostrar el bloque en la posición integrada de la aplicación en todas las páginas de producto.
    • Shortcode: copia el fragmento y pégalo en tu tema para colocar el bloque en una posición exacta.
    • Conditions: las condiciones de Product, Customer, Page, Language y Country acotan quién ve el bloque y dónde.

    Nota

    Consulta Segmentar la visualización de los destacados para saber cómo funcionan los conjuntos de condiciones.

    

    La pestaña Placement reúne las condiciones de visualización, el interruptor de la página de producto y el shortcode.

12. Previsualiza y guarda

    Sobre la vista previa puedes cambiar el idioma, elegir qué página previsualizar, alternar entre escritorio y móvil y ocultar el producto de ejemplo con el icono del ojo. Define el bloque como Active o Draft y haz clic en Save, arriba a la derecha. Usa Discard para descartar los cambios sin guardar.

Nota

El plan FREE incluye 2 destacados, y los que eliminas siguen contando para ese límite. Cambia al plan GOLD o DIAMOND para tener destacados ilimitados.

Siguientes pasos

• Colocar un destacado con un shortcode: coloca el bloque en una ubicación personalizada de tu tema.
• Segmentar la visualización de los destacados: controla qué páginas y qué clientela ven tus destacados.
• Descripción general de los destacados: qué son los destacados y cuándo usarlos.
• Crear una insignia de confianza: agrega iconos de pago y de seguridad a tus páginas de producto.

Consejo

¿Necesitas ayuda?

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