Diseños personalizados en Shopify: lo básico
Decidir crear tu propio diseño personalizado en Shopify requiere valor, sobre todo si no eres programador. El proceso es complicado y puede ser difícil de entender para los principiantes. La buena noticia es que, con esfuerzo y compromiso por aprender, puedes lograrlo. Por supuesto, hay opciones más sencillas, como elegir un tema prediseñado o pedir ayuda a expertos como nosotros para que también se encarguen de la personalización.
Dicho esto, hay entre 50 y 100 temas gratuitos disponibles en la tienda de Shopify. También puedes optar por temas premium prediseñados de Shopify en línea. Investiga y fíjate si alguno se ajusta a tus requisitos. Busca desarrolladores independientes que ofrezcan temas gratuitos o de pago en sus sitios web. Puedes conseguir uno bastante decente por $100-$200.
Lo mejor de elegir este tipo de temas es que tienes una estructura con la cual trabajar. De hecho, entre el 70 y el 80% de la estructura ya está hecha y el 20-30% restante necesita ajustes. Agrega un convertidor de moneda, campos extra, diseños, logos, encabezados, etc., y listo. Incluso puedes recurrir a una agencia digital como la nuestra para que te ayude con el proceso de personalización.
Si decidiste hacerlo por tu cuenta, sigue leyendo para saber cómo crear diseños personalizados en Shopify tú mismo:
Aprende el lenguaje Liquid
Los temas de Shopify funcionan con un lenguaje bastante particular llamado Liquid. La función básica de Liquid es traducir el contenido de una tienda Shopify al lenguaje HTML del navegador, para que sea legible y accesible para el usuario.
Si quieres crear diseños personalizados en Shopify, tendrás que aprender este lenguaje. No es muy difícil, pero tendrás que dedicarle algo de tiempo para dominarlo. Por suerte, Shopify ofrece muchísimos recursos para ayudarte.
Empieza con el video introductorio de abajo:
https://www.youtube.com/watch?v=tZLTExLukSg
Otros recursos que vale la pena revisar:
- Videos tutoriales de diseño de Shopify
- Referencias de Shopify Liquid
- Hoja de referencia rápida de Shopify Liquid
Opciones de personalización del tema
Cada tema incluye un panel de personalización que te permite cambiar varios de sus aspectos. Desde aquí puedes personalizar elementos como los colores, los encabezados, los pies de página y otros elementos propios del tema.
Es bastante sencillo y fue creado pensando en quienes no programan, para darte una forma de hacer algunas personalizaciones básicas. Lamentablemente, la mayoría de las funciones integradas del tema no se pueden personalizar desde aquí, así que puede que no sea suficiente para crear el diseño personalizado en Shopify que quieres.
Crear una hoja de estilo personalizada
Probablemente la forma más fácil y segura de crear diseños personalizados en Shopify es mediante cambios en el CSS o en una hoja de estilo personalizada. Nunca modifiques los archivos .liquid originales del tema. Si lo haces y el tema se actualiza, perderás todos los cambios. ¡Siempre crea un CSS!
Implica algo de prueba y error, así que antes de hacer cualquier ajuste en tu CSS, recuerda hacer copias de seguridad de los archivos actuales de tu tema por si algo sale mal.
Recuerda que solo recurrirás a un CSS si lo que necesitas no es posible desde el panel de personalización del tema. Para crear un CSS, empieza entrando al área de temas de tu panel y selecciona la opción "more". Luego haz clic en el botón Edit HTML/CSS, que te llevará al administrador de archivos del tema.
En el administrador de archivos del tema, necesitas entrar a la carpeta Assets. ¿La ves? Haz clic en ella y debería desplegarse. Ahora, usa el enlace "Add" para agregar un nuevo recurso y elige la opción "Create blank file". Esto debería crear un nuevo CSS. Una vez hecho esto, ponle nombre a tu nuevo CSS. El nombre es importante, así que mantenlo corto y fácil de identificar. Luego selecciona la extensión .css.liquid y agrega el código para empezar a personalizar el CSS.
Integrar el CSS en tu tema
Ya pusiste el código, pero tu diseño personalizado en Shopify todavía no toma forma. Eso es porque aún tienes que integrar tu CSS con tu tema. Para ello, tendrás que buscar la carpeta Layouts en el administrador de archivos del tema. Haz clic en ella y selecciona theme.liquid.
Aquí es donde las cosas se complican. Tendrás que encontrar el código </head> entre todo el código. Puedes hacerlo con la búsqueda predeterminada, es decir, Ctrl + F. Una vez que encuentres el código, necesitas insertar una nueva línea justo encima. Coloca el cursor justo antes del código </head> y presiona Enter para crear una nueva línea. En esa línea escribe el siguiente código:
{{ ‘CSS-NAME.css’ | asset_url | stylesheet_tag }}.
La parte CSS-Name es el nombre que le asignaste antes a tu CSS.
Los temas de Shopify están construidos de manera que tu CSS siempre tendrá prioridad sobre el código original del tema. Así que todos los cambios que hiciste en el CSS empezarán a aparecer en tu tema.
Entender la importancia de la accesibilidad para el usuario
Al final del día, el objetivo de las personalizaciones es mejorar la accesibilidad y la experiencia del usuario. Tus clientes solo quedarán impresionados con tu diseño personalizado en Shopify si les permite hacer lo que quieren de forma eficiente y sin obstáculos.
Así que ponte en su lugar y mira tu tienda con ojo crítico. A veces es difícil ser objetivo con algo que ayudaste a crear, pero necesitas hacerlo. Intenta identificar las áreas que se pueden mejorar. Tu esfuerzo por darle estilo y creatividad a tu tema de Shopify solo te beneficiará de verdad cuando aporte algo tangible y útil para tu cliente.
Revisa constantemente tu tienda para ver cómo afecta a su funcionamiento cada fragmento de código personalizado que incluyes en el CSS. Esto debe ser una prioridad, así que haz el esfuerzo. Si solo sigues editando el CSS y esperas hasta el final para ver cómo los cambios afectaron el funcionamiento de tu tienda, será mucho más difícil identificar y deshacer el código problemático.
Haz pruebas manuales, como la de navegación con teclado, para revisar con regularidad la accesibilidad de tu sitio. La prueba de navegación con teclado es sencilla: consiste en ver cómo funcionan las teclas Tab, barra espaciadora y Enter en tu página. Usa también las flechas para ver qué tan rápido o lento se desplaza la página.
Otras pruebas que puedes probar incluyen la prueba con lector de pantalla y HTML_CodeSniffer, y ambas tienen sus ventajas.
1 Digital Agency se asocia con Shopify para crear diseños personalizados para cada negocio
1 Digital Agency es un partner de diseño de Shopify con reputación por crear diseños personalizados en Shopify de calidad para dueños de negocios de todo tipo de intereses. Nos enfocamos en trabajar contigo para entender lo que necesitas y atender esos requisitos. Nuestro equipo de expertos en Shopify está preparado para asumir cualquier proyecto y cualquier negocio, y ayudarte a alcanzar tus objetivos comerciales en poco tiempo.
Si eres una organización más grande, también tenemos experiencia en Shopify Plus. Con un historial comprobado y un amplio conocimiento de los diseños personalizados en Shopify, puedes estar seguro de que cada proyecto con 1 Digital Agency será un éxito. Llámanos ahora al 888.982.8269 o contáctanos en https://www.1digitalagency.com/contact y pongámonos a trabajar.