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.