Descripción general
Esta guía explica cómo aplicar CSS personalizado directamente a los Bloques de aplicaciones (App blocks) de Growave dentro del Editor de temas de Shopify. Esto permite realizar cambios de diseño avanzados, como modificar bordes, sombras o espaciados específicos, que van más allá de las opciones estándar disponibles en el panel de administración de Growave.
📘 Nota
Ya puedes personalizar el aspecto de las Recompensas (Rewards), Reseñas (Reviews) y la Lista de deseos (Wishlist) directamente en el administrador de Growave. La sección de Branding te permite cambiar colores, fuentes, íconos y estilos de botones sin necesidad de código. Recomendamos usar CSS personalizado solo si necesitas un cambio de diseño que no esté disponible en estos ajustes estándar.
Beneficios clave
Control detallado: ajusta elementos específicos como el espaciado interno (padding), las sombras o el radio de los bordes (border radius) para que coincidan perfectamente con tu tema.
Sin editar el código del tema: aplica cambios de forma segura dentro del editor sin tener que modificar los archivos Liquid de tu tema.
Vista previa instantánea: visualiza los cambios de CSS aplicados de forma inmediata en la vista previa del Editor de temas de Shopify.
Cómo aplicar CSS personalizado
Paso 1: Busca el nombre de la clase del widget
Para aplicar estilos, primero debes identificar la clase CSS específica del widget que deseas modificar.
Abre en un navegador web la página de tu tienda donde el widget sea visible.
Haz clic derecho en el widget (por ejemplo, en el fondo del control deslizante de reseñas).
Selecciona Inspeccionar (Inspect) o Inspeccionar elemento (Inspect Element) en el menú del navegador.
En el panel de código que aparece, busca la línea que comience con
<div class=".....Copia el nombre de la clase. Por lo general, comienza con un prefijo
gw-(por ejemplo,gw-rv-product-mini-slider-widget).
✅ Consejo útil
Pasa el cursor sobre diferentes líneas en el inspector de código para resaltar distintas partes de la página. Esto ayuda a asegurarte de haber seleccionado el contenedor principal del widget.
Paso 2: Agrega el CSS personalizado en Shopify
Una vez que tengas el nombre de la clase, puedes agregar tus estilos en Shopify.
En tu panel de administración de Shopify, ve a Tienda en línea (Online Store) > Temas (Themes).
Haz clic en Editar tema (Edit Theme) junto a tu tema actual.
Navega a la página donde se encuentra el widget de Growave (por ejemplo, la página del producto).
En la barra lateral izquierda, haz clic en el Bloque de aplicación (App block) de Growave (por ejemplo, "Reviews Mini Slider") para abrir su configuración.
Ubica el cuadro de texto de CSS personalizado (Custom CSS).
Ingresa tus reglas de CSS aquí. No envuelvas tu código en etiquetas
<style>o<script>.
Ejemplo: Estilo de tarjeta moderna
A continuación, se muestra un fragmento de código de ejemplo para darle al minicontrol deslizante de reseñas un estilo de tarjeta moderno y limpio, con un fondo blanco y una sombra suave. Clase utilizada: .gw-rv-product-mini-slider-widget:
.gw-rv-product-mini-slider-widget {
background-color: #ffffff !important;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
padding: 16px !important;
color: #333333 !important;
}Para asegurarte de que tus estilos tengan prioridad, agrega !important después de cada valor de propiedad, como se muestra en el ejemplo anterior.
Widgets compatibles
Actualmente, puedes agregar CSS personalizado a través del Editor de temas de Shopify para los siguientes widgets:
Recompensas (Rewards): Widget de ganar puntos (Earn points), Widget de información de lealtad (Loyalty info), widgets de la página de Recompensas dedicada.
Lista de deseos (Wishlist): Botón de agregar a la lista de deseos.
Si tienes alguna pregunta o necesitas ayuda, escríbenos a [email protected] o usa el ícono de chat en la esquina inferior derecha de tu panel de administración de Growave.