Administrar una tienda en Shopify no requiere muchos conocimientos técnicos. De hecho, no necesitas saber nada de código para lanzar y operar una, lo cual es una gran noticia para la gran mayoría de nosotros, que no tenemos ninguna habilidad de programación.
Pero ¿qué pasa si quieres editar el CSS de Shopify para cambiar algo pequeño, como las dimensiones de un banner o el color de un elemento? ¿De verdad necesitas ser un genio de Shopify para hacer estos cambios?
Esta guía explica cómo editar los archivos de tu tema de Shopify para que puedas hacer pequeños ajustes en cosas como el estilo del texto y los colores de los elementos, y así sacarle el máximo provecho a tu sitio de Shopify sin depender siempre de un desarrollador.
Cómo abrir y editar los archivos de tu tema de Shopify
Para abrir y editar un archivo de tema de Shopify, sigue estas sencillas instrucciones paso a paso:
- Inicia sesión en tu panel de administración de Shopify: abre un navegador web y ve a la URL de tu tienda de Shopify (por ejemplo, yourstorename.myshopify.com/admin). Ingresa tus credenciales (correo electrónico y contraseña) y haz clic en "Log In".
- Ve a la sección "Online Store": una vez que inicies sesión, estarás en el panel de administración de Shopify. En la barra lateral izquierda, haz clic en "Online Store". Se abrirá un menú desplegable con opciones adicionales.
- Entra a la sección "Themes": dentro de "Online Store", haz clic en "Themes". Llegarás a la página "Themes", donde puedes administrar los temas de tu tienda.
- Elige el tema que quieres editar: en la página "Themes" verás tu tema activo actual. Para editarlo, haz clic en el botón "Actions" (representado por tres puntos) junto al tema y selecciona "Edit Code" en el menú desplegable.
- Familiarízate con los archivos del tema: en el editor del tema verás una lista de archivos a la izquierda. Estos archivos representan distintas secciones y componentes de tu tema de Shopify. El archivo principal que probablemente editarás es "theme.liquid", que controla la estructura y la distribución general de tu tienda.
- Edita el archivo del tema: busca y haz clic en el archivo que quieres editar (por ejemplo, "theme.liquid"). El contenido del archivo aparecerá en el lado derecho del editor. Aquí puedes modificar el código, por ejemplo agregando HTML, CSS o JavaScript.
- Guarda tus cambios: después de hacer las ediciones necesarias, haz clic en el botón "Save" en la esquina superior derecha del editor. Esto guardará tus cambios en el archivo del tema.
- Previsualiza y prueba tus cambios: para ver cómo se ven tus modificaciones en tu tienda en vivo, haz clic en el botón "Preview". Se abrirá una nueva ventana o pestaña que muestra tu tienda con los cambios aplicados. Asegúrate de que todo se vea como esperabas y funcione correctamente.
- Publica tus cambios: si estás satisfecho con los cambios y quieres que aparezcan en tu tienda, haz clic en el botón "Publish". Esto actualizará el tema activo con tus modificaciones.
Recuerda tener cuidado al editar los archivos del tema y guardar una copia de seguridad de los archivos originales por si necesitas revertir algún cambio.
Lo importante aquí es que siempre debes tener claro qué quieres ajustar antes de entrar a editar el tema. En un entorno en vivo, no conviene experimentar ni agregar código solo para probar.
Entonces, ¿qué puedes hacer exactamente con este conocimiento? Ahora que sabes cómo entrar al código del tema, te explicaré cómo editar el CSS de Shopify para dar a ciertos elementos el estilo que quieras.
Algo tan simple como el diseño de los botones sí influye en el comportamiento de los usuarios en tu sitio web. Tal vez es momento de dejar la fuente estándar y los colores aburridos y optar por algo un poco más llamativo. Cómo dar estilo a los botones de Shopify con CSS
Para convertir un botón "Add to Cart" simple en un botón redondeado con un degradado de azul a morado y un efecto de transparencia al pasar el cursor, estos sencillos cambios de CSS harán el trabajo:
Identifica la clase o el ID del botón "Add to Cart": inspecciona el código HTML del botón con las herramientas de desarrollador de tu navegador. Busca el atributo de clase o ID que identifica al botón. Por ejemplo, supongamos que la clase es "add-to-cart-button".
Define los estilos CSS del botón:
.add-to-cart-button {
border-radius: 25px;
background: linear-gradient(to right, blue, purple);
transition: background 0.3s ease-in-out;
}
.add-to-cart-button:hover {
opacity: 0.8;
}
Aplica los estilos CSS al botón "Add to Cart": en el archivo "theme.liquid" de tu tema o en cualquier archivo CSS relevante, agrega el código CSS anterior apuntando a la clase o el ID de tu botón. Por ejemplo:<button class=“add-to-cart-button“>Add to Cart</button>
Guarda los cambios y previsualiza: guarda el archivo CSS modificado y actualiza la página de tu tienda. Ahora deberías ver el botón "Add to Cart" con forma redondeada, un degradado de azul a morado y un efecto de transparencia al pasar el cursor.
Siéntete libre de ajustar propiedades CSS como el radio del borde, los colores y la duración de la transición para que coincidan con el estilo de tu marca.
Cómo cambiar el tamaño del banner de la página de inicio de Shopify con CSS
Los banners de la página de inicio son uno de los espacios más importantes de toda tu tienda de eCommerce. Poder ajustarlos a tus necesidades es una parte importante de hacer que tu tienda en línea sea lo más responsiva posible para tus visitantes.
Esta es una guía sencilla para cambiar el tamaño de tu banner con CSS:
Abre el CSS de tu tema como antes y busca el selector CSS que apunta al banner de la página de inicio. Este selector varía según el tema específico que uses. Algunos selectores comunes son .banner, .hero o .homepage-banner.
Una vez que encuentres el selector, agrega el siguiente código CSS para cambiar el tamaño del banner como quieras:
.banner {
width: desired-width;
height: desired-height;
}
Reemplaza desired-width y desired-height con las dimensiones específicas que quieres para tu banner. Puedes usar valores en píxeles (px), porcentajes (%) o cualquier otra unidad CSS válida.
Guarda los cambios en el archivo.
Regresa a tu panel de administración de Shopify y previsualiza tu sitio para ver el nuevo tamaño del banner. Si se ve como esperabas, publica los cambios.
Cómo cambiar la fuente de la navegación en Shopify
Supongamos que quieres cambiar la fuente de tu navegación principal sin cambiar cómo se ve la fuente en el resto de tu sitio. Tal vez quieres que coincida con la fuente de tu logo, pero prefieres no cambiar la fuente en otras partes del sitio ni en otras áreas de navegación.
Dentro del archivo, busca el selector CSS que apunta al menú de navegación. Este selector varía según el tema específico que uses. Algunos selectores comunes son .site-nav, .main-navigation o .nav-menu.
Una vez que encuentres el selector, agrega el siguiente código CSS para cambiar la fuente.
.navigation-selector {
font-family: desired-font, sans-serif;
}
Reemplaza .navigation-selector con el selector CSS real que encontraste en el paso anterior. Reemplaza desired-font con el nombre de la fuente que quieres usar.
Puedes usar fuentes seguras para la web o incluir fuentes personalizadas con la regla @font-face. La parte sans-serif es una fuente de respaldo que se usará si la fuente deseada no está disponible.
Guarda los cambios en el archivo y revisa que se vea como quieres.
¿Quieres un rediseño completo o funciones adicionales?
Una vez que le agarras la onda a encontrar qué selectores CSS corresponden a qué elementos de tus páginas de Shopify, es bastante fácil hacer pequeños ajustes en el CSS para darle al sitio el estilo que te gusta.
Es un gran enfoque si te sientes cómodo trabajando en los archivos del tema y quieres hacer cambios pequeños, pero ¿qué pasa si buscas un rediseño más grande o funciones que no son nativas?
Cuando se trata de hacer cambios importantes en tu tienda de Shopify, probablemente necesitarás la ayuda de un desarrollador web de Shopify con experiencia.
La programación personalizada para desarrollar una página con un aspecto único o una función especial es un proceso profundo que no se resuelve solo con ajustes de CSS.
También debes asegurarte de que cualquier función que agregues refleje el diseño de tu sitio de Shopify. Si uno se implementa sin el otro, toda la experiencia se verá poco pulida y puede que no se vea ni funcione como tus clientes esperan.
¿Vale la pena hacer cambios estéticos y funcionales en tu tienda de Shopify?
Es una pregunta con la que muchos comerciantes batallan, pero una buena señal de que tu tienda necesita ayuda de diseño o desarrollo es una tasa de rebote alta. Si llega tráfico a tu sitio pero no convierte por una u otra razón, también es una señal.
Puede haber varias razones para esto. Tal vez tu tienda de Shopify no está lo suficientemente adaptada a móviles, lo que podría requerir una renovación con diseño responsivo. Quizás no le habla con fuerza a tu público objetivo y necesita cambios estrictamente desde el punto de vista del diseño. Eso requeriría una actualización de marca.
De cualquier forma, estos son proyectos mucho más intensivos que solo cambiar algo de CSS, así que si quieres hacer un cambio importante en tu sitio de Shopify, tal vez te convenga contactarnos primero para que podamos guiarte hacia la mejor opción.