Buscando selectores CSS del escaparate de Ecwid

Cuando quiera realizar cambios en su escaparate que no se puedan lograr con los ajustes de diseño incorporados de Ecwid, puede utilizar códigos CSS. Puede elegir entre los códigos CSS de Ecwid o crear sus propios códigos desde cero.

Para crear un código, debe buscar el selector adecuado para el elemento (texto, botón, imagen, etc.) que desea cambiar. Puede hacerlo con las herramientas de desarrollo incorporadas del navegador. Cuando obtenga el selector, cree un código y péguelo en el tema de diseño de su tienda. Cuando actualice la página del escaparate, verá reflejados los cambios.

Vea el siguiente vídeo para aprender el funcionamiento del CSS en general:

Crear códigos CSS requerirá un conocimiento avanzado de CSS. Los expertos de Ecwid pueden ayudarle con esta tarea y diseñar un tema para su tienda.

Para buscar un selector CSS para el elemento Escaparate:

Abra la página de la tienda donde ve el elemento que quiere cambiar.
Haga clic con el botón derecho en el elemento que desea cambiar y elija > Inspeccionar:

Verá el inspector de Chrome abierto en la página. Se resaltará el elemento que está buscando.

A la derecha, copie el selector:

Abra la página de la tienda donde ve el elemento que quiere cambiar.
Haga clic con el botón derecho en el elemento que desea cambiar y elija > Inspeccionar:

Verá el inspector de Firefox abierto en la página. Se resaltará el elemento que está buscando.

A la derecha, copie el selector:

Abra la página de la tienda donde ve el elemento que quiere cambiar.
Haga clic con el botón derecho en el elemento que desea cambiar y elija > Inspeccionar elemento:

Verá el inspector de Safari abierto en la página. Se resaltará el elemento que está buscando.

Para habilitar la inspección de elementos en Safari, vaya a Safari → Preferencias → Avanzado y seleccione "Mostrar menú Desarrollar en la barra de menú".

A la derecha, copie el selector:

Utilice el selector encontrado para crear códigos CSS. A continuación, pegue los códigos listos en el tema CSS activo de la tienda.

Ejemplo

El precio en la página del producto tiene este selector CSS:


.ec-size .ec-store .details-product-price__value

Un código CSS para cambiar el color del precio a rojo será así:


 .ec-size .ec-store .details-product-price__value {
              color: red;
}

Hay muchos recursos en línea donde puede aprender a crear códigos CSS. Por ejemplo, puede visitar este: https://www.w3schools.com/