Usar el editor de texto enriquecido para el contenido

Esta página fue impresa el Apr 23, 2024. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/shopify-admin/productivity-tools/rich-text-editor.

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

En esta página

Dónde usar el editor de texto enriquecido

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

Si estás utilizando un tema de Online Store 2.0, puedes agregar secciones de texto enriquecido a tus páginas o plantillas con el editor de temas.

Agrega contenido HTML con el editor de texto enriquecido

Puedes introducir contenido HTML para tus artículos de blog, páginas, descripciones de productos y descripciones de colecciones con el editor de texto enriquecido.

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

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

Inserta 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 de tu panel de control de Shopify.

Pasos:

  1. Busca el código de incrustación para los elementos multimedia que deseas incrustar.

  2. Selecciona el código de incrustación completo haciendo clic y presionando ctrl + A en una PC o command + A en una Mac.

  3. Copia el código de incrustación pulsando ctrl + C en una PC o command + C en una Mac.

  4. En tu panel de control de Shopify, haz clic en el botón Show HTML (Mostrar HTML) en el editor de texto enriquecido para ver el contenido que estás editando.

  5. Pega el código de incrustación pulsando ctrl + V en una PC o command + V en una Mac.

  6. Haz clic en Guardar.

Formatea texto con el editor de texto enriquecido

Con el botón Formatting (Formato), puedes crear rápidamente párrafos, títulos o citas de bloque. Usar el formato y los niveles de título adecuados ayuda a las personas y a los motores de búsqueda a leer el contenido de tu sitio web.

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

Opciones de formato

  • Párrafo

  • Título (1 a 6)

  • Cita

Texto en negrita

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

Texto en cursiva

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

Subrayar texto

Para subrayar el texto, resalta el texto y haz clic en el botón de Subrayar.

Crea una lista con viñetas

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

Puedes escribir para crear el primer artículo de la lista con viñetas. Para crear nuevos artículos de la lista, pulsa la tecla enter o return. Para terminar la lista, pulsa la tecla enter o return dos veces.

Crear una lista numerada

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

Puedes escribir para crear los primeros artículos de la lista numerada. Para crear nuevos artículos de la lista, pulsa la tecla enter o return. Para terminar la lista, pulsa la tecla enter o return dos veces.

Agrega sangría

La sangría de un párrafo es un margen en su lado izquierdo. Para agregar una sangría a un párrafo, haz clic en el botón Agregar sangría.

Elimina la sangría de un texto

Quitar la sangría de un párrafo elimina los márgenes con sangría. Para quitar la sangría de un párrafo, haz clic en el botón Quitar sangría.

Alinea el texto

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

Cambia los colores del texto con el editor de texto enriquecido

Pasos:

  1. Resalta 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 resaltado a ese color.

Cambia colores de fondo del texto

Pasos:

  1. Resalta 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 introduce un código hexadecimal para cambiar el fondo del texto resaltado a ese color.

Borra formato en el editor de texto enriquecido

Para eliminar el formato del texto o las imágenes, resalta el contenido y luego haz clic en el botón Borrar formato.

Inserta tablas con el editor de texto enriquecido

Puedes insertar tablas en artículos de tu blog, páginas, descripciones de productos y descripciones de colecciones con el editor de texto enriquecido. Puedes incluir texto, imágenes e incluso videos en una tabla después de crearlo.

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. Esto crea una tabla con una fila y una columna.

Una vez que hayas creado una tabla, haz clic nuevamente en el botón Insertar tabla para modificar las filas y columnas.

  • Insertar fila arriba: Coloca el cursor en una fila y haz clic en este botón para insertar una nueva fila arriba.
  • 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 una fila que desees eliminar y luego haz clic en este botón.
  • Eliminar columna: Coloca el cursor en una columna que desees eliminar y luego haz clic en este botón.
  • Eliminar tabla: Coloca el cursor en cualquier lugar de la tabla y luego haz clic en este botón para eliminar toda la tabla.

Inserta enlaces con el editor de texto enriquecido

Puedes insertar enlaces (hipervínculos) en artículos de blog, páginas, descripciones de productos y descripciones de colecciones con el editor de texto enriquecido. Puedes agregar enlaces que dirijan a los clientes a las páginas dentro de tu tienda online de Shopify y a otros sitios web. También puedes agregar enlaces que abran correos electrónicos o hagan llamadas telefónicas para ayudar a los clientes a comunicarse contigo.

Pasos:

  1. Resalta el texto o la imagen que desees convertir en un enlace.
  2. Haz clic en Insertar enlace.

  3. Introduce la URL de destino para el enlace en el campo Enlace a:

    • Para vincularlo a un sitio web externo que está fuera de tu tienda Shopify, introduce https:// seguido de la dirección web, por ejemplo: https://www.example.com.
    • Para vincular a una página dentro de tu tienda online de Shopify, introduce la URL corta, por ejemplo: /collections/summer-collection.
    • Para crear un enlace que abra un correo electrónico, introduce mailto: seguido de la dirección de correo electrónico, por ejemplo: mailto:example@example.com.
    • Para crear un enlace que haga una llamada telefónica, introduce tel:, seguido del número de teléfono, por ejemplo: tel:+0-123-456-7890.

  4. Introduce una breve descripción del enlace en el cuadro de texto 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 existente del usuario.
    • Una nueva ventana: El enlace se abrirá en una nueva pestaña o ventana del navegador.

  6. Haz clic en Insertar enlace para convertir el texto que resaltaste en un enlace.

Agrega enlaces internos y externos con el editor de texto enriquecido

Los enlaces a las páginas en la tienda Shopify se denominan enlaces internos. Puedes usar URL cortas para crear enlaces internos. Por ejemplo, la URL /collections dirigirá a las personas a la página de colecciones de tu tienda.

Para establecer un vínculo a una página específica de tu tienda online, como una colección o una página de producto, usa el formato de URL /page-type/page-handle. Por ejemplo, para establecer un vínculo a una colección que has creado, denominada "Colección de verano", usa la URL /collections/summer-collection.

Los enlaces a sitios web que están fuera de tu tienda Shopify se denominan enlaces externos. Los enlaces externos tienen que introducirse enteros y comenzar con http://.

Enlace a un archivo en el contenido de la página

Después de cargar un archivo, puedes vincularlo al contenido en el editor de texto enriquecido para que esté disponible para descargarlo desde un producto o descripción de colección, página web o artículo de blog.

Pasos:

  1. Desde el panel de control de Shopify, ve a Contenido > Archivos.
  2. Copia la URL del archivo que deseas vincular.
  3. En tu panel de control de Shopify, haz clic en el producto, colección, página web o artículo de blog donde deseas agregar el archivo.
  4. En el editor de texto enriquecido, introduce o elige el texto del enlace.
  5. Selecciona el texto del enlace.
  6. Haz clic en Insertar enlace.
  7. En el campo Link to (Enlace a), pega la URL del archivo que deseas vincular.
  8. Haz clic en Insert link (Insertar enlace). En el editor de texto enriquecido, el texto vinculado se muestra en azul y está subrayado.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, toca Archivos.
  3. Copia la URL del archivo que deseas vincular.
  4. En tu panel de control de Shopify, haz clic en el producto, colección, página web o artículo de blog donde deseas agregar el archivo.
  5. En el editor de texto enriquecido, introduce o elige el texto del enlace.
  6. Selecciona el texto del enlace.
  7. Haz clic en Insertar enlace.
  8. En el campo Link to (Enlace a), pega la URL del archivo que deseas vincular.
  9. Haz clic en Insert link (Insertar enlace). En el editor de texto enriquecido, el texto vinculado se muestra en azul y está subrayado.
  1. En la aplicación de Shopify, toca el botón … y, luego, toca Configuración.
  2. En la sección Configuración de la tienda, toca Archivos.
  3. Copia la URL del archivo que deseas vincular.
  4. En tu panel de control de Shopify, haz clic en el producto, colección, página web o artículo de blog donde deseas agregar el archivo.
  5. En el editor de texto enriquecido, introduce o elige el texto del enlace.
  6. Selecciona el texto del enlace.
  7. Haz clic en Insertar enlace.
  8. En el campo Link to (Enlace a), pega la URL del archivo que deseas vincular.
  9. Haz clic en Insert link (Insertar enlace). En el editor de texto enriquecido, el texto vinculado se muestra en azul y está subrayado.

Inserta imágenes con el editor de texto enriquecido

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

Subir imágenes

Pasos:

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

  2. En el cuadro de diálogo Insert image (Insertar imagen), haz clic en la pestaña Uploaded images (Imágenes cargadas).

  3. Haz clic en Cargar archivos.

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

  5. Haz clic en la imagen que has cargado 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 incluir la imagen en el editor de texto enriquecido.

Elige entre las imágenes del producto

Pasos:

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

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

  3. Haz clic en la imagen que deseas insertar.

  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 incluir la imagen del producto en el editor de texto enriquecido.

Usa una URL de imagen

Para insertar una imagen usando una URL pública, haz lo siguiente:

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

  2. En el cuadro de diálogo Insertar imagen, haz clic en la pestaña URL.

  3. Introduce la URL de acceso público de tu archivo de imagen.

  4. Haz clic en Insertar imagen para insertar la imagen en el editor de texto enriquecido en su tamaño original.

Mueve y cambia el tamaño de una imagen en el editor de texto enriquecido

Una vez agregada una imagen a una descripción de producto o colección, página web o blog, puedes moverla hacia otra posición en el contenido.

Pasos:

  1. En tu panel de control de Shopify, haz clic en el producto, colección, página web o artículo del blog que tenga 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 las siguientes 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.

Edita una imagen en el editor de texto enriquecido

Puedes cambiar el tamaño, el ajuste de texto y la alineación de una imagen en el 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 de diálogo 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 tu tienda online, agrega o edita el texto alternativo de la imagen.
    • Para agregar espaciado, introduce la cantidad de píxeles de espacio que deseas a cada lado.
    • Para cambiar la alineación de la imagen, selecciona entre los iconos que representan la alineación a la izquierda, al centro o a la derecha.
    • Para agregar ajuste de texto, activa la casilla Wrap text around image (Ajustar texto alrededor de la imagen).

  3. Haz clic en Edit image (Editar imagen) para guardar los cambios.

Inserta videos con el editor de texto enriquecido

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

Si deseas incrustar un video que has creado, primero debes subirlo a un sitio de transmisión de video como YouTube o Vimeo.

YouTube no te permite desactivar videos relacionados, pero puedes especificar que los videos relacionados deben ser del mismo canal que el video que se acaba de reproducir.

Pasos:

  1. Copia la URL del video pulsando ctrl + C en una PC o command + C en una Mac.
  1. Ingresa a Embed Responsively. Esta herramienta te proporcionará un código de incrustación mejorado para tu video.

  1. En Embed Responsively, haz clic para seleccionar el sitio web donde se encuentra tu video.

  2. Pega la URL del video que copiaste en el cuadro Page URL (URL de la página) de Embed Responsively pulsando ctrl + V en una PC o command + V en una Mac.

  3. Haz clic en Embed (Incrustar). Embed Responsively creará el código de incrustación por ti.

  4. Si es un video de YouTube y quieres mostrar solo videos relacionados a ese canal de YouTube, busca la dirección URL del video en el código de incrustación. Copia y pega ?rel=0 al final dentro de las comillas.

  5. Copia todo el código dentro del cuadro Embed code (Incrustar código).

  6. En el panel de control de Shopify, haz clic en el botón Insertar video en el editor de texto enriquecido.

  7. Paste (Pega) el código de incrustación en el cuadro del cuadro de diálogo Insert video (Insertar video).

  8. Haz clic en Insertar video.

  9. Haz clic en Guardar cuando hayas terminado para guardar los cambios en el artículo que estabas editando.

Inserta 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 tu panel de control de Shopify, haz clic en Configuración y luego en Files (Archivos).
  2. Haz clic en Upload files (Cargar archivos) para cargar el archivo de audio que deseas insertar o incrustar en tu tienda.
  3. Desde la sección Tienda online, abre el editor de texto enriquecido de la página o artículo del blog en la que deseas incluir 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 tu 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 tu 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 por la URL que creaste para tu archivo de audio cuando lo cargaste a Shopify. Puedes encontrar la URL de tu 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 tu archivo de audio se reproduce correctamente.

Agrega o elimina comentarios internos en el editor de texto enriquecido.

Puedes usar las etiquetas de comentarios <!-- y --> para el texto interno que no deseas publicar en tu tienda.

Pasos:

  1. En el editor de texto enriquecido, haz clic en el botón Mostrar HTML:

  2. Para agregar un comentario interno, incluye el texto que deseas mantener oculto en <!-- y -->. Por ejemplo: <!--yourtext-->.

  3. Haz clic en Guardar.

Las etiquetas HTML que se incluyen dentro de las etiquetas de comentarios se guardan como texto interno. Para que esas etiquetas HTML funcionen correctamente, debes eliminar las etiquetas de comentario <!-- y --> alrededor de ellas.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis