Storefront, el theme oficial de WooCommerce que hará volar tu tienda

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).

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

¿Por qué hay webs que hacen huir a los clientes mientras otras consiguen ventas cada mes?

Y no es porque en ellas aparezca una foto de Belén Esteban…

21 comentarios en “Storefront, el theme oficial de WooCommerce que hará volar tu tienda”

  1. Hola,

    Me gusta mucho tu web. Te hago una pregunta: El tema storefront sirve para meter productos de afiliados de amazon o aliexpress con el enlace de afiliado?.

    Saludos

    1. Hola Roberto,

      Sí, puedes utilizarlo junto con WooCommerce para introducir productos externos con enlaces de afiliados. Esa es una funcionalidad de WooCommerce que podrás utilizar con cualquier tema, Storefront incluido.

      Un saludo.

  2. Hola,

    Gracias por contestarme. Pero a ver, yo lo que sé es lo siguiente:

    – Si creo un producto propio y otro con un enlace de afiliado, los dos me aparecen con la opción de añadir al carrito y yo no quiero eso para un producto de afiliado.

    – Además, si tanto producto propio como producto afiliado se meten como productos en la misma página web, ambos se indexan en la misma página. Es decir, no sé cómo hacer una página de producto propio y otra con afiliados en la misma página web con woocommerce.

    Te agradezco tus respuestas, pero no pasa nada si no me contesta.

    Gracias y un saludo.

    1. Hola Roberto,

      – Para el producto de afiliado tienes que asignarle como tipo de producto «externo». De esta manera te permite poner el enlace hacia la web donde está el producto y el texto que tú quieras en lugar del típico «añadir al carrito».

      – No sé si lo he entendido bien, ¿quieres que en una página de la web estén los productos propios y en otra página de la web los productos de afiliado? Si es así, puedes asignarles categorías diferentes y mostrar unas categorías en una página y otras en otra.

      Un saludo.

  3. Gracias por tus respuestas.

    Pero soy un puto novato y no sé hacer tu segunda respuesta. Hasta dónde sé, todos los productos salen en la pagina que asignes como tienda en woocommerce / ajustes.
    Quiero crear una pagina de producto propio y ahí que se metan los productos de producto propio que vaya creando, y quiero crear una página de producto afiliado y ahí que se metan los produtos afiliados.
    Y no soy capaz:(

    Saludos.

    1. Hola Roberto,

      A los productos propios les asignas una categoría y a los de afiliado otra diferente.

      Creas una página nueva en blanco y escribes el shortcode [product_category category=»nombre-categoria-productos-propios»]

      Creas otra página y escibes el mismo shortcode, pero sustituyendo el nombre de la categoría.

      Un saludo.

  4. Hola!! tengo una duda, en la versión móvil solo muestra un producto, en la versión pc si te deja poner si quieres 3, 4,5…
    ¿Existe algún plugin o de que manera puedo hacer que se vean 2 o 3 productos?

    Muchas gracias!!

    1. Hola Ángela,

      No sé si existe algún plugin para ello, con CSS podrías conseguirlo quizá, pero mostrar 2 o más columnas en móvil puede hacer que los productos no se vean muy bien.

      Un saludo.

  5. hola: Excelente articulo, muy pero muy informatico…. estoy creando una tienda con woocommerce y me recomendo este tema, pero tambien te sugieren que actives el jetpack, dice que te ayuda con el calculo de los impuestos entre otras cosas, tu sugieres que no se instale porque pesa mucho, mi pregunta es lo debo borrar de los plugins instalados? o esto afecta la configuracion de la tienda de alguna manera? gracias por tu respuesta

    1. Hola Neyda,

      Yo te recomendaría desinstalarlo (comprueba que no estás utilizando nada antes de hacerlo). Los cálculos de impuestos se hacen desde WooCommerce directamente.

      Un saludo.

    1. Hola Alberto,

      Storefront no trae ningún maquetador, pero puedes instalar Elementor o cualquier otro para crear el diseño de tus páginas.

      Un saludo.

    1. Hola José Antonio,

      No sé si es esto a lo que te refieres, pero pon esta línea en CSS personalizado, a ver: *:focus { outline: none; }

      Un saludo.

  6. Hola , yo tengo mi tienda online el tema storefront pero no me termina de gustar la version movil ya que solo se ve un producto abajo de otro y el menu de abajo tapa el icono de wasap.
    Hay froma de modificar la version movil ¿?¿

    1. Hola Rubén,

      Puedes modificar el número de columnas con código CSS personalizado. En el foro de soporte de Storefront hay varios hilos sobre eso y podrás coger el código de ahí.

      Un saludo.

  7. Buenos días, ojalá puedan ayudarme, Instalé la plantilla Sotorefront, pero me dió error al cargar los productos de ejemplo. Y no sé como cargar estos productos una vez instalado el Storefront. Soy totalmente nuevo en esto, espero que me haga entender cuál es mi problema. gracias

    1. Hola Ignacio,

      Puede ser por mil motivos, es complicado ayudarte sin meterle mano. Puedes contactar con el soporte del tema, por si te pueden ayudar.

      Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *