Cómo personalizar páginas específicas con CSS
Puede cambiar el diseño de páginas individuales en su tienda de Ecwid, ya sea una determinada página de detalles del producto, una página de pasos del pago o una página de cuenta de cliente. Si utiliza clases CSS, es posible crear reglas CSS que solo se aplican a determinadas páginas de su escaparate de Ecwid.
Basado en la página
Página de detalles de producto
Una página de detalles de producto típica tiene un nombre de producto, una imagen y un panel derecho, que consiste en el precio del producto, la referencia, el botón Añadir a la bolsa, etc:
Aplicar diseño a todas las páginas de detalles de producto
Si desea aplicar estilos a todas las páginas de detalles de producto de su tienda de Ecwid, entonces necesita utilizar la siguiente clase en su CSS:
.ec-store__product-page
Aplicar diseño a algunas páginas de detalles de producto
Si desea ocultar los precios en una página de detalles de producto específica, necesitará utilizar el siguiente código en su tema CSS:
.ec-store__product-page--123456 .product-details__product-price {
display: none;
}
Donde «123456» es el único identificador interno del producto. ¿Cómo obtener el identificador del producto? (en inglés)
Si quiere aplicar estilos a varias páginas de detalles de producto, pero no a todas, puede usar el siguiente código:
.ec-store__product-page--123456 .product-details__product-price,
.ec-store__product-page--121221 .product-details__product-price,
.ec-store__product-page--123234 .product-details__product-price {
display: none;
}
Donde «123456», «121221», «123234» son los identificadores de producto internos únicos del producto. Como resultado, ocultará las referencias en tres páginas de detalles de producto.
Aplicar diseño a todas las páginas de detalles de producto en una categoría
Para aplicar cambios de estilo masivos a las páginas de detalles de producto de todos los productos pertenecientes a una determinada categoría, puede utilizar esta clase CSS:
.ec-store__product-page--c12345
donde debe indicar el identificador de categoría (en inglés) necesario en lugar de 12345.
Por ejemplo, desea ocultar temporalmente los botones Añadir a la bolsa en las páginas de detalles de producto asignadas a la categoría con identificador 12345. Este es un ejemplo de código CSS que puede usar para lograrlo:
.ec-store__product-page--c12345 .details-product-purchase__controls {
display: none;
}
Página de categoría
Una página de categoría típica muestra todos los productos de esa categoría en la vista de cuadrícula:
Los cambios de CSS en las páginas de categoría funcionan de forma similar a las páginas de detalles de producto.
Aplicar diseño a todas las páginas de categoría
Si desea aplicar estilos a todas las páginas de detalles de categoría de su tienda de Ecwid, entonces necesita utilizar la siguiente clase en su CSS:
.ec-store__category-page
Por ejemplo, si desea cambiar el color de su precio en las páginas de categoría a azul oscuro, entonces necesitará usar este código en tu tema CSS:
.ec-store__category-page .grid-product .grid-product__price-amount {
color: darkblue;
}
Aplicar diseño a algunas páginas de categoría
Si desea cambiar el color de su precio en una página de categoría específica, necesitará usar el siguiente código en su tema CSS:
.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: darkblue;
}
Donde «4002» es el identificador de categoría interno único de la categoría. ¿Cómo obtener el identificador de la categoría? (en inglés) Si quiere aplicar estilos a varias páginas de categoría, pero no a todas, puede usar el siguiente código:
.ec-store__category-page--4002 .grid-product .grid-product__price-amount,
.ec-store__category-page--4006 .grid-product .grid-product__price-amount,
.ec-store__category-page--4008 .grid-product .grid-product__price-amount {
color: darkblue;
}
Donde «4002», «4006», «4008» son los identificadores internos únicos de la categoría. Como resultado, cambiará el color del precio al azul oscuro en tres páginas de categorías.
Otras páginas
También puede aplicar un diseño personalizado a otras páginas:
- páginas de cesta de la compra & caja
- páginas de ajustes de cuenta
Páginas de cesta de la compra & caja
Para aplicar el diseño a la página de cesta de la compra y caja, utilice las siguientes clases de CSS:
.ec-size .ec-store .ec-cart
Gracias por su página de pedido
Para aplicar el diseño a la página de Gracias solamente, utilice las siguientes clases de CSS:
.ec-size .ec-store .ec-confirmation
Páginas de perfil del cliente
Para aplicar el diseño a las páginas de perfil del cliente (disponibles para sus clientes después de que inicien sesión en su tienda), utilice las siguientes clases de CSS:
Página de ajustes de cuenta:
.ecwid-productBrowser-AccountSettingsPage
Página de pedidos
.ecwid-productBrowser-OrdersPage
Basado en el cliente
En algunos casos, puede que desee ocultar precios o referencias para clientes que aún no han creado una cuenta en su tienda, o tal vez destacar algunos de sus artículos para clientes que pertenecen a un grupo de clientes específico. Afortunadamente, esto es totalmente posible usando CSS. Vamos a mostrarle cómo:
Sesión no iniciada o no tiene una cuenta
Cuando un cliente visita su tienda por primera vez, no tiene una cuenta en su tienda y está buscando un producto que necesita. Puede que desee aplicar un diseño personalizado para este tipo de clientes. Para ello, necesitará usar la siguiente clase en su tema CSS:
body.ecwid-customer-loggedOut
Por ejemplo, si desea convertir su tienda de Ecwid en un catálogo en línea para los clientes que visitan su tienda por primera vez o aún no han iniciado sesión en la cuenta de su tienda, puede hacerlo fácilmente añadiendo el siguiente código a su tema CSS:
/* Hide prices and add to bag buttons for logged out customers */
body.ecwid-customer-loggedOut .grid-product__price,
body.ecwid-customer-loggedOut .grid-product__button,
body.ecwid-customer-loggedOut .product-details__product-price,
body.ecwid-customer-loggedOut .details-product-purchase__controls {
display: none;
}
Sesión iniciada
Es posible que desee aplicar un diseño personalizado a los clientes que han iniciado sesión en la cuenta de su tienda y que estén navegando por su catálogo en línea. Para ello, necesitará usar la siguiente clase en su tema CSS:
body.ecwid-customer-loggedIn
Digamos que quiere mostrar los precios para este tipo de clientes en verde; en este caso, necesitará aplicar este código a su tema CSS:
body.ecwid-customer-loggedIn div.grid-product__price .grid-product__price-amount {
color: green;
}
También puede bloquear el acceso a su escaparate a menos que un visitante inicie sesión en su cuenta. Más información
Pertenece a un grupo de clientes
Cuando un cliente se registra en su tienda de Ecwid, se le asigna a un grupo de clientes predeterminado con identificador '0'. Si desea aplicar un diseño personalizado a todos los clientes que están asignados a ese grupo de clientes, entonces necesitará utilizar la siguiente clase:
body.ecwid-customer-group-0
Sin embargo, si tiene varios grupos de clientes en su tienda y tiene una gran base de clientes con descuentos asignados a un grupo de clientes específico, tal vez desee destacar las ventajas de su suscripción en su tienda utilizando el diseño personalizado para este tipo de clientes utilizando el siguiente código:
body.ecwid-customer-group-12345
Donde «12345» es el identificador del grupo de clientes único. Puede obtenerlo iniciando sesión en la cuenta que pertenece a ese grupo de clientes y viendo cualquier página en la herramienta «Inspeccionar elemento» de su navegador. Para cambiar el color del precio a verde en las páginas de categoría para todos los clientes de un grupo de clientes específico, utilice el siguiente código:
body.ecwid-customer-group-12345 div.grid-product__price .grid-product__price-amount {
color: green;
}
Acabamos de mostrarte un pequeño ejemplo de lo que puede lograr con temas CSS personalizados y varios tipos de páginas y clientes, así que ahora siga adelante y pruébelo por su cuenta.
Consulte nuestra guía sobre cómo cambiar el diseño de Ecwid.