Personalizar Storefront

Paleta de pintor

Hasta ahora, nos hemos limitado a configurar WooCommerce, dejando de un lado el diseño de la tienda. Vamos a ver cómo modificar el aspecto de esta, de momento, desde el personalizador . Mas adelante, en otros posts, te enseñaré a tocar algo de código y conocerás algún plugin gratuito y otros premium.

Ya vimos como instalar Storefront y a crear un tema hijo, así que vamos a comenzar por aprender todas las posibilidades de configuración que nos da el personalizador.

El personalizador es una magnífica herramienta que nos ofrece WordPress, con la cual podemos ver, a tiempo real, cómo se aplican los cambios que estamos realizando. Para llegar hasta el basta con situarte en la página que quieres personalizar y pulsar el botón «Personalizar» de la barra de herramientas (Ver imagen 1) y aparecerá, la izquierda, una barra con todas las opciones, mientras que a la derecha de tu pantalla tienes la página que hayas elegido y que piensas personalizar.

Botón personalizar de la barra de herramientas.
Imagen 1

 La imagen 2 muestra la home de nuestro theme antes de personalizar, tal como aparece cuando se instala y con algunas pruebas que hemos ido haciendo. Aunque yo soy pésimo diseñando, al menos, te iré explicando todas las opciones del personalizador, y vas aplicando tus ideas. Seguro que obtienes mejor resultado.

Aspecto del theme antes de personalizar
Imagen 2

El Personalizador

Personalizador de Storefront
Imagen 3

La imagen 3 nos muestra las opciones que nos trae de base el personalizador de Storefront, mas adelante instalaremos algún plugin que nos dará más opciones de diseño y, por consiguiente, se irán añadiendo más lineas a este menú. Vamos a ir viendo de arriba a abajo.

Lo primero que aparece es un botón en forma de aspa que sirve para salir del personalizador. A la derecha, el botón «Publicada» que ahora mismo no puedes pulsar, pero que, en el momento que realices alguna modificación, cambia a «Publicar», y cuando lo pulses, se aplicarán los cambios. Junto a este aparece un botón con una rueda dentada, que al pulsarlo, nos sale un nuevo menú con las siguientes opciones:

  • «Publicar». Al marcar esta opción y pulsar en publicar, se aplicarán los cambios directamente. Si esto es lo que queremos, no es necesario entrar en este menú, sino que, directamente, pulsamos en «Publicar».
  • «Solo guardar». Esta me encanta, porque al seleccionarla y pulsar el botón, guarda los cambios pero no los aplica y, ademas, te crea una URL, de estas raras, que te permite compartir con quien tu quieras, para que pueda echar un vistazo a los cambios, sin necesidad de acceder al personalizador.
  • «Programar». Aquí deberas introducir una fecha y una hora y quedará programado para que los cambios se apliquen en ese momento.

Ademas si te arrepientes tienes la opción de eliminar los cambios que no estén publicados con el botón de la papelera «Descartar cambios», saldrá una modal y pulsas en «Aceptar» para eliminar las modificaciones.

Justo de bajo de estos botones se encuentra una ventana que va variando y te indica en todo momento donde te encuentras, ademas aparece un botón a la izquierda con una flechita apuntando hacia atrás que sirve para volver al menú principal.

La ventana que viene a continuación nos dice que theme estamos modificando. Seguro que te habrás dado cuenta de que en nuestro ejemplo no es Storefront, sino que aparece «Curso WooCommerce», y esto es porque, cuando creamos en Child Theme (echa un vistazo al post Storefront) le asigné ese nombre. Pero a ti debe aparecer Storefront o el nombre que le diste a tu tema hijo.

Al pulsar en «Cambiar», te muestra, o bien todos los temas que tienes instalado, para que elijas uno de ellos, o bien elegir uno del repositorio de WordPress para que lo instales y modifiques.

Opciones del personalizador

A partir de aquí es cuando tienes las opciones para modificar las opciones del theme que hayas elegido, cada uno tendrá su menú particular, y te permitirá modificar una u otra cosa. Yo me voy a centrar en Storefront que es el que nos ocupa en este post.

Identidad del sitio

Si pulsas en «Elegir logo», te manda a «Medios» para que elijas la imagen que quieres que se muestre, que deberá ser la de tu logotipo, con un tamaño de 470 x 110 px. Una vez seleccionada pulsas en «Elegir» y aparece un pequeño editor que solo te permite recortar la imagen. Pulsas en «Recortar imagen» para que aparezca la zona seleccionada o en «No recortar» y tendrás la imagen completa.

En el caso de que no selecciones ningún logotipo, los siguientes campo te permiten poner el texto que desees. En «Título del sitio»  lo ideal es que pongas el nombre de tu tienda y  «Descripción corta», es un pequeño texto que aparece debajo del nombre, puedes dejarlo en blanco si quieres que no aparezca nada.

«Icono del sitio» o favicon es esa pequeña imagen que aparece en cada pestaña del navegador, aquí es donde puedes elegirla. Debe tener un tamaño de 512 x 512 pixeles (Ver imagen 4).

Muestra el icono en la pestaña de el navegador
Imagen 4

Cabecera

La cabecera es la parte superior de tu página. Puedes colocar una imagen de fondo, Storefront recomienda una de 1950 x 500. Para ello tienes que pulsar en «Añadir nueva imagen» y elegir la que quieras que aparezca.

Ademas tienes la tres opciones de personalizar con colores, el fondo, el texto y los enlaces. Al pulsar en cada uno aparecerá la paleta para que elijas el que mejor se adapte al diseño de tu tienda.

Pié de página

El pié de página, o footer, es la zona inferior de la página. Puedes cambiar los colores del fondo, encabezado, texto y enlaces.

Fondo

El fondo es la zona comprendida entre la cabecera y el pié de página. Puedes colocar una imagen de fondo, pero ojito con esto, siempre debes tener en cuenta que tu página debe ser legible, una imagen puede que se «coma» el contenido, que destaque más que este. Mi consejo es que, o bien lo dejes en blanco o elijas un color neutro que te permita a cualquier usuario (ten en cuenta que existen usuarios con algún tipo de discapacidad), ver con claridad el contenido. Pero si te decides a poner una imagen tienes las siguientes opciones:

En «Imagen de fondo» pulsas en «Seleccionar» para elegir la imagen de la biblioteca de medios.

En el desplegable «configuración» , si seleccionas «Predeterminada», la imagen se repetirá el número de veces necesario para rellenar todo el área del contenido, esto dependerá del tamaño de la imagen que hayas elegido y se moverá junto a este cuando hagas scroll. 

«Rellenar pantalla» adaptara la imagen al tamaño del contenido, ademas aparecen los controles «Posición de la imagen», por si quieres que esta se coloque centrada o se acerque al margen que señales, se quedará fija al hacer scroll.

«Ajustar a pantalla» es prácticamente lo mismo que la anterior pero, ademas, sale la casilla «Repetir la imagen de fondo», que al seleccionarla, la imagen se repetirá las veces que sea necesario para rellenar el contenido. Se queda fija.

Si eliges «Repetir», la imagen, con su tamaño original, se repetirá tantas veces como sea necesario para rellenar el contenido, igual que cuando eliges «Predeterminada», pero ademas tienes los controles de «Posición de la imagen» y la casilla «Desplazar con la página» que te permite elegir entre que quede fija o se desplace junto al contenido cuando haces scroll.

La opción «Personalizada» te permite controlar todas las funciones que hemos visto anteriormente, de forma manual.

A todas estas combinaciones que hemos visto puedes sumarle, ademas, elegir un color para el fondo con la paleta de colores que aparece al pulsar en «Color de fondo». Si no eliges ninguna imagen, esta será la única opción que puedes cambiar.

Tipografía

La zona de tipografías está muy pobre en cuanto a opciones para configurar, de hecho sólo puedes cambiar los colores de los encabezados, textos y enlaces, ni siquiera te permite cambiar la fuente, aunque ya veremos como hacerlo con un plugin.

Botones 

Con los botones nos pasa lo mismo que con las tipografías, las únicas posibilidades que nos ofrece son la de cambiar los colores de fondo, texto, fondo al cambiar y texto al cambiar

Diseño

«Diseño» te permite cambiar el diseño de la página, de base solo te deja cambiar la posición del contenido y la barra lateral, aunque ya veremos como aumentar las opciones usando un plugin.

Página del producto

En«Página del producto»  encontramos dos opciones. Si marcas «Añadir al carrito fijo», crea una barra en la parte superior de la web con una miniatura, precio, nombre, etc… y un botón de «Añadir al carrito» cuando este se pierde cuando haces scroll (Ver imagen 5), se hace con la idea de que el usuario siempre tenga a la vista este botón, esto mejora mucho la conversión.

Barra del botón de "Añadir al carrito fijo"
Imagen 5

«Paginación de productos» muestra a cada lado de la página de producto una miniatura del producto anterior y siguiente, que al pasar por encima con el puntero de despliega con una pequeña información (Ver imagen 6 y 7), y que al pulsar te permite ir a ese producto en concreto.

Imagen que muestra las miniaturas que aparecen a cada lado de la página de producto señalando el producto anterior y siguiente.
Imagen 6
Estado en el que queda la miniatura de paginación de producto al hacer hover.
Imagen 7

Menús

Storefront tiene dos ubicaciones de menús, principal, que aparece en la parte baja de la cabecera, justo antes del contenido, y secundario, a la derecha del logotipo (Ver imagen 8).

Ubicaciones de los menús de Storefront.
Imagen 8

Ademas de un tercer menú que aparece en tablet y móvil, que es el típico menú de hamburguesa que se despliegas cuando pinchamos sobre él con el puntero (Ver imagen 9).

Ubicación del menú versión móvil de Storefront.
Imagen 9

Se gestiona de la misma manera que cualquier menú de WordPress.

Widgets

Storefront viene preparado con varias áreas de widgets. Una bajo la cabecera, la típica de la barra lateral y el footer en el que podemos colocar hasta cuatro (Ver imagen 10).

Áreas de widgets de Storefront.
Imagen 10

Se gestiona igual que cualquier otro theme de WordPress, y al tratarse de una tienda, puedes aprovechar más los widgets de WooCommerce. 

Ajustes de portada

En «Ajustes de portada» vas a elegir que ver en la home de tu tienda. Puedes seleccionar entre «Tus últimas entradas», y se mostrarán las entradas como en un blog, o «Una página estática», entonces te aparecen dos nuevos campos para que indiques cuales van a ser la página de inicio y la página de entradas.

WooCommerce

Dentro de los ajustes de WooCommerce, tienes cuatro sub-menús.

«Avisos en la tienda» es un campo en el que puedes colocar el texto que desees y al marcar la casilla «Activar el aviso en la tienda», mostrará una barra fija al usuario que la esté visitando, la cual podrá ocultar pulsando en el botón «Descartar» (Ver imagen 11). Puedes usarlo para promocionar algún producto novedoso o colocar puntualmente una oferta.

Barra que muestra el aviso en tu tienda.
Imagen 11

«Catálogo de productos» te permite configurar que y cómo se va a mostrar la página de la tienda y las de categoría de productos. En el desplegable «Visualización de la página de la tienda» puedes elegir entre, que se muestren los productos, las categorías o que se vean ambos. «Visualización de categorías» es lo mismo que lo anterior pero en la página de categorías de productos, esta vez puedes seleccionar entre productos, sub-categorías o qué se muestren los dos. «Orden de los productos por defecto» sirve para indicar como quieres que se muestren los productos por defecto, aunque al usuario también le aparece un desplegable en el que  puede elegir como quiere que se ordene cuando está visitando la página (Ver imagen 12).

Desplegable en el que el visitante puede elegir en que orden quiere que se muestren los productos
Imagen 12

Puedes elegir entre:

  • «Orden predeterminado», se ordena alfabéticamente. 
  • «Popularidad», los más vendidos.
  • «Valoración promedio», según la valoraciones que le hayan dado.
  • «Ordenar por mas recientes», las últimas que se han añadido.
  • «Ordenar por precio (asc)», ordena desde el precio mas bajo al mas alto.
  • «Ordenar por precio (desc)», ordena desde el precio mas alto al mas bajo.

«Productos por fila» se refiere a cuantas columnas de productos se verán en cada página.

En «Filas por página» le estás indicando cuántas filas se van a mostrar en cada página de productos.

En «imágenes de productos» puedes seleccionar cómo quieres que se muestren las imágenes del catálogo. Si seleccionas » 1:1 «, las imágenes quedarán recortadas a un recuadro. Si eliges «Personalizado» aparece un par de campos para que pongas manualmente la relación de aspecto con el que quieres que se muestren y el que yo prefiero «Sin recortar» , no recorta la imagen y ya me encargo yo de subirlas como quiero que aparezcan.

«Finalizar compra» te permite modificar la apariencia de la página de finalizar compra. Ya he  mencionado alguna vez que al usuario hay que ponérselo lo más fácil posible para mejorar la conversión. En esta sección tienes tres campos que, si realmente no los necesitas, es mejor que no se los muestre. Son «Nombre de la empresa», «Dirección, linea 2» y «Teléfono» que tienes las opciones de, ocultarlo, que sea opcional u obligatorio.

Si marcas la casilla «Destaca los campos obligatorios con un asterisco»,  haces que aparezca un asterisco junto al nombre del campo, indicando que es obligatorio rellenar ese campo.

´En «Página Política de privacidad» y «Página Términos y condiciones» tienes que indicar cuál es la página de tu sitio destinada a este fin.

Los dos siguientes campos hacen referencia esa primera capa de información sobre la política de privacidad que se muestra antes de finalizar la compra y sobre términos y condiciones que el comprador debe aceptar. Viene un texto por defecto perfectamente válido pero que puedes modificar a tu antojo, incluso puedes incorporar un shortcode que te permite añadir un enlace a las páginas que le hemos indicado en los anteriores campos. [privacy_policy] para política de privacidad, y [terms] para términos y condiciones (Ver imagen 13).

«CSS adicional» es un simple editor de CSS que WordPress incorporó desde la versión 4.7 y que no depende de este theme en concreto, sino que afecta a todos los que instales. Como de momento he decidido no tocar nada de código esta sección nos la vamos a saltar.

«Mas» es un poco de información sobre que existen extensiones que amplían las posibilidades del personalizador. Mas adelante iremos viendo varias de ellas.

Otras opciones que no pertenece a Storefront, sino que son comunes a todos lo themes que instales, son estos botones que aparecen abajo del todo del personalizador (Ver imagen 14), y que sirven para ver como queda tu página en los formatos de escritorio, tablet y móvil. Es interesante que cuando estes realizando cambios, compruebes como se ven en los distintos dispositivos, porque aunque el personalizador se encarga de hacerlos responsivos, puede que te guste como queda de una forma y al pasarlo a otra no se vea bien.

Controles para cambiar entre dispositivos del personalizador.
Imagen 14

También aquí tiene la posibilidad de ocultar el personalizador, momentáneamente, para despejar la pantalla. Para ello debes pulsar en «Ocultar controles».

12 comentarios en “Personalizar Storefront”

  1. Buenos dias,
    Tengo una gran duda, porque yo en personalizar si veo la pagina como quiero que este, por ejempo, en el lado derecho tengo para que se muestres los productos del carrito, cuando estoy en personalizar si los veo, pero cuando habro la pagina normar en un navegador veo solo Your Cart pero no estan los productos, que puede estar pasando? ademas en el carrito que esta en el menu me pongo arriba y se desplaza hacia abajo con los productos que tengo, eso en el personalizador, en la pagina normal no me hace eso, no se si tendras idea de loque pueda estar pasando, la pagina es http://www.mexisales.com

    1. Hola Juan:
      La verdad es que no puedo ayudarte mucho. He entrado en tu página y todo funciona perfectamente. Al ir añadiendo productos al carrito estos van apareciendo en la barra lateral y cuando paso el ratón por el carrito del menú, este muestra correctamente los productos que he añadido antes. Tendrías que darme más pistas sobre qué plugins tienes instalados porque en principio me da que pensar que puede ser algo de caché. Si tienes ocasión haz pruebas desde otro dispositivo a ver si obtienes el resultado esperado. Siento no poder decirte nada mas.

  2. Hola,

    Yo tengo un inconveniente en la pagina de inicio. Es que los productos que muetsro no se adaptan a l version movil. Se adaptan bien en la pagina de la tienda, pero no en la pagina de inicio. Alguna idea de como solucionarlo? la pagina es: http://myshop.todomerca.ec/

    1. Hola Roberto:
      No se si entendí bien tu duda. He visitado tu web y la página de inicio va perfectamente, si entro desde móvil, se adapta perfectamente al tamaño de la pantalla, pero al entrar en la tienda me encuentro una página vacía. No se si estas haciendo pruebas y en el momento que entré no tenías productos. Dime algo más para poder ayudarte. Veo que estás usando Storefront, y en principio, va perfectamente.

    1. Hola Alejandra. ¿Te refieres a que lo quieres igual que esta página? Storefront, además de el menú principal, también dispone de el menú secundario, que éste, por defecto, queda a la derecha del logo. Bastaría con que, tu menú actual, en vez de asignarlo al principal, lo hicieras al secundario. Puedes hacerlo desde el personalizador. No dudes en escribirme si no he resuelto tu duda.

  3. Hola como puedo modificar categorias en storefront?

    Me refiero que me aparece un boton con imagen , quiero que no aparezca la imagen sino un texto y el alto y ancho sean diferentes

    1. Hola Nelson.

      No se si te refieres a como se muestran las categorías en la página principal o a otra cosa. Por favor sé un poco mas específico y estaré encantado de ayudarte. Dime exactamente que necesitas y si puede ser, si lo has visto en alguna web, pásame la URL y le echo un vistazo.

    1. Hola. Si te refieres a que quieres un plantilla de página a ancho completo, cuando estés editando la página en concreto debes ir a la columna de la derecha, desplegar «Atributos de página» y en la sección «Plantilla» seleccionar «Full width». Ya sólo te queda pulsar en Publicar o Actualizar.

  4. Hola, me gustaría que dentro de la página de cualquier producto, el nombre del producto apareciera encima de la fotografía. Ahora aparece debajo y es muy grande cuando lo visualizas con el móvil. ¿ Me podrías decir como cambiarlo ?

    1. Hola Iván.
      Para hacer lo que me estas pidiendo necesitas tener una pequeña idea de programación, al menos de php, ya que necesitas modificar el hook que está utilizando el título en el templete de producto y anclarse a otro. Y por otra parte, para modificar el tamaño también necesitas tener idea de CSS. Si sabes acceder a tu web por FTP y localizar los ficheros, dímelo y te mando el código que necesitas modificar. También puedes ponerte en contacto conmigo por medio del formulario, ya que se trata de algo muy concreto y estaré encantado de ayudarte.

Deja un comentario

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