StoreFront, Woocommerce y Page Builder. El trío perfecto.

Es innegable que woocommerce le está comiendo la tostada a Prestashop y Magento con más de un 33% de tiendas onlines creadas a día de hoy con este plugin y CMS. Esa vieja frase de: “Para una tienda online pequeña usa WordPress” ya podemos decir que: “Si quieres una gran tienda online, hazla con WordPress y Woocommerce”

Pero para que estas tiendas estén lo mejor preparadas posible para aguantar todo el trabajo que conlleva, lo mejor es instalar un Theme que esté preparado para ello y como no, los plugins necesarios para tener nuestra tienda online al 100% y lista para la venta.

Si hablamos de Theme de WordPress que estén adaptados para que funciones con este CMS y con el mejor plugin para tiendas online, “Woocommerce” seguramente encontraremos miles, pero en este post nos centraremos en StoreFront, un Theme 100% compatible con Woocommerce y además rápido, sin excesivo código y muy flexible gracias a sus extensiones que nos dan una gran gama de adaptabilidad para encontrar lo que necesitamos. También contamos con la tranquilidad de que esta creado por los desarrolladores del plugins de woocommerce. Esto nos asegura una compatibilidad fiable y completa.

– Cómo empezar a trabajar con Storefront.

Nos dirigimos al repositorio de Temas (plantilla o Theme) de nuestro WordPress (Asumimos que ya tenemos una instalación de WordPress, sino sabes como hacerlo, puedes ver ir a este post) Apariencia–>Temas pulsamos en añadir nuevo y buscamos StoreFront, pulsamos en Instalar y Activar.

Ahora, como somos unos buenos implementadores, vamos a crear un Child Theme para este Tema. Hoy vamos a hacerlo desde un plugin de usar y tirar, pero aquí os dejos un artículo que habla de que son y cómo crear child theme. El plugin que utilizaremos para crear el child themes es Child theme configurator por Lilaea Media. Una vez instalado y activado, nos dirigimos a Herramientas–>Child Themes 

Para crear el child theme con este plugin lo único que debemos hacer es en el paso 2 seleccionar el theme StoreFront. Luego pulsamos en Analyze. En las opciones posteriores sólo tenemos que cambiar en el punto 4 el nombre del directorio por uno que se adapte a la tienda que estas creando, Ejemplo: mi-tienda-online y para que personalicemos un poco más este Child Theme, en el paso 7, desplegamos y cambiamos esos datos para adaptarlos a nuestro proyecto. Por último, pulsamos en Create new Child Theme. Una vez se hayan hecho las comprobaciones y creado el child theme, tendremos que activarlo desde Apariencia–>Temas. 

Ya podemos borrar el plugin Child theme configurator sin ningún temor.

– Cómo personalizar StoreFront

La personalización se divide en dos partes, la personalización que podemos hacer por defecto y en una segunda instancia la que nos permite instalar una serie de plugins que nos ayudarán a mejorar el aspecto de nuestra tienda online

Personalizaciones de fábrica.

La verdad es que no es nada del otro mundo, pero nos ayudan a familiarizarnos con el tema. estas personalizaciones de StoreFront las encontraremos desde Apariencia–>Personalizar

Opciones destacadas.

Identidad del sitio: Cambiar el título de la web o añadir el logo

Cabecera: Añadir un fondo o cambiar los colores de la cabecera y la tipografía del menú.

Pie de Página: Cambiamos el color de fondo y el de la tipografía. más adelante instalaremos un plugin para cambiar los textos.

Fondo: Cambiamos el fondo de las páginas.

Tipografía: Cambiar el color de esta. Más adelante veremos un plugin para realizar una mayor personalización.

Botones: Cambiar el aspecto de los botones. Más adelante veremos un plugin para realizar una mayor personalización.

Diseño: Cambiar el layout. Más adelante veremos un plugin para realizar una mayor personalización.

Menú: Instalar los menús en diferentes opciones del theme.

Widgets: Nos da la posibilidad de añadir hasta 4 widgets en el pie de la página cambiar los widgets de la barra lateral o eliminarlos. 

 

Personalizaciones “Personalizadas” con StoreFront Designer. 

Lo primero y fundamental es instalar Woocommerce este y los demás plugins que vienen a continuación lo instalaremos desde la sección de plugins.

Si necesitamos unos datos de ejemplo de woocommerce para maquetar nuestra tienda podemos utilizar este archivo  que debemos descomprimir antes de utilizarlo con el importador de WordPress.

La personalización del plugin woocommerce es otra historia. Podéis ver un pequeño manual de instalación de woocommerce desde este enlace.

– Encabezados.

Con el plugin StoreFront Designer instalado, nos dirigimos a Apariencia–>Personalización–>Cabecera aquí se muestran una nuevas opciones. La posibilidad de tres nuevos Layout para la cabecera y también la opción de poder dejar la cabecera de forma total (seleccionado Sticky header) o parcial (seleccionando Sticky navigation) fija en la pantalla cuando nos desplazamos hacia abajo.

– Tipografía.

Aquí el plugin añade la opción de seleccionar un puñado de tipos de fuentes, desde mi gusto bastante pobre, y la opción de aumentar el tamaño de la fuente de la web. Nada del otro mundo.

– Botones.

Lo que añade aquí el plugin si que vale la pena. Nos da la posibilidad de cambiar el aspecto total de todos los botones de la web, dando un aspecto mas atractivo a estos desde las opciones de Background style, Button radius y Button size