Esta guía ofrece una visión completa de cómo personalizar la apariencia de los elementos de personalización dentro de las páginas de tu tienda de Shopify. Veremos los selectores CSS y las mejores prácticas para ayudarte a ofrecer a tus clientes una experiencia de compra a medida y atractiva.
Cómo entender la estructura de CSS en Shopify
Cada componente de personalización en tu página de Shopify está organizado dentro de un framework específico de CSS. Esta estructura permite aplicar estilos de forma precisa y mantiene la coherencia del diseño en todos tus elementos personalizados. Veamos los componentes clave:
Contenedor principal
El contenedor principal actúa como envoltorio de todos los componentes de personalización. Usa la siguiente clase para aplicar estilos globales a toda tu sección de personalización:
.g-selector-container: Esta clase representa el contenedor principal.
Tipos de personalización
Diferentes tipos de personalización, como texto, imágenes o variantes, se distinguen mediante clases adicionales. Esto te permite aplicar estilos específicos según el tipo de contenido:
.g-selector-variants: Para la personalización basada en variantes del producto como la talla o el color..g-selector-text: Para personalizaciones basadas en texto..g-selector-image: Para personalizaciones con imágenes, como imágenes subidas por el usuario..g-selector-collection: Para mostrar una colección de opciones, como muestras de color o patrones..g-selector-condition: Para la lógica de personalización condicional, donde las opciones aparecen según selecciones previas del usuario.
Etiqueta para el nombre del elemento
Cada tipo de personalización incluye un elemento secundario para la etiqueta o el título. Puedes personalizar esta etiqueta con el siguiente selector:
.g-selector-label: Usa este selector para dar estilo al texto que describe las opciones de personalización, por ejemplo, "Elige tu talla" o "Selecciona un color".
Personalizar botones y estados en Shopify
Los botones son elementos clave en la personalización y suelen usarse para seleccionar variantes o condiciones. Así puedes personalizar su apariencia:
Contenedores de botones y botones
.g-selector-buttons: Esta clase representa el contenedor que agrupa todos los botones de una opción específica..g-selector-button: Esta clase se aplica a cada botón individual dentro del contenedor.
Estados del botón
Puedes dar estilo a los distintos estados de los botones para ofrecer retroalimentación visual a los usuarios:
.g-selector-button-active: Esta clase se aplica cuando el usuario tiene seleccionado un botón..g-selector-button-disabled: Esta clase se aplica cuando un botón no está disponible o no se puede hacer clic en él.
Cómo dar estilo a las miniaturas de imagen en Shopify
Para personalizaciones que implican elecciones basadas en imágenes, como muestras de color, puedes usar la siguiente clase:
.g-selector-collection-thumbnail: Esta clase se aplica a cada miniatura de imagen en una colección. Puedes personalizar esta clase para ajustar el tamaño, los bordes y la disposición de estas imágenes.
Ejemplos de personalizaciones CSS en Shopify
A continuación tienes un ejemplo de cómo puedes personalizar la apariencia de los selectores con CSS. Recuerda mantener la coherencia con tu marca y garantizar que el diseño sea adaptable en diferentes dispositivos.
/* Estilo general del contenedor */.g-selector-container { padding: 20px; border: 1px solid #e0e0e0; background-color: #f9f9f9; } /* Estilo para las etiquetas */.g-selector-label { font-size: 14px; color: #333; margin-bottom: 8px; } /* Botones */.g-selector-button { background-color: #007bff; color: #fff; padding: 10px; border: none; cursor: pointer; } .g-selector-button-active { background-color: #28a745; } .g-selector-button-disabled { background-color: #ccc; cursor: not-allowed; } /* Personalizaciones de miniaturas */.g-selector-collection-thumbnail { width: 100px; height: 100px; border: 2px solid #ddd; margin: 5px; }
Buenas prácticas para la personalización en Shopify
Mantén la coherencia: asegúrate de que tus personalizaciones estén alineadas con la identidad de tu sitio web para ofrecer una experiencia de usuario cohesionada.
Prueba en todos los dispositivos: Prueba la capacidad de respuesta de tus personalizaciones tanto en ordenadores como en dispositivos móviles.
Mejora la accesibilidad: Usa colores de alto contraste para el texto y los botones y asegúrate de definir estados de foco adecuados para todos los elementos interactivos para que tu sitio sea accesible para todas las personas.