Usar el editor de texto enriquecido

Puedes usar el editor de texto enriquecido de Shopify para dar formato y estilo al texto que aparece en tu 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 tu tienda:

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 inserció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 inserción para los medios que deseas incrustar:

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

  3. Copia el código de inserció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 inserción pulsando ctrl + V en una PC o command + V en una Mac:

  6. Haz clic en Guardar en la página que estás editando para guardar los cambios.

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 Formatting (Formato):

Opciones de formato

  • Párrafo

    La mayoría del contenido de texto de tu sitio web es texto de párrafo. El texto de párrafo generalmente tiene un tamaño de fuente de 10 a 12 puntos, pero algunos temas usan otros tamaños de fuente.

  • Título (1 a 6)

    Los títulos se usan para estructurar el contenido. Hay seis niveles de títulos. El título 1 es el nivel más importante y el título 6 es el menos importante.

  • Cita

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

Texto en negrita

Para poner el texto en negrita, resalta el texto y haz clic en el botón Bold (Negrita):

Texto en cursiva

Para poner el texto en cursiva, resalta el texto y haz clic en el botón Italic (Cursiva):

Crea una lista con viñetas

Para crear una lista con viñetas, haz clic en el botón Bulleted list (Lista con viñetas):

Puedes escribir para crear elementos de lista con viñetas:

Para crear nuevos elementos de la lista, pulsa la tecla enter o return. Para terminar la lista, pulsa la tecla enter o return dos veces.

Crea una lista numerada

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

Puedes escribir para crear elementos de lista numerada:

Para crear nuevos elementos de la lista, pulsa la tecla enter o return. Para terminar la lista, pulsa la tecla enter o return dos veces.

Agrega sangría

Para agregar una sangría a un párrafo, haz clic en el botón Indent (Agregar sangría):

La sangría de un párrafo es un margen en su lado izquierdo.

Elimina la sangría de un texto

Para quitar la sangría de un párrafo, haz clic en el botón Outdent (Quitar sangría):

Quitar la sangría de un párrafo elimina los márgenes con 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 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 Background color… (Color de fondo...):

  3. Haz clic en un color 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 Clear formatting (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 Insert table (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 de la tabla:

  • 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 mensajes de correo electrónico 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 http:// seguido de la dirección web, por ejemplo: http://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 mensaje de 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.

  1. Introduce una breve descripción del enlace en el cuadro de texto Título del enlace.

  2. 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.

  1. 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 tu 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 deben 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. Copia la URL del archivo que deseas vincular.

  2. 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.

  3. En el editor de texto enriquecido, introduce o elige el texto del enlace. Por ejemplo, puedes agregar un enlace a un gráfico de tamaño PDF desde el texto del enlace, Click here to download our sizing chart.

  4. Selecciona el texto del enlace.

  5. Haz clic en Insert link (Insertar enlace):

  6. En el campo Link to (Enlace a), pega la URL del archivo que deseas vincular.

  1. 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:

  • carga imagen
  • Elegir entre las imágenes de tus productos
  • Usar una URL de imagen pública

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 archivo:

  4. Elige un archivo de imagen JPG o PNG de tu computadora.

  5. Haz clic en la imagen que has cargado para seleccionarla:

  6. En el menú Size to insert (Tamaño para insertar), 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:

    Si no ves la imagen del producto que deseas insertar, puedes usar los botones de flecha para buscar en diferentes páginas:

  4. En el menú Size to insert (Tamaño para insertar), 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. Haz tus cambios:

- 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.

  1. 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 cambiar la imagen, ingresa una nueva URL de imagen. - 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).

  1. 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.

  2. Ingresa a Embed Responsively. Esta herramienta te proporcionará un código de inserción mejorado para tu video.

  3. En Embed Responsively (Incrustar responsivamente), haz clic para seleccionar el sitio web del video donde se encuentra tu video.

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

  5. Haz clic en Embed (Incrustar). Incrustar responsivamente creará el código de inserción por ti.

  6. Si el video es de YouTube y deseas mostrar solo videos relacionados del mismo canal de YouTube, busca la URL del video en el código de inserción. Copia y pega ?rel=0 al final dentro de las comillas:

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

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

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

  10. Haz clic en Insertar video.

  11. 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>

    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.

  6. Haz clic en Guardar.

  7. 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.

Eliminar etiquetas de comentario

Dónde usar el editor de texto enriquecido

Actualmente, puedes usar el editor de texto enriquecido en la app de Shopify para agregar descripciones a tus productos. Si deseas agregar texto a páginas, blogs o colecciones, debes hacerlo desde tu panel de control de Shopify en un navegador web.

Formatea texto con el editor de texto enriquecido

Puedes usar el editor de texto enriquecido para dar formato a tu texto de varias maneras:

  • Texto en negrita
  • Texto en cursiva
  • Subrayar texto
  • Alinea el texto
  • Crear listas

Texto en negrita

Para poner el texto en negrita, resalta el texto y luego toca el botón de negrita:

Texto en cursiva

Para poner el texto en cursiva, resalta el texto y luego toca el botón de cursiva:

Subrayar texto

Para subrayar el texto, resalta el texto y luego pulsa el botón de subrayado:

Alinea el texto

Pasos

  1. Desde el editor de texto, resalta el texto que deseas alinear.
  2. Pulsa el botón de alineación:
  3. Pulsa una de las opciones de alineación para seleccionar la alineación izquierda, la alineación central o la alineación derecha.

Crear listas

Puedes usar el editor de texto para agregar listas numeradas y con viñetas a tu texto.

Pasos

  1. Desde el editor de texto, pulsa el botón de lista para mostrar las dos opciones de lista:

  2. Pulsa la lista con viñetas o la opción de lista numerada para seleccionar el tipo de lista que deseas agregar.

  3. Introduce los elementos de la lista. Al lado de cada elemento, pulsa return (introducir) para pasar a la siguiente línea e introducir otro artículo.

  4. Cuando hayas terminado de introducir tu lista, pulsa introducir dos veces.

Inserta enlaces con el editor de texto enriquecido

Puedes usar el editor de texto para agregar enlaces al texto:

  1. Desde el editor de texto, selecciona las palabras que desees convertir en un enlace.

  2. Pulsa el botón de enlace:

  3. Desde la pantalla Insertar enlace, introduce la URL del enlace.

  4. Introduce un título de enlace, que se utiliza para la accesibilidad y SEO.

  5. De manera predeterminada, el destino del enlace se abrirá en la misma ventana. Para configurar el enlace para que se abra en otra ventana, habilita la opción Open link in a new window (Abrir enlace en una nueva ventana).

  6. Pulsa Guardar.

Crea enlaces internos y externos

Los enlaces a las páginas en tu 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 deben comenzar con http://.

Dónde usar el editor de texto enriquecido

Actualmente, puedes usar el editor de texto enriquecido en la app de Shopify para agregar descripciones a tus productos. Si deseas agregar texto a páginas, blogs o colecciones, debes hacerlo desde tu panel de control de Shopify en un navegador web.

Formatea texto con el editor de texto enriquecido

Puedes usar el editor de texto enriquecido para dar formato a tu texto de varias maneras:

  • Texto en negrita
  • Texto en cursiva
  • Subrayar texto
  • Alinea el texto
  • Crear listas

Texto en negrita

Para poner el texto en negrita, resalta el texto y luego toca el botón de negrita:

Texto en cursiva

Para poner el texto en cursiva, resalta el texto y luego toca el botón de cursiva:

Subrayar texto

Para subrayar el texto, resalta el texto y luego pulsa el botón de subrayado:

Alinea el texto

Pasos

  1. Desde el editor de texto, resalta el texto que deseas alinear.
  2. Pulsa el botón de alineación:
  3. Pulsa una de las opciones de alineación para seleccionar la alineación izquierda, la alineación central o la alineación derecha.

Crear listas

Puedes usar el editor de texto para agregar listas numeradas y con viñetas a tu texto.

Pasos

  1. Desde el editor de texto, pulsa el botón de lista para mostrar las dos opciones de lista:

  2. Pulsa la lista con viñetas o la opción de lista numerada para seleccionar el tipo de lista que deseas agregar.

  3. Introduce los elementos de la lista. Al lado de cada elemento, pulsa return (introducir) para pasar a la siguiente línea e introducir otro artículo.

  4. Cuando hayas terminado de introducir tu lista, pulsa introducir dos veces.

Inserta enlaces con el editor de texto enriquecido

Puedes usar el editor de texto para agregar enlaces (hipervínculos) al texto:

  1. Desde el editor de texto, selecciona las palabras que desees convertir en un enlace.

  2. Pulsa el botón de enlace:

  3. Desde la pantalla Insertar enlace, introduce la URL del enlace.

  4. Introduce un título de enlace, que se utiliza para la accesibilidad y SEO.

  5. De manera predeterminada, el destino del enlace se abrirá en la misma ventana. Para configurar el enlace para que se abra en otra ventana, habilita la opción Open link in a new window (Abrir enlace en una nueva ventana).

  6. Pulsa la marca de verificación para guardar tu enlace.

Crea enlaces internos y externos

Los enlaces a las páginas en tu 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 deben comenzar con http://.

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis