Formatear secciones en Shopify con HTML y CSS

Detrás de la plataforma de ecommerce Shopify está la idea de ofrecer a las empresas una solución todo en uno lo más fácil de usar posible para la presencia y la venta en línea. Así se da a todos los emprendedores la posibilidad de configurar y operar una tienda en línea funcional sin mucho esfuerzo o conocimientos técnicos previos.

Este enfoque en un manejo simple y fácil de abarcar de un vistazo significa a menudo que las opciones de personalización detalladas no se muestran o solo en parte en el editor de Shopify. Por ejemplo, cuando creas una nueva página para tu tienda, puedes modificarla con código HTML y CSS. Sin embargo, falta esta opción para las secciones con las que puedes diseñar tu página de inicio (con el tema Dawn estas secciones están disponibles ahora incluso para casi todas las páginas de tu tienda).

Te mostramos aquí cómo puedes cambiar esto con unos pocos clics para poder usar también HTML y CSS dentro de las secciones, y diseñar tu página de inicio de forma aún más individual y adecuada para ti, tu empresa y tus productos o servicios.

Atención: En esta guía vas a realizar un cambio en el código de tu tema. Te recomendamos encarecidamente que crees una copia de seguridad de tu tema antes de cualquier cambio en el código. Para ello simplemente duplica tu tema actual y dale a la copia un nombre comprensible (p. ej. nombre del tema + “Backup” + fecha):

¡Duplica tu tema antes de la edición para crear una copia de seguridad!
Las secciones estándar en el editor de Shopify
Tomemos como ejemplo esta sección con el nombre “Image with text overlay” (alemán: “Foto mit überlegtem Text”) en el tema Debut. En el menú de la izquierda puedes seleccionar la imagen, tienes varias opciones de diseño para la sección y un campo de texto en el que puedes escribir el texto que debe aparecer en la imagen. Lamentablemente aquí solo puedes poner el texto en negrita (B) y cursiva (I) o insertar un enlace.

Si quieres usar además más opciones de formato: no te desesperes, porque la solución es muy sencilla, y te mostramos aquí cómo hacerlo!

El texto que introduces a la izquierda en el campo aparece entonces en la imagen.
Averiguar la denominación interna de la sección
Primero tienes que averiguar cómo se denomina la sección correspondiente en el código de Shopify. Si usas el navegador Chrome, puedes ver el código de la página en una consola de desarrollador con un clic derecho en la sección y seleccionando la opción “Inspect”. Si pasas el cursor del ratón sobre líneas de código individuales, se marca el área correspondiente en la página web, como se ve aquí en la imagen:

Izquierda: El elemento examinado de la página web. Derecha: La consola de desarrollador de Google Chrome.
En este caso aparece la palabra “hero” en varios lugares del código para nuestra área de una imagen con texto superpuesto. Si buscas el elemento principal, es decir el contenedor de código que envuelve toda el área, ves en el código “type”:”hero”, el “tipo” de la sección es por tanto “hero”. Con este conocimiento podemos orientarnos ahora en el código de Shopify. (Si usas otro navegador con el que no tienes esta función, también puedes ir directamente al código y hacer clic en los archivos Liquid bajo “Sections” y buscar con Strg+F/Cmd+F la denominación de la sección que quieres editar)

Haz un cambio en el codigo para activar HTML y CSS en el campo de texto
Abre el codigo de tu tema haciendo clic en “Actions” (o “Aktionen”) y selecciona “Edit code” (o “Code bearbeiten”):

Asi llegas al codigo de tu tema.
Busca alli entre los archivos de “Sections” el nombre que encontraste en el codigo, en nuestro ejemplo “hero.liquid”. Haz clic en el archivo y pulsa la combinacion de teclas “Strg + F” (o “Cmd + F” si usas un Mac) para abrir un campo de busqueda. Si quieres asegurarte de que editas el archivo de la seccion correcta, busca simplemente “{% schema %}” sin comillas. Justo debajo encuentras un codigo en el que aparece el nombre de la seccion:

La denominacion en aleman de la seccion a la que pertenece este archivo Liquid la ves aqui en la linea 131: “Foto mit überlegtem Text”
Escribe ahora “richtext” en el campo de busqueda. Aqui ves que bajo “label” aparece el valor “Text”, ese es el titulo que aparece en el editor sobre el campo de texto. Si obtienes un resultado con otro valor para “label”, busca de nuevo hasta que encuentres este punto.

Esta parte la tienes que cambiar para poder usar HTML y CSS en el campo de texto de la seccion “hero”.
Cambia ahora el valor “richtext” a “textarea” y haz clic en “Speichern”.

“richtext” se reemplazo por “textarea”. No olvides guardar!
Listo. Si vuelves al editor y editas la seccion correspondiente, ves en el campo de texto formatos con HTML y CSS y puedes usarlos tu mismo para disenar el texto a tu gusto:

Aqui se uso “style=background-color:red” para poner el texto con fondo rojo.
Una vez mas, resumido brevemente:

Averigua que archivo Liquid pertenece a la seccion que quieres editar
Busca en este archivo el codigo del campo de texto
Cambia en el codigo el tipo del campo de texto de richtext a textarea
Guarda tu cambio en el codigo, ya puedes usar HTML y CSS en el campo de texto correspondiente
En https://www.w3schools.com/html/default.asp encuentras por cierto numerosas guias, recursos y ejemplos sobre el uso de HTML y CSS.

Si aun tienes preguntas sobre este articulo, o necesitas otra ayuda para montar tu tienda online, contactanos y te ayudamos con gusto! 🙂

Happy Clicking & Coding,

tu Zauberlehrling Jonathan McGrinsey