Como puedes leer en la entrada en la que muestro los mejores temas para WooCommerce que he probado, Storefront es uno de mis preferidos para usar en tiendas online, y hoy te voy a hablar un poco de él.

Por si no lo sabías, Storefront es el tema oficial de WooCommerce. Es decir, está desarrollado por los creadores del famoso plugin que convierte tu WordPress en una tienda virtual.

¿Qué ventajas supone eso para tu tienda?

Pues, entre otras cosas, su código está bien optimizado, por lo que la velocidad de carga de tu web será buena (siempre que no la petes con plugins innecesarios), no te dará problemas de incompatibilidad con WooCommerce, y una de las mejores cosas: es una plantilla ligera que incluye lo estrictamente necesario.

Si eres de los que necesita montones de funcionalidades y efectos, con Storefront de serie no podrás añadirlas, pero aún no está todo perdido para ti 😉

Como ya he dicho, la plantilla viene justo con lo necesario para personalizar un poco tu tienda, pero puedes adquirir extensiones, tanto gratuitas como de pago, desarrolladas también por los creadores de Storefront, para aumentar las funcionalidades y la personalización (más abajo hablaré sobre ellas).

¿Quieres lo mejor para tu web y tu proyecto online?

Pues será mejor que eches un ojo a las mejores herramientas de creación y diseño web.

Luego no digas que no te lo advertí...

Además, puedes usar tu maquetador visual de WordPress preferido para diseñar las diferentes páginas de la web, por lo que no debería suponer un gran problema que la plantilla sea básica, ya que puedes conseguir grandes resultados gracias a esto.

Y como siempre, si controlas algo de CSS puedes dejarla a tu gusto añadiendo tus estilos personalizados, y eso que te ahorras en extensiones y plugins de más.

Instalar el tema Storefront y ver demo

Storefront se puede instalar como cualquier otro tema de WordPress desde la pestaña “Apariencia – Temas”, ya sea buscándolo por su nombre en el repositorio oficial o descargándolo desde la página oficial de WooCommerce.

Aquí tienes una demo para ver en funcionamiento Storefront con WooCommerce. Eso sí, esta demo tiene instalada algunas de las extensiones de pago.

Por ejemplo, el vídeo de la portada no podrías insertarlo con Storefront pelado, y tampoco el mega menú.

Otra cosa que me gustaría decirte es que aunque sea el tema oficial de WooCommerce y se lleve a la perfección con él, su uso no necesariamente tiene que ser en una tienda online.

Gracias a su gran optimización y su velocidad de carga es genial para utilizar en cualquier otra web o blog, aunque no se vaya a instalar WooCommerce.

Opciones de Storefront theme

Todas las opciones de personalización de Storefront se encuentran en el personalizador de WordPress.

A diferencia de otros temas, no tiene ninguna opción en el panel de administración de WordPress. En “Apariencia – Storefront” solo encontrarás recomendaciones para instalar sus extensiones.

Vamos a ver las opciones disponibles:

  1. Identidad del sitio: como en todas las plantillas de WordPress, desde aquí puedes subir tu logotipo y escribir el título de tu sitio junto con una pequeña descripción.
  2. Cabecera: puedes subir una imagen (recomendado un tamaño de 1950 x 500 píxeles) o escoger un color como fondo de la cabecera, además de elegir los colores del texto y los enlaces.
  3. Pie de página: similar al anterior, pero sin posibilidad de añadir una imagen de fondo. Puedes elegir los colores de fondo, del encabezado, del texto y de los enlaces.
  4. Fondo: para el fondo general de la web puedes elegir una imagen o un color personalizado. Si te decantas por la imagen, puedes elegir entre algunas opciones para su posición.
  5. Tipografía: desde aquí eliges los colores principales para los encabezados, el texto y los enlaces de tu web. Con Storefront de serie no puedes elegir la familia de la fuente.
  6. Botones: esta sección es para elegir los colores de los botones de la tienda (añadir al carrito, aplicar cupón, etc).
  7. Diseño: tienes dos opciones de diseño del tema: con la barra lateral a la izquierda o a la derecha.
  8. Menús: como siempre, desde aquí puedes elegir las ubicaciones de los menús. Con Storefront puedes tener un menú principal y un menú secundario, que se sitúa en la parte superior derecha, más o menos centrada con el logotipo de tu tienda. Aparte, tiene un menú para móviles.
  9. Widgets: con Storefront puedes añadir widgets en la barra lateral, debajo de la cabecera, y en cuatro columnas del pie de página.

Aparte, están las también típicas “Portada estática” y “CSS adicional”.

Como ves, las opciones de personalización de Storefront no son nada espectaculares, de ahí la sencillez del tema y su buena velocidad de carga, pero vamos a dar un repaso a sus extensiones para ver cómo lo puedes mejorar.

Extensiones de Storefront

Como he dicho al principio, Storefront cuenta con extensiones gratuitas y de pago, así que te voy a poner las gratuitas para que puedas ver de un vistazo todas las que puedes adquirir sin pasar por caja 😉

Extensiones gratuitas

Footer bar

Añade un área de widget justo encima del pie de página, ideal por si quieres aprovechar al máximo la parte inferior de las páginas de tu tienda online. La puedes personalizar añadiendo una imagen o color de fondo y escogiendo los colores de los encabezados, texto y enlaces.

 

woocommerce storefront

Ejemplo del widget “Footer bar”

 

Hamburguer menu

Esta extensión modifica la manera de mostrar el menú desde el smartphone. Con ella instalada, aparece un slider desde la izquierda con las opciones del menú, en lugar del típico desplegable hacia abajo.

 

wordpress storefront

Ejemplo del menú móvil

 

Homepage Contact Section

Con esta extensión puedes agregar un apartado de contacto en la página principal de tu tienda, poniendo tu dirección, teléfono, email, un mapa de Google y un formulario.

No obstante, para añadir el formulario es necesario tener el plugin Jetpack instalado, cosa que no te recomiendo que lo hagas por el enorme tamaño que ocupa. Mucho mejor crear una página específica de contacto y añadir un formulario con cualquier otro plugin dedicado a ello.

 

storefront dessign

Ejemplo de los datos de contacto

 

Product pagination

Cuando activas esta interesante extensión, en la ventana de un producto se muestra una pestaña a cada lado con el producto anterior y siguiente, para que el usuario pueda navegar entre ellos.

Cuando el usuario pasa el ratón por encima de estas pestañas, se despliegan y se muestra el título y la imagen principal del producto.

 

storefront wordpress theme

Ejemplo de las pestañas hacia otros productos

 

Product sharing

Agrega botones para que los usuarios puedan compartir los productos en sus redes sociales o por correo electrónico. Las redes sociales disponibles son Facebook, Twitter y Pinterest.

 

theme storefront español

Botones para compartir el producto

 

Sticky add to cart

Esta original extensión hace que cuando un usuario haga scroll hacia abajo dentro de una página de producto, se muestre el botón de añadir al carrito en una columna fija en la parte superior de la pantalla, junto con el título y el precio.

Para entenderlo mejor puedes ver el siguiente vídeo demostrativo (es muy cortito).

Traducción de Storefront

Otro de los puntos fuertes de Storefront es que está totalmente traducido al español, al igual que WooCommerce, por lo que no tendrás ningún problema para entender todas sus opciones.

De todas formas, te puede interesar personalizar los textos que vienen de serie, especialmente tratándose de un tema especialmente pensado para instalar en una tienda online.

Ya sabes, cambiar los típicos textos estándar que aparecen en la mayoría de plantillas por unos personalizados y más cercanos para conectar mejor con tus clientes, textos “más humanos”.

En ese caso, la opción más fácil es utilizar el plugin Loco Translate. En el enlace te explico cómo puedes personalizar los textos de la plantilla por los tuyos propios de manera sencilla, así que no tienes excusa para darle un toque más amigable a tu web 😉

Conclusión

Pues como ves, Storefront es una buena opción para utilizar en tu web hecha con WordPress, especialmente si se trata de una tienda online.

Es una plantilla básica pero muy útil si quieres un sitio ligero, y sobre todo, gratis.

Si todavía estás dudando, te invito a que conozcas mis temas preferidos para WooCommerce si lo que quieres es montar una tienda online, o mis temas preferidos para WordPress en general.

Si ya has probado Storefront, puedes dejar un comentario diciendo qué te parece y por qué lo has elegido para tu tienda virtual o blog 🙂

 

Imagen del artículo: ijeab / Freepik