Como crear una nueva sección en un template de shopify


Para iniciar a agregar secciones a tu template de shopify es necesario que conozcas perfectamente el administrador de shopify ya que este será tu mejor herramienta, una vez dicho esto comencemos.

Primer paso, iniciamos sesión en el administrador de tu tienda, una vez dentro debemos ir a la sección online store, dando clic en esta opción no abrirá por default la opción gráfica para modificar los temas.

 

 

segundo paso, seleccionar la opción Edit html/css que se muestra a continuación.

 

 

 

Una vez entrando a esta seccion, ahí es donde podemos hacer que nuestra tienda luzca espectacular; en la parte izquierda verán como están acomodadas nuestras carpetas y en esta ocasión nos enfocaremos solo en dos, Templates y Snippets.

 

 

La primera nos indica la estructura del sitio, contiene las paginas principales y nos muestra las reglas de shopify para construcción de templates; con esto podemos incorporar cualquier funcionalidad que nosotros necesitemos.

En la segunda carpeta Snippets se encuentran todas las funcionalidades adicionales del tema, por ejemplo: slider en el home, productos relacionados, social links, etc; una vez que entendemos estos conceptos podemos comenzar a agregar lo que necesitemos o lo que nuestros clientes soliciten.

Ahora, para agregar el snippet, abrimos la carpeta Snippets, debajo tiene la opción “add a new snippet” y le damos clic.

 

 

Después le asignamos el nombre que vaya más adecuado a lo que queremos agregar en este caso el nombre es “test” solo necesitas poner el nombre, la extensión la coloca por default Shopify que es .liquid. 

 

 

Una vez creado, nos abrirÁ un editor de texto en el cual colocaremos nuestro html, esta vez solo colocaremos puro html, en posteriores tutoriales les enseñaremos a acceder a variables y arreglos que nos pone a disposición Shopify, aprendan bien esto que es esencial para nuestros próximos artículos.

 

 

Una vez agregado el html de prueba nos preguntamos ¿cómo puedo hacer que se vea en mi sitio? bueno Shopify nos permite hacer “includes” esto lo hacemos desde los archivos en la carpeta Templates, los nombres de los archivos son muy intuitivos así que no les será muy difícil ubicarlos.

Para esta prueba colocaremos el snippet en el home de nuestro sitio, este es el archivo index.liquid, la maravilla de esto es que no hay que ponerle ninguna ruta solo llamarlo por el nombre, ni siquiera la extensión, ya que Shopify en sus includes todos están dirigidos a la carpeta Snippets y con la extensión .liquid por lo que es todavía más sencillo el agregarlos.

 

 

 Y este es el resultado, así luce en nuestro home, y así como este simple html puedes hacer trabajos tan elaborados como ustedes quieran ya que no solo podemos agregar html sino css y javascript, estos elementos se los mostrare en nuestros siguientes tutoriales.