Cómo Crear Una Tienda Online 2020 [Paso a Paso]

Cómo Crear Una Tienda Online 2020 [Paso a Paso]

Cómo Crear Una Tienda Online 2020 [Paso a Paso], Quieres comenzar tu propia tienda en línea? Sabemos que construir una tienda en línea puede ser un pensamiento aterrador, especialmente cuando no eres un técnico. Bueno, no estas solo. 

Después de ayudar a cientos de usuarios a comenzar su tienda en línea, hemos decidido crear la guía más completa sobre cómo construir su tienda en línea con WordPress (paso a paso).

¿Qué necesitas para iniciar una tienda en línea?

Nunca había habido un mejor momento para comenzar un negocio en línea que hoy.

Cualquier persona con una computadora puede comenzar en cuestión de minutos y sin adquirir ninguna habilidad especial.

Las tres cosas que necesita para comenzar una tienda en línea son:

  1. Una idea de nombre de dominio (este será el nombre de su tienda en línea, es decir, seomind.net)
  2. Una cuenta de alojamiento web (aquí es donde vive su sitio web en Internet)
  3. Su atención total.

Sí, es realmente así de simple.

Puedes configurar tu propia tienda en línea con WordPress y te guiaré a través de cada paso del proceso.

En este tutorial, cubriremos:

  • Cómo registrar un nombre de dominio gratis
  • Cómo elegir el mejor alojamiento de WooCommerce
  • Cómo obtener un certificado SSL gratis (requerido para aceptar pagos)
  • Cómo instalar WordPress
  • Cómo instalar un nuevo Theme
  • Cómo instalar los plugins Necesarios
  • Cómo crear una tienda WooCommerce
  • Cómo agregar productos en su tienda en línea
  • Cómo seleccionar y personalizar tu tema
  • Cómo ampliar su tienda en línea con complementos
  • Aprendiendo a aprender WordPress y hacer crecer su negocio

Listo? Empecemos.

Para que una tienda online exista en internet, tiene que tener un dominio y un alojamiento.

El dominio es el nombre de tu tienda online, es lo que la gente escribe en el navegador para poder encontrarla en internet, por ejemplo, el dominio de Amazon es amazon.com, el dominio de Victoria’s Secret es victoriassecret.com el domino de mi página web es seomind.net y el dominio de tu tienda online será elnombredetutiendaonline.com.

El alojamiento digamos que es un ordenador especial en el que se almacena todo el contenido de tu tienda online ( textos, fotos, vídeos, audios, etc).
Este ordenador especial está todo el día encendido y tiene una conexión a internet súper rápida para que cuando un visitante solicite entrar a tu tienda online, la pueda ver al instante.

El dominio y alojamiento es lo único que tiene coste en todo el proceso de creación de tu tienda online, ya que hay que hacerlo con empresas especiales que ofrezcan esos servicios.

Lamentablemente no hay forma de saltarte este paso, ya que para que tengas tu propio dominio, es decir, tu propio nombre de tienda online, el dominio debe ser comprado y necesitas un alojamiento para guardar todo el contenido de tu tienda online.

Pero no te preocupes, que el coste de ambas cosas es ridículamente bajo para todos los beneficios que te proporcionará tener tu nueva tienda online, ya que estamos hablando de un coste de entorno a unos 10 euros al mes 3.95 €/mes por todo si lo contratas a través de nuestro enlace, lo que es un precio realmente bajo a cambio de poder tener una clientela mundial.

La empresa de registro de dominios y alojamientos que te recomiendo y que usaremos en este tutorial es A2Hosting.

Te recomiendo este proveedor, ya que es el que utilizo en mi propia página web y en la de mis clientes y te aseguro que funciona muy bien.

Además, A2Hosting.es uno de los pocos proveedores de Hosting que recomiendan los creadores de WordPress, lo que te garantiza que te tienda online estará guardada en un proveedor de calidad y en un sitio diseñado especialmente para ella.

Si contratas tu dominio y alojamiento a través del siguiente enlace, te harán un 60 % de descuento sobre el precio normal, así que aprovecha y ahorra:

Cupón A2Hosting66 % DESCUENTO
Cupón A2Hosting
Alojamiento web asequible de alta potencia para todas sus necesidades únicas. ¡Empieza ahora! HASTA 20 VECES MÁS RÁPIDO ALOJAMIENTO WEB
Válido hasta septiembre 1, 2020

Paso Nº 2 – Instalar WordPress

Crearemos la tienda online usando la potente herramienta de diseño web WordPress, para ello, antes de todo tenemos que Instalarlo.

Por si no lo sabías, WordPress es un potente Gestor de Contenidos o CMS, con el que las grandes empresas crean su páginas webs.

WordPress es usado por importantes empresas como son:

Mercedes Benz – The New York Times – Sony Music – Katy Perry – Jay-Z – Toyota Motors – Vogue – The Rolling Stones – Usain Bolt – CNN – Sony PlayStation – CBS – Angry Birds – The Walking Dead – Obama.org – Justin Bieber – The Walt Disney Company – Ted – Snoop Dogg – Sylvester Stallone – Jason Mraz – Samsung – General Electric – Star Wars – Bloomberg – MTV – Bata – La Casa Blanca – Forbes – UPS – IBM – eBay – The Home Depot – Tim Ferriss – Revista Fortune – James Bond 007 – Metro de Londres – BBC – Noticias Reuters – Grupo Renault – Blackberry – Flickr – Duracell… Tan solo por poner algunos ejemplos.

Por tanto, tu tienda Online estará creada con las mismas herramientas que usan las grandes multinacionales, lo que te garantiza que partes de una muy buena base.

Por si tienes un poco de curiosidad, que sepas que WordPress:

  • Es usado por más de 75 Millones ( 75.000.000 ) de páginas webs en Internet !
  • 1/3 de todas las webs de Internet están hechas usando WordPress.
  • Cada día se crean más de 50.000 páginas webs usando WordPress como herramienta de diseño.
  • La web principal de WordPress recibe más visitas mensuales que Amazon y Twitter.
  • WordPress es por mucho la plataforma de diseño web más usada en todo el mundo.

En este paso aprenderás lo fácil y rápido que es instalarlo, es como instalar un programa en tu ordenador o una aplicación en tu teléfono móvil. Lo podrás hacer en unos pocos clicks, es rápido y sencillo.

Paso Nº 3 – Instalar Nuevo Tema

El aspecto visual que tiene tu tienda online nada más instalar WordPress deja mucho que desear….
Para resolver esto lo que haremos es instalar un nuevo tema.

Los temas son unos pequeños programas que instalamos en wordpress que se encargan de definir la apariencia que va a tener la tienda online.
Los temas son por así decirlo como la ropa que le pones a tu tienda online para que se vea de una forma u otra.
No te preocupes, este paso también es súper rápido, lo podrás completar en menos de 3 o 4 clicks

Paso Nº 4 – Instalar Plugins

Los plugins son como pequeños programas o aplicaciones que le añaden a tu web más funcionalidades de la que traía por defecto.

Imagínate que los plugins son como las aplicaciones que le instalas a tu teléfono móvil.

Para que te hagas una idea, cuando compraste tu teléfono móvil, este no te traía el Whatsapp ni el Facebook instalado. Si querías tener esas funcionalidades, tuviste que instalarle esas aplicaciones. Pues con WordPress sucede lo mismo, solo que en lugar de llamarse aplicaciones, se les llama plugins.

En nuestro caso, WordPress no nos trae por defecto la funcionalidad de poder vender productos o servicios, pues para poder añadírsela, tenemos que instalar un plugin llamado WooCommerce que es el que nos va a permitir crear y gestionar la tienda.

No te preocupes, que los plugins son muy fáciles de instalar y también se hacen en menos de 3 o 4 clicks, tal cual harías en tu teléfono móvil.

Paso Nº 5 – Crear Página de Inicio

Este paso te va a encantar, ya que es en el que tomarás el primer contacto con el editor visual, el cual te permitirá ponerle los textos e imágenes a tu tienda online justo donde y como tu quieras, todo de forma fácil y visual.

La página de inicio es una de las páginas más importantes de tu tienda online, ya que es la página a la cual entran tus visitantes cuando acceden a tu tienda por primera vez y como sabrás es muy importante dar una primera buena impresión, ya que según lo que el visitante se encuentre en esta pagina determinará si el visitante decide continuar en tu tienda o marcharse.

Por ese mismo motivo le vamos a dedicar una sección para ella sola, donde te explicaré en detalle todo lo que le debes poner a tu web para alcanzar el éxito.

Entre otras cosas, en este paso te enseñaré como añadirle a tu tienda online diapositivas a pantalla completa, categoría de productos, apartado de ofertas, una cuanta atrás para que avises a tus clientes cuando acaban las ofertas, vídeos de fondo, textos animados, tu feed de instagram, las ultimas publicaciones del blog, etc

Este paso viene cargadito de muchísimo contenido que hará que tu web sea excepcional !

Paso Nº 6 – Crear Resto de Páginas

Amarás este apartado, ya que es en el que crearás las diferente secciones de la tienda online con el editor visual.
Crearás apartados como son el apartado de Quienes Somos, el área de Contacto, el de Preguntas Frecuentes, el Blog, etcétera.

Añadirle a tu Tienda Online una sección como la de Quienes Somos hace que tus visitantes tengas más confianza en tu empresa, ya que pueden ver que detrás de ella existe un equipo humano real que la gestiona.

Añadir a tu Tienda Online secciones como la del Blog te dará la posibilidad de conectar y hablar con tu audiencia de las cosas que más te importan y lo podrás hacer dando a tu audiencia contenido fresco y nuevo periódicamente que hable de cosas que le puedan interesar a ti y a el, si lo haces de esta forma podrás construir un negocio online realmente exitoso

El incluir un apartado de contacto en tu tienda online es algo que también genera más confianza en tus visitantes y les predispone más a realizar un compra en tu tienda online, ya que verán que si tienen algún problema con su pedido, tienen un medio por el que  contactar contigo o iniciar una conversación con tu empresa.

En este paso también aprenderlas como añadirle a tu tienda online una sección de Preguntas frecuentes, esto te permitirá responder a preguntas como «¿Ofrecéis envío gratuito..?.», «¿Hacéis envíos internacionales…?», «¿Tenéis cupones de descuento…?», etc

Como te decía antes, este paso te va a gustar mucho, ya que harás todo visualmente pinchando y arrastrando con el ratón y colocando el contenido que quieras justo en la parte que deseas de la web y viendo en todo momento como va quedando el resultado final.

Paso Nº 7 – Configurar Tienda Online

En este paso será en el que configuraremos todos los aspectos de la tienda online, como son los tipos de productos, los precios, impuestos, métodos de pago, métodos de envío, los emails que le llegan a los clientes, etc

Paso Nº 8 – Potenciar las Ventas

Hay ciertas funcionalidades que debería tener toda tienda online que quiera alcanzar el éxito.

En este paso te enseñaré cómo implementar un conjunto de importantísimas funcionalidades extra en tu tienda online, que te ayudarán a aumentar exponencialmente las ventas.

Así que asegúrate de ver el vídeo hasta el final, ya que lo que aprenderás en este paso realmente vale la pena y puede marcar la diferencia entre el fracaso o el éxito de tu tienda online!

Cómo Crear Una Tienda Online 2020 [Paso a Paso]

RECURSOS

DESCARGAR IMÁGENES DE CALIDAD

EDITOR DE IMÁGENES ONLINE

Recuerda seleccionar la opción que pone PIXLR X.

Te recomiendo que redimensiones las imágenes a un tamaño máximo de 1920 px de ancho o 1080 px de alto, esto lo puedes hacer pinchando en el primer icono de la barra lateral Izq, que son como 4 flechas cruzadas (Arrange) -> Resize Image
Cuando guardes las imagen ( pulsando en SAVE ), recuerda ajustar la calidad ( Quality ) hasta que veas que el peso de la imagen sea como mucho entre 250 y 300 KB por cada imagen.

IMÁGENES USADAS EN ESTE TUTORIAL

GENERAR TEXTOS AUTOMÁTICAMENTE

LISTADO DE PLUGINS USADOS EN ESTE TUTORIAL

SHORTCODE  DE WOOCOMMERCE PARA PONER 5 PRODUCTOS EN OFERTA EN LA PÁGINA DE INICIO:

[products limit="5" columns="5" on_sale="true"]

Si en lugar de mostrar los productos en oferta, quieres mostrar por ejemplo, los productos más vendidoslos mejor valorados o los más recientes, el código que tendrás que poner respectivamente sería algo similar a esto: 

[products limit="5" columns="5" best_selling="true"]
[productslimit="5" columns="5" top_rated="true"]
[products limit="5"columns="5" orderby="id" order="DESC"]

Si quieres aprender más sobre lo que puedes hacer con los Shortcodes de WooCommerce, te recomendamos que eches un vistazo a la documentación oficial, donde explican todo y más en detalle. Puedes acceder a ella desde el siguiente enlace: Shortcodes de WooCommerce

CÓDIGOS CSS PARA PONER EL STICKY MENU ( myStickymenu ):

ID que identifica el menú de la web, para poder convertirlo en Sticky:

#site-header

Pega el siguiente código CSS en el Personalizador si quieres que el StickyMenu sea transparente en la Página de Inicio:

Copia este código:
1
2
3
4
5
6
/* Define los estilos del Menu Sticky para la Pagina de Inicio */
#site-header{ background-color: transparent; }
#mysticky-nav.wrapfixed #site-header.transparent-header{
transition: 0.7s;
background-color: #ffffff;
}

CONFIGURAR PLUGIN WP MAIL SMTP

Correo electronico remitentetutoseomind.com

*Forzar remitente del mensaje → Marcar esta opción.
Si no se desea activar, en WP Forms, cambiar el texto {admin_email} del campo «De correo electrónico» por el texto: «tutoseomind.com»

Nombre remitente → Nombre de tu Tienda Online

Ruta de retorno → Activar esta opción

Servicio de correo electrónico →Otro SMTP

Servidor SMTPtutoseomind.com

Cifrado → SSL

Puerto SMTP → 465

TLS Automática → Activo

Identificación → Activar esta opción

Nombre de usuario de SMTPcontacto@tutoseomind.com

Contraseña SMTP → La contraseña que sea

CÓDIGO POLÍTICA DE PRIVACIDAD WPFORMS:
Copia este código:
1
He Leído y Acepto la <a href="/politica-de-privacidad/">Política de Privacidad</a>

CÓDIGOS CSS PARA MEJORAR LA WEB

—————————————————————–

/*Resuelve un conflicto que hay con los productos que tienen galería de imágenes, que provocaba que sus imágenes salgan con mayor tamaño y estropee el diseño visual de la web */
 
.woocommerce ul.products li.product .woo-entry-image-swap .woo-entry-image-main
{
position:absolute;
width:auto;
}
.woocommerce ul.products li.product .woo-entry-image-swap .woo-entry-image-secondary
{
position:relative;
width:auto;
height:auto;
}
—————————————————————–
 
/*Oculta el mensaje que muestra Woocommerce con el stock real de la tienda */
.stock{
display:none;
}
—————————————————————–