Trucos CSS más prácticos para tienda. Si ha decidido diseñar su tienda de acuerdo con sus ideas, CSS se convertirá rápidamente en su mejor amigo. Gracias a muchas consultas en el blog, el foro y el servicio al cliente, pudimos identificar las preguntas más importantes sobre el estilo de su tienda. Ahora puede encontrar las respuestas en esta publicación.

Antes de comenzar: tenga en cuenta que todos los elementos de estilo de su tienda existen por una buena razón y siguen los estándares del comercio electrónico. Cualquier cambio también puede tener un impacto en la forma en que los clientes serios o confiables perciben su tienda. Además, estos trucos de CSS deben considerarse como último recurso, ya que las clases de CSS pueden cambiar sin previo aviso y los trucos ya no funcionarán. Eso es todo con el prefacio, ¡comencemos!

¿Qué es CSS en realidad?

En pocas palabras, el HTML determina qué elementos deben aparecer en su tienda y el CSS (Hoja de estilo en cascada) lo hace todo bonito. En un archivo creado especialmente, se especifican colores, formas, tamaños y mucho más de todos los elementos mencionados en el HTML. Debido a que este artículo trata sobre el estilo, es decir, la apariencia de su tienda, nos ocuparemos de CSS. Eso parece complicado al principio, pero no se preocupe, puede realizar rápidamente algunos cambios interesantes en el diseño de su tienda incluso sin una gran comprensión de CSS. Te mostraremos cómo hacerlo.

¿Cómo obtengo el CSS de mi tienda?

Te facilitamos la edición del CSS de tu tienda. En la configuración de su tienda, vaya a la configuración avanzada y haga clic en “HTML y CSS”. En “Editar CSS de la tienda” puede agregar tantos ejemplos como desee. Puede usar espacios y saltos de línea para mayor claridad, pero el código también funciona sin ellos. Importante: ¡no omitas ningún punto, hashtags o paréntesis!

Ejemplos de hacks de CSS

¿Cómo cambio la fuente en mi tienda?

  • body {font-family: American Typewriter! important;}
  • Aquí con el ejemplo “Máquina de escribir americana”

¿Cómo puedo ocultar la selección de colores en la lista de productos?

  • .sprd-apariencia-list-listpage {display: none! important;}

¿Cómo puedo excluir ciertos colores de la selección de colores en la lista de productos?

  • .sprd-apariencia-list__appearance-194 {display: none! important;}
  • El número al final representa el color que debe desaparecer. Puede encontrar el ID de color seleccionando el color en la página de la lista y luego colocando el cursor sobre el producto. Mire el enlace que su navegador desea visitar (generalmente en la esquina inferior izquierda de la ventana) y anote el número al final de la URL.

¿Cómo oculto todos los colores en la página de detalles?

  • .sprd-detail-info__appearances {display: none! important;}

¿Cómo oculto ciertos colores en la página de detalles?

  • # sprd-apperance-list__appearance-194 {display: none;}
  • Cambie el número como se describe arriba.

¿Cómo oculto las migas de pan en la lista y las páginas de detalles?

  • .sprd-breadcrumb {display: none! important;}

¿Cómo oculto ciertas categorías (como hombres, mujeres, niños y bebés, accesorios, etc.)?

  • Hombres :
    • # sprd-department-filter__department-D1 {display: none;}
  • Mujeres :
    • # sprd-department-filter__department-D3 {display: none;}
  • Niños y bebés :
    • # sprd-department-filter__department-D4 {display: none;}
  • Accesorios :
    • # sprd-department-filter__department-D5 {display: none;}
  • Cajas del teléfono celular :
    • # sprd-department-filter__department-D19 {display: none;}
  • Murales :
    • # sprd-department-filter__department-D22 {display: none;}

¿Cómo oculto ciertos grupos de productos (como camisetas, ropa de trabajo, ropa deportiva, etc.)?

  • # subFilter-D5-P47 {display: none;}
  • Cambie el número al final (aquí 47) con el número que aparece al final de la URL cuando pasa el cursor sobre el grupo correspondiente en el filtro de la izquierda en la página de la lista.
  • Este ejemplo oculta “Bolsas y mochilas” (ID 47).

Si has dominado estos pequeños trucos, podrás diseñar rápidamente tu tienda de forma individual y adaptarla perfectamente a tu marca. ¡Diviértete con eso!

¿Le ayudaron estos consejos? ¿Cómo embelleces tu tienda con la ayuda de CSS? Esperamos su comentario debajo de esta publicación.