¡ANTES DE COMENZAR!

A pesar de que la flexibilidad para personalizar el diseño de tu sitio depende de la plantilla que poseas, todas tienen las mismas herramientas de edición de texto en páginas de contenido, blogs y descripción de productos.

¡En este tutorial te explicaremos las distintas posibilidades que te entrega el editor de texto para que puedas aprovecharlas al máximo!

 

¡COMENCEMOS!

1. FORMATO DE TEXTO

Esta primera función nos permite jerarquizar nuestro contenido escrito. Existen 8 estilos diferentes que van desde diferentes tamaños a formato de cita. 

Las opciones se desplegarán al hacer click sobre el botón con la letra ‘A’. Selecciona el texto que quieres modificar y puedes ir probando con las distintas alternativas.

¡OJO! Después de guardar, puedes utilizar el icono de ojo que aparece en la parte superior de los campos para ver inmediatamente como se vería en el sitio.

A continuación, se muestra una comparación lado a lado de los distintos formatos que van en el siguiente orden:

• Título (del 1 al 6)
• Párrafo
• Cita

Puedes variar los distintos tamaños para crear sobre títulos, títulos, bajadas, cuerpos de texto, citas, frases destacadas, etc. De esta forma la información no se verá monótona.

2. NEGRITA, ITÁLICA Y SUBRAYADO

Para mayor personalización del texto puedes utilizar las clásicas: negrita, itálica y subrayado para destacar o diferenciar algún contenido. Nuevamente debes seleccionando el texto que buscas modificar y oprimir sobre su respectivo botón.

3. LISTAS

Puedes enlistar contenido en viñetas o numéricamente. Es cosa de seleccionar el botón del estilo que deseas y automáticamente aparecerá la viñeta o numero para comenzar a escribir. Si deseas terminar la lista, oprime en tu teclado ‘enter’ dos veces. 

4. SANGRÍAS

Es posible jugar con los márgenes del contenido al aumentar o disminuir la sangría.

Un ejemplo útil de esta herramienta es para centrar listas. Verás a continuación la diferencia entre centrar todo el contenido con la herramienta de alineación, versus utilizar las sangrías para mover las listas manteniendo el mismo aspecto.

5. ALINEACIÓN

Esta otra herramienta familiar, nos permite jugar con el alineado del texto. Combinar las alineaciones con los formatos de texto enfatizará las jerarquías que buscas establecer.

6. COLOR

Por el otro lado, para acentuar contenido, además de la negrita, itálica y subrayado, puedes utilizar colores.

Primero debes seleccionar el texto que buscas personalizar y luego hacer click sobre el botón ‘A’. Se desplegará un recuadro con dos pestañas: ‘texto’ y ‘fondo’.  La primera te permitirá cambiar el color de las letras, mientras que la segunda pestaña te permite escoger un color para su fondo.

7. ENLACES

A pesar de que en general las plantillas no nos permiten crear botones en páginas que no sean en home, podemos hacer que ciertas palabras estén conectadas a links. 

Notarás que dentro de las herramientas hay un ícono con forma de cadena. Si seleccionas un tramo de texto y luego oprimes este botón, se abrirá un pop up. Debes pegar en la casilla de ‘enlace’ la url de la página en donde se redirigirá cuando se haga click sobre él. Luego a la derecha hay un desplegable el cual te deja escoger si el enlace se abre en la misma pestaña del navegador, o si se abre en una nueva ventana.

¡OJO! Si estas creando enlaces hacia páginas externas desde tu sitio, asegúrate de indicar que abra una nueva ventana. De esta forma no abandonarán tu sitio.

Una vez que oprimas el botón “Insertar enlace”, desaparecerá este pop up y verás en el editor que el texto seleccionado ahora está subrayado. Esto indica que se creo el enlace. Para acentuar el hecho que es clickeable puedes cambiar de color el texto, y será aun más evidente.

8. TABLAS

Las tablas corresponden a la herramienta clave para jugar con diagramación dentro de las páginas con formato estándar. De todas formas, dependerá de la plantilla que poseas el estilo de las líneas de la tabla (color, grosor, etc.)

Al hacer click sobre el botón con una grilla dentro, se desplegará una pestaña que te perimirá por el momento solo ‘Insertar tabla’. Una vez que lo selecciones, aparecerá en el espacio del editor un cuadro punteado, esta corresponde a una casilla de tu tabla.

Ahora, cuando vuelvas a seleccionar el ícono de la herramienta, te permitirá agregarle columnas o filas a esta celda.

En el ejemplo a continuación veras que se hizo una tabla con los servicios enumerados y sus respectivas descripciones a su lado. En este caso, la plantilla posee sus líneas blancas por lo que no se perciben.

 

 

Esta herramienta no solo te permite jugar con la diagramación de textos, si no que también te permite combinar con imágenes. De esta forma podrás distribuir el contenido de textos e imágenes de forma más dinámica. 

¡OJO! En el editor a veces la tabla se vera apretada y deforme. NO TE PREOCUPES, esto ocurre porque el espacio del editor es reducido, pero una vez que se visualice en el sitio se adaptará a un formato mayor. Lo más recomendable es que mientras vayas trabajando, guardes y revises con el ícono del ojo, como se vería realmente en el sitio.

9. IMAGENES

Cargar imágenes en Shopify es bastante simple. Debes hacer click sobre el ícono del paisaje, el cual te abrirá un pop up que muestra las últimas 10 fotografías que se han cargado a Shopify. Puedes cambiar de pestaña a ‘Imágenes de producto’ para ver las últimas 10 de ellas.

En el caso que quieras cargar una imagen nueva puedes arrastrarla desde el escritorio u oprimir el botón “subir archivo”. Una vez que se cargue aparecerá dentro de las primeras 10 opciones.

Al seleccionar la que quieres insertar, aparecerán los recuadros para el texto alternativo y el tamaño. El texto alternativo, conocido como atributo ALT, es un recurso para optimizar las imágenes de tu sitio. Puedes aprender más sobre qué es y para que sirve en nuestra publicación: “¿Cómo agregar el atributo ALT a tus imágenes de Shopify?”.

Bajo él, el campo de ‘tamaño’ corresponde a un desplegable que te permite elegir el formato en que deseas incrustar la imagen. Notarás que junto al nombre del tamaño están las medidas en pixeles. Si deseas utilizarla el tamaño en el que creaste el archivo selecciona ‘original’.

¡OJO! A veces las imágenes se ven GIGANTES en el editor de texto, mientras que en el sitio se verán bien. No te asustes si se incrustan y se ven desproporcionadas, asegúrate de revisar con el ojito en la parte superior realmente como se visualiza.

Si deseas volver a editar el tamaño o texto alternativo de una imagen, solo debes hacer doble click sobre ella. Se volverá a abrir un pop up con campos para reajustes lo anterior. Además, te entregarán más herramientas, permitiendo ajustar alineación y espaciado diferente en alguno de sus lados (medidas en pixeles).

10. VIDEOS

Es posible subir videos directamente a Shopify, pero para asegurarnos que el peso de este no interfiera con su accesibilidad, recomendamos conectar los videos desde YouTube.

Primero debes subir el video a YouTube. Aprovecha de utilizar tu correo corporativo para que todas las plataformas conectadas sean de directa relación a tu marca.

Una vez que tengas el video arriba, dirigente a la visualización de la que buscas agregar a tu sitio. Verás que bajo el nombre del video hay distintas opciones que puedes seleccionar, una de ellas es “compartir”. Al hacer click sobre él, se abrirá un pop up que te entrega opciones para compartir el material. Lamentablemente Shopify no estará como una opción directa por lo que debes escoger ‘Insertar’.

Nuevamente te aparecerá un pop up, pero esta vez junto al video habrá un código HTML para insertar el video. Debes copiar el código y con él nos dirigiremos a Shopify.

Dentro de las herramientas del editor de texto, seleccionaremos la cámara. Este abrirá un pop en donde nos indica insertar un fragmento que suele comenzar con “<iframe…”. Es aquí donde pegaremos el código que copiamos de YouTube y haremos click sobre ‘insertar video’.

11. BORRAR FORMATO

Esta herramienta es simple pero oportuna. Su función es eliminar toda personalización de estilo. Colores, subrayados, negritas, itálicas, alineados y otros desaparecerán. Sólo se mantendrán los formatos de texto.

 

 

Esto será útil no solo si te arrepientes de alguna modificación que hayas hecho, sino que también para cuando copies y pegues texto de otro sitio o programas como Word, etc.

12. HTML

Por último, encontraremos el botón que nos muestra todo el contenido que hemos rellenado, pero en su formato html. Esta herramienta esta dirigida para personas que se manejan en el lenguaje de código y pueden hacer modificaciones personalizadas por esta área.

¡Esas serían todas las herramientas del editor de texto en Shopify!

Como verás, a pesar de tener un formato estándar, al ir combinando las distintas herramientas se pueden generar distintas jerarquías visuales y combinaciones de texto con imágenes. Es cosa de ir probando las distintas herramientas y ser creativo. ¡Te invitamos a explorarlas y compartirnos las soluciones que has encontrado para poder crear diseños únicos!