Usar el editor de texto enriquecido en el contenido

Puedes usar el editor de texto enriquecido de Shopify para dar formato y estilo al contenido que se muestra en la tienda online.

Dónde usar el editor de texto enriquecido

Puedes usar el editor de texto enriquecido para agregar o editar texto en varios lugares de la tienda:

• Descripciones de producto
• Descripciones de colecciones
• Artículos del blog
• Páginas
• Políticas de la tienda

Si usas un tema compatible, puedes agregar secciones de texto enriquecido a las páginas o a las plantillas con el editor de temas.

Agregar contenido HTML con el editor de texto enriquecido

Puedes ingresar contenido HTML para los artículos del blog, las páginas, las descripciones de producto y las descripciones de colecciones con el editor de texto enriquecido.

Haz clic en el botón para ver el código HTML del contenido dentro del editor de texto enriquecido.

En la vista HTML puedes hacer muchos cambios en el contenido del editor de texto enriquecido. Puedes agregar imágenes, videos o tablas con HTML y depurar o ajustar el diseño y el estilo del contenido.

Incrustar un widget multimedia

Si quieres incrustar un widget de video o música, primero debes alojarlo en un servicio como Youtube, Vimeo o SoundCloud. Estos servicios generan un código de incrustación que puedes copiar y pegar en el editor de texto enriquecido del panel de control de Shopify.

Pasos:

1. Encuentra el código de incrustación del contenido multimedia que quieres incrustar.
2. Selecciona todo el código de incrustación haciendo clic en él y presionando Ctrl + A en una PC o Command + A en una Mac.
3. Copia el código de incrustación presionando Ctrl + C en una PC o Command + C en una Mac.
4. En el panel de control de Shopify, haz clic en el botón Mostrar HTML del editor de texto enriquecido del contenido que estás editando.
5. Pega el código de incrustación presionando Ctrl + V en una PC o Command + V en una Mac.
6. Haz clic en Guardar.

Dar formato al texto con el editor de texto enriquecido

Con el botón Formato puedes crear rápidamente párrafos, encabezados o citas en bloque. Usar el formato y los niveles de encabezado correctos ayuda a las personas y a los motores de búsqueda a leer el contenido del sitio web.

Para elegir un formato para el texto, selecciona el texto y luego haz clic en el botón Formato.

Opciones de formato

• Párrafo

  La mayor parte del contenido del sitio web es texto de párrafo. Por lo general, el texto de párrafo tiene un tamaño de fuente de 10 a 12 pt, pero algunos temas usan tamaños de fuente diferentes.

• Encabezado (1-6)

  Los encabezados se usan para estructurar el contenido. Hay 6 niveles de encabezado. Encabezado 1 es el nivel más importante y Encabezado 6 es el menos importante.

• Cita en bloque

  Una cita en bloque se usa para mostrar texto atribuido a otra persona, como una cita o un extracto de un libro o un sitio web.

Texto en negrita

Para poner el texto en negrita, selecciona el texto y haz clic en el botón Negrita.

Texto en cursiva

Para poner el texto en cursiva, selecciona el texto y haz clic en el botón Cursiva.

Texto subrayado

Para subrayar texto, selecciona el texto y haz clic en el botón Subrayado.

Crear una lista con viñetas

Para crear una lista con viñetas, haz clic en el botón Lista con viñetas.

Escribe para crear el primer elemento de la lista con viñetas. Para crear elementos nuevos, presiona la tecla enter o return. Para finalizar la lista, presiona dos veces la tecla enter o return.

Crea una lista numerada

Para crear una lista numerada, haz clic en el botón Lista numerada.

Escribe para crear el primer elemento de la lista numerada. Para crear elementos nuevos, presiona la tecla enter o return. Para finalizar la lista, presiona dos veces la tecla enter o return.

Aplica sangría al texto

Cuando aplicas sangría a un párrafo, se agrega un margen en el lado izquierdo. Para aplicar sangría a un párrafo, haz clic en el botón Aumentar sangría.

Quita la sangría

Quitar la sangría de un párrafo elimina cualquier margen aplicado. Para quitar la sangría u "outdent" de un párrafo, haz clic en el botón Quitar sangría.

Alinea el texto

Para alinear texto, selecciona el texto, haz clic en el botón Alineación y elige Alinear a la izquierda, Centrar o Alinear a la derecha.

Cambia el color del texto

1. Selecciona el texto y haz clic en el botón Color.
2. Haz clic en un color o ingresa un código hexadecimal para cambiar el texto seleccionado a ese color.

Cambia el color de fondo del texto

1. Selecciona el texto y haz clic en el botón Color.
2. Haz clic en la pestaña Fondo.
3. Haz clic en un color o ingresa un código hexadecimal para cambiar el fondo del texto seleccionado a ese color.

Quita el formato en el editor de texto enriquecido

Para quitar el formato de texto o imágenes, selecciona el contenido y luego haz clic en el botón Quitar formato.

Inserta tablas con el editor de texto enriquecido

Con el editor de texto enriquecido puedes insertar tablas en artículos del blog, páginas, descripciones de producto y descripciones de colección. Después de crearla, puedes colocar texto, imágenes o incluso videos dentro de una tabla.

Pasos:

1. En el editor de texto enriquecido, haz clic en el botón Insertar tabla.
2. Haz clic en Insertar tabla para insertar una tabla. Se crea una tabla con una fila y una columna.

Después de crear una tabla, vuelve a hacer clic en el botón Insertar tabla para modificar las filas y columnas de la tabla:

• Insertar fila encima: coloca el cursor en una fila y haz clic en este botón para insertar una nueva fila encima.
• Insertar fila debajo: coloca el cursor en una fila y haz clic en este botón para insertar una nueva fila debajo.
• Insertar columna antes: coloca el cursor en una columna y haz clic en este botón para insertar una nueva columna antes de esa columna.
• Insertar columna después: coloca el cursor en una columna y haz clic en este botón para insertar una nueva columna después de esa columna.
• Eliminar fila: coloca el cursor en la fila que quieres eliminar y luego haz clic en este botón.
• Eliminar columna: coloca el cursor en la columna que quieres eliminar y luego haz clic en este botón.
• Eliminar tabla: coloca el cursor en cualquier parte de la tabla y luego haz clic en este botón para eliminar toda la tabla.

Inserta enlaces con el editor de texto enriquecido

Con el editor de texto enriquecido puedes insertar enlaces (hipervínculos) en artículos del blog, páginas, descripciones de producto y descripciones de colección. Puedes agregar enlaces que dirijan a los clientes a páginas dentro de la tienda online de Shopify y a otros sitios web. También puedes agregar enlaces que abran correos electrónicos o realicen llamadas telefónicas para que los clientes se pongan en contacto.

Pasos:

1. Selecciona el texto o la imagen que quieres convertir en un enlace.
2. Haz clic en Insertar enlace.
3. Ingresa la URL de destino del enlace en el campo Enlazar a :
   • Para enlazar a un sitio web externo fuera de la tienda Shopify, ingresa https:// seguido de la dirección web, por ejemplo https://www.example.com.
   • Para enlazar a una página dentro de la tienda online de Shopify, ingresa la URL corta, por ejemplo /collections/summer-collection.
   • Para crear un enlace que abra un correo electrónico, ingresa mailto: seguido de la dirección de correo electrónico, por ejemplo mailto:example@example.com.
   • Para crear un enlace que realice una llamada telefónica, ingresa tel: seguido del número de teléfono, por ejemplo tel:+0-123-456-7890.
4. Ingresa una breve descripción del enlace en el campo Título del enlace.
5. Elige cómo se abrirá el enlace en el menú Abrir este enlace en :
   • la misma ventana: el enlace se abrirá en la pestaña o ventana del navegador actual.
   • una ventana nueva: el enlace se abrirá en una pestaña o ventana nueva del navegador.
6. Haz clic en Insertar enlace para convertir el texto seleccionado en un enlace.

Agrega enlaces internos y externos con el editor de texto enriquecido

Los enlaces a páginas dentro de la tienda Shopify se llaman enlaces internos. Puedes usar URL cortas para crear enlaces internos. Por ejemplo, la URL /collections apunta a la página de colecciones de la tienda.

Para enlazar a una página específica de la tienda online, como una página de colección o de producto, usa el formato de URL /page-type/page-handle. Por ejemplo, para enlazar a una colección que creaste llamada Summer Collection, usa la URL /collections/summer-collection.

Los enlaces a sitios web que están fuera de la tienda Shopify se llaman enlaces externos. Los enlaces externos se deben ingresar completos y comienzan con http://.

Enlaza un archivo en el contenido de la página

Después de upload a file, puedes enlazarlo al contenido en el editor de texto enriquecido para que se pueda descargar desde una descripción de producto o de colección, una página web o un artículo del blog.

Pasos:

Insertar imágenes con el editor de texto enriquecido

Hay tres formas de insertar una imagen con el editor de texto enriquecido. Puedes:

• upload images
• choose from your product images
• use a public image URL.

Subir imágenes

Pasos:

1. En el editor de texto enriquecido, haz clic en el botón Insertar imagen.

2. En el cuadro Insertar imagen, haz clic en la pestaña Imágenes subidas.

3. Haz clic en Subir archivo.

4. Elige un archivo de imagen WebP, HEIC, SVG, GIF, JPEG o PNG desde la computadora.

5. Haz clic en la imagen que subiste para seleccionarla.

6. En el menú Tamaño, selecciona el tamaño de visualización de la imagen. Puedes seleccionar Original para insertar la imagen sin alterar su tamaño de visualización.

7. Haz clic en Insertar imagen para colocar la imagen en el editor de texto enriquecido.

Elegir entre imágenes de producto

Pasos:

1. En el editor de texto enriquecido, haz clic en el botón Insertar imagen.

2. En el cuadro Insertar imagen, haz clic en la pestaña Imágenes de producto.

3. Haz clic en la imagen que quieres insertar. Si no encuentras el contenido multimedia del producto que quieres insertar, puedes usar los botones de flecha para navegar por diferentes páginas.

4. En el menú Tamaño, selecciona el tamaño de visualización de la imagen. Puedes seleccionar Original para insertar la imagen sin alterar su tamaño de visualización.

5. Haz clic en Insertar imagen para colocar la imagen del producto en el editor de texto enriquecido.

Usar una URL de imagen

Para insertar una imagen con una URL pública:

1. En el editor de texto enriquecido, haz clic en el botón Insertar imagen.
2. En el cuadro Insertar imagen, haz clic en la pestaña URL.
3. Ingresa la URL pública del archivo de imagen.
4. Haz clic en Insertar imagen para insertar la imagen en el editor de texto enriquecido con su tamaño original.

Mover y cambiar el tamaño de una imagen en el editor de texto enriquecido

Después de agregar una imagen a la descripción de un producto o una colección, una página web o un blog, puedes moverla a otra ubicación dentro del contenido.

Pasos:

1. En el panel de control de Shopify, haz clic en el producto, la colección, la página web o el artículo del blog que incluye la imagen que quieres mover o cambiar de tamaño.
2. En el editor de texto enriquecido, haz clic en la imagen.
3. Realiza cualquiera de estas acciones:
   • Para mover la imagen, haz clic y arrástrala a otra ubicación en el campo Contenido.
   • Para cambiar el tamaño de la imagen, haz clic y arrastra una de las esquinas.
4. Haz clic en Guardar.

Editar una imagen en el editor de texto enriquecido

Puedes cambiar el tamaño, el ajuste del texto y la alineación de una imagen dentro del editor de texto enriquecido. También puedes editar la URL de la imagen o agregar o editar el texto alternativo de la imagen.

Pasos:

1. Haz doble clic en la imagen en el editor de texto enriquecido para abrir el cuadro Editar imagen.
2. Usa las opciones de tamaño y alineación para editar la imagen:
   • Para cambiar el tamaño de la imagen, selecciona una opción de tamaño.
   • Para mejorar el SEO y la accesibilidad de la tienda online, agrega o edita el texto alternativo de la imagen.
   • Para agregar espaciado, ingresa la cantidad de píxeles de espacio que quieres en cada lado.
   • Para cambiar la alineación de la imagen, selecciona entre los íconos que representan alineación a la izquierda, centrada o a la derecha.
   • Para agregar ajuste de texto, marca Ajustar texto alrededor de la imagen.
3. Haz clic en Editar imagen para guardar los cambios.

Insertar videos con el editor de texto enriquecido

Puedes insertar o incrustar videos en artículos del blog, páginas, descripciones de productos y descripciones de colecciones con el editor de texto enriquecido.

Si quieres incrustar un video que creaste, primero debes subirlo a un sitio de streaming de video como YouTube o Vimeo.

YouTube no permite desactivar los videos relacionados, pero puedes especificar que los videos relacionados sean del mismo canal que el video que acaba de reproducirse.

Pasos:

1. Copia la URL del video con ctrl + C en una PC o command + C en una Mac.

2. Visita Embed Responsively. Es una herramienta que genera un código de incrustación mejorado para tu video.

3. En Embed Responsively, haz clic para seleccionar el sitio donde está alojado tu video.
4. Pega la URL del video que copiaste en el cuadro Page URL de Embed Responsively presionando ctrl + V en una PC o command + V en una Mac.
5. Haz clic en Embed. Embed Responsively generará el código de incrustación.
6. Si el video es de YouTube y quieres mostrar solo videos relacionados del mismo canal de YouTube, busca la URL del video en el código de incrustación. Copia y pega ?rel=0 al final, dentro de las comillas.
7. Copia todo el código del cuadro Embed code.
8. En el panel de control de Shopify, haz clic en el botón Insertar video en el editor de texto enriquecido.
9. Pega el código de incrustación en el cuadro del diálogo Insertar video.
10. Haz clic en Insertar video.
11. Haz clic en Guardar cuando termines para guardar los cambios en el contenido que estabas editando.

Insertar archivos de audio con el editor de texto enriquecido

Puedes usar el editor de texto enriquecido para insertar o incrustar archivos de audio en artículos del blog, páginas, descripciones de productos y descripciones de colecciones.

Pasos:

1. Desde el panel de control de Shopify, ve a Contenido > Files.

2. Haz clic en Subir archivos para subir el archivo de audio que quieres insertar o incrustar en la tienda.

3. Desde la sección Tienda online, abre el editor de texto enriquecido de la página o del artículo del blog donde quieres mostrar el archivo de audio.

4. Copia <div id="player"><audio controls="controls"> y luego pega el código en el editor de texto enriquecido para incrustar un reproductor de audio en la página.

5. Copia el siguiente código:

• <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>

6. Pega este código en el editor de texto enriquecido después del código del reproductor de audio y luego reemplaza https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 con la URL que creaste para tu archivo de audio cuando lo subiste a Shopify. Puedes encontrar la URL del archivo de audio en cualquier momento en la página Archivos.
7. Haz clic en Guardar.
8. Haz clic en Ver para asegurarte de que el archivo de audio se reproduzca correctamente.

Agregar o eliminar comentarios internos en el editor de texto enriquecido

Puedes usar las etiquetas de comentario <!-- y --> para el texto interno que no quieres publicar en la tienda.

Pasos:

1. En el editor de texto enriquecido, haz clic en el botón Mostrar HTML.
2. Para agregar un comentario interno, encierra el texto que quieres mantener oculto entre <!-- y -->. Por ejemplo: <!--yourtext-->.
3. Haz clic en Guardar.

Las etiquetas HTML que están dentro de las etiquetas de comentario se guardan como texto interno. Para que esas etiquetas HTML funcionen correctamente, debes quitar las etiquetas de comentario <!-- y --> que las rodean.

Cómo funciona el editor de texto enriquecido

El editor de texto enriquecido está integrado con TinyMCE, una red de distribución de contenido (CDN) externa. Esta integración tiene algunas implicaciones importantes:

• Límite de contenido: hay un límite estricto de 64 KB para el contenido ingresado en el editor de texto enriquecido. Esto aplica a Páginas, Artículos del blog y scripts adicionales.
• Limpieza de HTML: TinyMCE proporciona una lógica de filtrado de contenido que corrige automáticamente el formato HTML para evitar fallas en la tienda online y riesgos de seguridad. Aunque puedes editar el HTML manualmente para restablecerlo a su forma original, se recomienda trabajar con estos cambios automáticos para evitar posibles problemas.

Resolución de problemas del editor de texto enriquecido

Si tienes problemas con el editor de texto enriquecido, revisa los siguientes pasos de resolución de problemas y los problemas más comunes.

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>

mailto:email@example.com