Personalizar la plantilla Storefront – Theme oficial de Woocommerce
Storefront es el theme o plantilla oficial de woocommerce. Es verdad que a simple vista puede parecer que es un poco pobre y no tiene mucha «chicha» donde agarrar, pero personalizando bien este tema y utilizando plugins extras puede quedar una tienda muy chula. Y además al ser el tema oficial de woocommerce, esto tiene unas ventajas.
Ventajas:
- El tema está adaptado para tiendas online. Una de las cosas que tienes que tener en cuenta a la hora de elegir una plantilla, un theme para tu tienda online, es que tiene que adaptarse y ser compatible con el plugin woocommerce, es decir con la tienda online. Y no todos los temas son compatibles. Esta plantilla lo bueno que tiene es que es 100% compatible con woocommerce, y te aseguras que todo va a funcionar a las mil maravillas.
- Es rápida a la hora de cargar y sin excesivo código. Además al estar creada por los desarrolladores de woocommerce nos da tranquilidad, ya que es compatible con los plugins.
Puedes ver la demo de Storefront Theme en este enlace y ver una tienda online con esta plantilla.
Instalar Storefront
Para instalar este theme en tu tienda, tienes que dirigirte a Apariencia→ Temas, clicas en añadir nuevo y buscas Storefront. Pulsas en Instalar y activar.
Ahora tienes que crear un child theme, antes de empezar a trabajar y configurar tu tienda. Sino todo el trabajo que realices se puede perder en futuras actualizaciones del theme. Pôr eso es necesario crear un Child Theme y trabajar sobre él.
Para crear este Child Theme hay muchos plugins que puedes utilizar. Yo utilizo Child theme configurator.
Personalizar la plantilla Storefront
Este tema tiene muchas posibilidades a la hora de personalizar la tienda online.
Por una parte puedes personalizar la tienda con lo que trae por defecto el theme. Y además puedes añadir plugins que te van a ayudar a mejorar el aspecto y la usabilidad de tu tienda online.
Con las opciones que trae la propia plantilla
Las personalizaciones de Storefront las encuentras en Apariencia → Personalizar. Y las opciones que encuentras son:
- Identidad del sitio: Puedes añadir el logo. Poner el nombre de tu tienda (título) y añadir una descripción corta.
- Cabecera: Puedes añadir una imagen en la cabecera de tu tienda, en la parte superior. Y cambiar los colores del fondo de la tienda, del texto y de los enlaces.
- Pie de Página: puedes cambiar el color del fondo y de las tipografías.
- Fondo: Puedes cambiar el fondo de la tienda añadiendo una imagen o seleccionando un color.
- Tipografía: Puedes cambiar el color de las tipografías.
- Botones: Cambiar el color de los botones.
- Diseño: Aquí tenemos pocas opciones. Más adelante al instalar otros plugins verás como aumentan las opciones de diseño.
- Menú: Desde aquí puedes crear y configurar los menús de tu tienda.
- Widgets: Puedes añadir hasta 4 widgets en el pie de la página. Además también puedes cambiar los widgets de la barra lateral o eliminarlos.
Hasta aquí son las personalizaciones que te permite la propia plantilla de Storefront sin necesidad de instalar plugins complementarios.
Pero seguro que tu quieres personalizar todavía más tu tienda, como siempre te digo, tienes que transmitir tu valores, tu voz de marca y conectar con tu cliente. Y eso se hace personalizando al máximo tu tienda online.
Con plugins extras.
Tienes la opción de añadir plugins extras que te van a permitir personalizar todavía más tu tienda, dandole el aspecto con quieras. Te recomiendo siempre trabajar la experiencia de usuario y la usabilidad, dándolo mucha importancia y prioridad a estos dos aspectos.
Storefront Designer
Con este plugin podrás personalizar mucho más. Dentro de cada pestaña, cabecera, pie de página, tipografía, botones y diseño, se han añadido opciones que antes no estaban y que te permiten personalizar más tu tienda.
Storefront checkout customizer
Ahora toca personalizar la página del carrito y optimizarla con el fin de que tu cliente se sienta cómodo y confiado. Para ello puedes utilizar el plugin storefront checkout customizer.
En el momento de instalarlo y activarlo en el menú Apariencia → Personalizar, encontrarás una nueva pestaña “Checkout” desde aquí puedes personalizar tu página de carrito.
Más plugins
Hay tres plugins más relacionados con la personalización de la plantilla que son muy interesantes.
- Storefront Parallax Hero que te permite instalar una llamada a la acción muy atractiva y llamativa.
- Storefront WooCommerce Customiser. Con este plugin puedes personalizar la homepage, la página de la tienda (shop), y las fichas de producto.
- Storefront Homepage Extra Sections. Puedes instalar un slider y widgets extras.
Y ahora ¿hablamos en los comentarios? Estaré encantada de responder a tus preguntas, dudas o sugerencias. Y si utilizas Storefront en tu tienda online, yo y los lectores estaremos encantados de que nos enseñes tu tienda.
Hasta entonces, recuerda que, lo bueno compartido, sabe mejor.
Un abrazo!
Gracias Nerea por esta valiosa información.
Por cierto, me ha parecido interesante lo que dice tu bio sobre humanizar las tiendas.
Saludos! 🙂
Hola! Me alegra que te guste 😉 Gracias por tus palabras.
La venta online no es tan diferente, o al menos no debiera serlo de la venta offline. Una venta es más, que un mero intercambio entre bienes y productos. Cuando compramos, conectamos, y no conectamos con las cosas o productos, sino conectamos con las personas, de ahí que debemos humanizar las tiendas online. 😉
Un placer tenerte por aquí.
Un abrazo!
Hola Nerea;
En mi página, aparece el logo pero no el título …
Qué puedo hacer para que aparezca?
Gracias!
Hola Nerea! Muy útil esta información. Estoy empezando a montar una web con Storefront y me encuentro un poco atascado. Quiero poner una imagen que ocupe todo el ancho de la página justo debajo de la cabecera, para que no se vea directamente la tienda ya que ahora mismo solo tengo 2 productos, y quedaría un poco «sosa» la página. Sabes cómo podría hacer para hacer eso? Quizás Storefront no sea el tema ideal para una tienda con tan pocos productos, ya que es los ble que se necesite algo más «visual», tu que opinas? Muchas gracias y disculpa las molestias!
Hola David.
Puedes editar la página de la home, e incluir una imagen. De esta manera aparecerá la cabecera con el menú, la imagen que hayas incluido y los productos que tengas.
Un saludo.
Hola Nerea,
Antes de nada mil gracias por contestar.
El problema es que con Storefront si meto una imagen no consigo hacer que ocupe todo el ancho de la pantalla. He investigado y parece ser que se puede hacer con un Hero Image pero no consigo encontrarlo para Storefront.
¿Sabes de alguna otra alternativa?
Muchas gracias.
Un saludo!
Hola Nerea.
Te agradeceré toda ayuda que puedas aportar.
Estoy intentando abrir una tienda con Storefront pero al activarlo , la homepage aparece vacía , tan solo el nombre y los atributos de woocommerce (carrito, etc). He visto y leído,lo he desactivado y creado un Child, pero este tiene las misma taras que el padre.
He observado que ocurre lo mismo con los otros temas, tambien gratuitos de woordpress. ¿Es un problema de mi ordenador? ¿Faltan pluggins?. No tengo conocimientos de configuración, no se donde encontrar lo que m en videos, comentan. He bajado el archivo zip de Storefront, pero no existe un documento xml en su interior para poder importar todo a traves de wc.
¿Qué hago? Por favor… Si está en tu mano ayúdame. Me urge abrir la tienda.
Puedas o no te agradezco el tiempo dedicado a leer este mensaje.
Ana
Hola Ana.
Encantada de saludarte.
Te acabo de escribir un email con capturas de pantalla indicándote desde donde tienes que configurar la home de tu tienda para que te aparezcan las categorías y los productos.
Espero que te sea de ayuda.
Un saludo.
Hola, podrías darme a mi la misma información por fa, te lo agradecería enormemente…
Saludos
Hola Rodrigo,
Te acabo de enviar un email.
Un saludo.
Hola, enviame la info porfis , tengo el mismo problema
Hola NErea, estoy intentando abrir la tienda y me pasa lo mismo…. podrains enviarme a mi tambien a mi mail?
Perdón, mi web es calzadoarmonia.com
hola, como hago para que los productos de la tienda no aparezcan en la pagina de inicio? cargo productos y aparecen ahi en vez de aparecer en la pagina tienda
Buenas tardes,
Hemos creado una tienda online con el tema Storefront, no tenía ni idea que se tenía que hacer en child theme y lo hemos hecho en la plantilla padre. Hay alguna manera de copiar los datos, o me podéis guiar o indicar que debo hacer ahora, me da un poco de miedo que se vaya todo al carajo si hacen una actualización
Hola! Gracias por toda la información. Estoy creando mi tienda de ropa poco a poco con woocommerce y he elegido este tema storefront y también he activado un child theam. Supuestamente son temas responsive pero en realidad en la versión movil se ve muy mal, las categorías se mueven abajo, etc. ¿Cómo puedo personalizar la versión movil? ¿Necesito un pluggins específico para el movil o cómo debo proceder? De antemano gracias, eres genial!
Un saludo.
Muchas gracias por el artículo.
Buena aportacion!!