Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. eCommerce

Introducción a Shopify de un diseñador web

by
Length:LongLanguages:
This post is part of a series called Learn How to Build Themes for Shopify.
Getting Started With Liquid; Shopify’s Template Language

Spanish (Español) translation by Mayra Reynoso (you can also view the original English article)

En el transcurso de tres artículos aquí en Tuts+ vamos a ver cómo construir un tema para la plataforma de comercio electrónico alojada en Shopify. Mi objetivo es equiparte con todas las habilidades que necesitarás para empezar, así como mostrarte una serie de formas creativas de hacer que tus temas sean flexibles y poderosos.

Esta serie

shopifycom
Shopify - una plataforma alojada de comercio electrónico basada en temas amigables de diseñador

Esto es lo que cubriremos en los próximos artículos:

  • El programa de socios de Shopify
  • Diseño de comercio electrónico sobresaliente
  • Los conceptos clave que necesitarás para empezar con tu primer diseño de tienda
  • Cómo se construye un tema de Shopify
  • Liquid: el idioma de la plantilla Shopify
  • Técnicas avanzadas para que tus temas sean flexibles y potentes
  • Recursos para llevar tu creación de temas más allá

El programa de socios de Shopify

Antes de empezar, te recomiendo encarecidamente que te registres para obtener una cuenta gratuita de socio Shopify. La creación de temas es 100% gratuita para los diseñadores (las suscripciones solo comienzan cuando tu cliente hace su tienda vivir).

Partners - A free to join programme enabling designers to start building themes
Socios - Un programa gratuito que permite a los diseñadores empezar a construir temas

Tener una cuenta de socio te permite crear tantas tiendas completamente desarrolladas con todas las funciones como necesites. Estos no tienen límite de tiempo y son 100% libres de usar y hacer pruebas con ellas. Incluso puedes tomar pagos ficticios con el fin de probar el flujo de compra completo, que es muy útil cuando muestras tu trabajo a tus clientes.

Diseño de comercio electrónico sobresaliente

Es posible que hayas utilizado Shopify sin darte cuenta. Si alguna vez has comprado un título de A Book Apart, una camiseta de United Pixel Workers, un tatuaje temporal de Tattly, café de Has Bean, o (si puedo ser tan atrevido) has comprado una copia de un libro en el que fui co-autor, entonces has experimentado Shopify.

Como verás en estas tiendas todas se ven muy diferentes. No hay restricciones en términos de cómo puede aparecer tu tienda, 100% depende totalmente de ti y tu imaginación. En 2013 Shopify decidió destacar el gran diseño de comercio electrónico y lanzó los primeros premios Shopify Design Awards. Más de 150 temas fueron presentados y fueron juzgados por tres personas muy respetadas del mundo del diseño web - Jeffrey Zeldman (Fundador de A List Apart, y Happy Cog), Tina Roth-Eisenberg (Fundadora de swissmiss, y Tattly) y Daniel Weinand (cofundador y director de diseño de Shopify).

Los tres temas principales fueron:

  1. Whipping Post
  2. Greats Brand
  3. Goodwin and Goodwin
Greats Brand - A perfect example of the flexibility of Shopify themes
Greats Brand - Un ejemplo perfecto de la flexibilidad de los temas de Shopify

Otro de mis favoritos, y una mención honorífica en los premios, es la tienda Pure Fix Cycles. Además de mostrar algunas maneras agradables de filtrar productos, también inyectan diversión en su diseño, un gran ejemplo es su página de productos de ruedas brillantes.

Todos estos temas no sólo demuestran una gran habilidad de diseño, sino que también destacan la flexibilidad de los temas de Shopify. No hay un HTML prescrito, clases o IDs y no hay restricciones en términos de diseño. Mientras que muchas personas eligen temas premium para sus tiendas, un montón de diseñadores comienzan desde cero. La elección es tuya.

Conceptos clave

Al igual que con todos los sistemas Shopify tiene una serie de conceptos clave que vale la pena entender antes de sumergirnos en un editor de texto. Comencemos por ver cómo organizamos nuestra tienda.

Productos

Cada tienda en línea necesita productos y Shopify no es diferente. Los productos son nuestra unidad base en Shopify y centrales para la construcción de temas.

Esencialmente, un producto es cualquier cosa que desees vender. Cada producto dentro de una tienda tiene una serie de atributos: los cuatro más comunes son el título, la descripción, el precio y una imagen. Otros atributos que un producto puede poseer son el peso, el color y el tamaño. A todos estos se pueden acceder, crear y actualizar a través del administrador en línea.

Shopify Admin - Easy access to products collections and settings
El tablero - Fácil acceso a productos, colecciones y configuraciones

Dentro de Shopify cada producto también puede tener una serie de variantes. De forma predeterminada, cada producto que crees tiene una variante, puedes simplemente agregar más según lo necesites. Usando nuestro ejemplo de camiseta una vez más podríamos decir que tiene tres variantes de color, (negro, blanco y verde) y tres variantes de tamaño (pequeño, mediano y grande). Esto a su vez resultará en que tu puedes vender:

  • Camiseta negra pequeña
  • Camiseta negra mediana
  • Camiseta negra grande
  • Camiseta blanca pequeña
  • Camiseta blanca mediana
  • Camiseta blanca grande
  • Camiseta verde pequeña
  • Camiseta verde mediana
  • Camiseta verde grande

También tienes la capacidad de establecer detalles específicos para cada combinación. Por ejemplo, podrías establecer un precio diferente para la camiseta verde pequeña en comparación con la camiseta verde grande.

Editing variants is done via the product admin screen
La edición de variantes se realiza a través de la pantalla de administración del producto

Las variantes son una característica muy poderosa de Shopify y te permiten mostrar tus productos en una variedad de maneras interesantes dentro de sus plantillas.

Colecciones

Una vez que hayas añadido productos a tu tienda, es posible que desees clasificarlos en colecciones. Describo una colección como una "agrupación lógica de productos". Otras plataformas pueden utilizar el término categoría.

Las colecciones no son necesarias, pero son muy útiles. Cualquier producto puede encontrarse en una o varias colecciones, lo que te permite clasificar tus productos de manera efectiva. Como digo, los productos no tienen que pertenecer a una colección, es puramente opcional.

Collections - A logical grouping of products
Colecciones - Una agrupación lógica de productos

Si tomamos Best Made Co. como ejemplo, podemos ver que utilizan las siguientes colecciones para categorizar sus productos:

  • Ropa
  • Accesorios e Insignias
  • Bolsas y Fundas
  • Libros y Mapas
  • Artículos para el hogar
  • Suministros de campamento

Es totalmente posible que una bolsa pueda encontrarse en las colecciones "Bolsas y Fundas" y "Suministros de campamento".

Además de definir colecciones manualmente Shopify ofrece una serie de otras formas en las que podemos añadir productos automáticamente. Un ejemplo de esto podría ser incluir todos los productos donde el precio es inferior a $10. Hay muchos más atributos que podemos usar:

  • Título del producto
  • Tipo de producto
  • Proveedor de producto
  • Precio del producto
  • Etiqueta del producto
  • Comparar a precio
  • Peso
  • Stock de inventario
  • Título de variante

Para las comparaciones podemos utilizar lo siguiente:

  • es igual a
  • es mayor que
  • es menor que
  • comienza con
  • termina con
  • contiene

Estos se conocen como "colecciones inteligentes" dentro de la interfaz de administración. Puedes organizar las collecciones de las siguientes maneras:

  • Manualmente
  • Por mejor vendido
  • Alfabéticamente (A-Z)
  • Alfabéticamente (Z-A)
  • Por precio (de mayor a menor)
  • Por precio (de menor a mayor)
  • Por fecha (de más reciente a más antiguo)
  • Por fecha (de más antiguo a más reciente)

Por último, al igual que los productos, las colecciones tienen atributos que podemos editar desde el administrador de Shopify, incluyendo un título, descripción e imagen.

Etiquetas de producto

Además de las colecciones, también podemos utilizar etiquetas para añadir más metadatos a nuestros productos. Un uso común de las etiquetas es ayudar a filtrar una colección. Vamos a demostrar esto con un ejemplo usando la tienda Pure Fix Cycles:

Filtering via tags as seen on the Pure Fix Cycles store
Filtrado a través de etiquetas como se ve en la tienda Pure Fix Cycles

Como se puede ver en la imagen anterior, estamos en la colección XXX y somos capaces de filtrarlo utilizando la lista desplegable de etiquetas.

Las etiquetas también son una forma muy útil de relacionar los productos entre sí. Veremos cómo mostrar "productos relacionados" en más profundidad más adelante en la serie.

Temas

Con los conceptos básicos de los productos, colecciones y etiquetas entendidos es hora de empezar a ver cómo construimos temas. La buena noticia es que si alguna vez has construido un sitio web (y asumo que la mayoría de ustedes leyendo lo han hecho, de alguna forma) entonces la creación de un tema Shopify no resultará en ninguna sorpresa no deseada.

Cada tema de Shopify se compone de cuatro elementos clave:

  1. Archivos HTML (con extensión .liquid)
  2. CSS
  3. JavaScript (opcional)
  4. Imágenes

Estos archivos están perfectamente organizados en cinco carpetas. Como verás a continuación, sólo hay un puñado de archivos necesarios para empezar. Esta es la estructura básica de carpetas de un tema de Shopify:

├── assets │ ├── screen.css.liquid │ ├── site.js.liquid ├── config │ ├── settings.html ├── layouts │ ├── theme.liquid ├── snippets ├── templates │ ├── 404.liquid │ ├── article.liquid │ ├── blog.liquid │ ├── cart.liquid │ ├── collection.liquid │ ├── list-collections.liquid │ ├── page.liquid │ ├── product.liquid │ ├── product.liquid │ ├── search.liquid

He añadido mi propio tema de inicio básico a GitHub - no dudes en tomar una copia para tus propios proyectos.

Vale la pena señalar que los temas de Shopify no permiten estructuras de carpetas anidadas. Algo más que puedes notar es que todos los archivos HTML de una barra NO tienen la extensión de .html habitual. En los temas de Shopify casi todos los archivos centrados en HTML tienen una extensión .liquid - por ejemplo, product.liquid e index.liquid.

El Liquid en .liquid es el lenguaje de plantillas Shopify. Fue desarrollado por los creadores originales de Shopify y ahora está disponible como un proyecto de código abierto en GitHub. Es posible que ya te hayas encontrado con él, ya que se puede encontrar en muchos proyectos, incluyendo Mixture y SiteLeaf.

Echemos un vistazo más detallado a las carpetas y su rol en un tema.

Assets

La carpeta assets es el hogar de todas tus imágenes, JavaScript y archivos CSS.

Muchas personas, yo incluido, a menudo separamos archivos en subcarpetas basadas en el tipo, es decir, una para CSS, una para imágenes y otra para JavaScript. Ten en cuenta que esto no es posible en un tema de Shopify; todos los archivos deben estar en la raíz de la carpeta assets. Además, los archivos que cargues con la configuración del tema a través del administrador de Shopify (que veremos más adelante) se añadirán a esta carpeta.

Config

Al trabajar en tu primer tema es posible que no necesites encontrar la carpeta config. Sin embargo, a medida que avances con tu construcción de temas, la encontrarás increíblemente útil. Esta carpeta es el hogar del archivo settings.html. Notarás que este es el único archivo que sí termina en una extensión de .html.

Si lo abres en un editor de texto verás que un típico archivo settings.html contiene elementos de formulario como campos de carga de archivos, casillas de verificación, listas de selección y entradas de texto. Este archivo permite a los diseñadores de temas crear campos de entrada para que los comerciantes editen datos relacionados con su tema.

Para explicar esto más adelante digamos que queríamos hacer posible cambiar el color de fondo de la tienda. Podríamos hacer esto agregando una entrada de texto en nuestro archivo settings.html de la siguiente manera:

El valor introducido, o el valor predeterminado especificado en el atributo value, ahora es accesible en nuestras plantillas utilizando la variable global de settings (disponible en cada plantilla) de la siguiente manera:

No te preocupes si esto se siente un poco extraterrestre ahora, al final de la serie tendrá perfecto sentido.

Themes can be edited via the online editor
Los temas se pueden editar a través del editor en línea

Layouts

La carpeta layout normalmente contiene un archivo llamado theme.liquid, aunque puede contener más, que discutiremos más adelante.

Los diseños son muy potentes, ya que nos permiten definir todos los elementos comunes de nuestro sitio en un solo archivo. Cuando se solicita una página, Shopify ajusta este archivo alrededor de la micro plantilla correspondiente para presentar una sola página.

Uno de los principales beneficios de los diseños es que nos permiten mantener nuestro código agradable y DRY (No te repitas), nos permite hacer cambios globales muy fácilmente y hace que trabajar con nuestras micro plantillas internas sea menos complicado ya que estamos tratando con secciones más pequeñas de código.

Hay dos etiquetas Liquid importantes que debes incluir en un archivo de diseño de Shopify. El primero es {{ content_for_header }}. Esta variable debe colocarse en la sección del archivo de diseño. Esta etiqueta permite a Shopify insertar cualquier código necesario en el encabezado del documento, como un script para el seguimiento de estadísticas y archivos CSS para la barra de administración de "sesión iniciada"

La segunda etiqueta es {{ content_for_layout }}. Esto se encuentra generalmente en el medio de la plantilla en el punto donde deseas que aparezca tu micro plantilla.

Snippets

Los snippets son archivos que contienen fragmentos de código reutilizable, estos también tienen la extensión de archivo .liquid.

A menudo encuentro que los diseñadores de temas usan fragmentos de código de varias maneras diferentes. Personalmente, el enfoque que tomo es el siguiente:

  • El código aparece en cada página del sitio, coloca el código en un archivo de diseño
  • El código aparece solo una vez en una página específica: coloca el código en la micro plantilla correspondiente
  • El código aparece en más de una página, pero no en todas las páginas: coloca el código en un archivo de fragmento de código

Ejemplos de buen uso de fragmentos de código incluyen enlaces sociales y bloques de paginación. Los fragmentos de código son fáciles de incluir en nuestras plantillas usando la etiqueta Liquid {% include 'snippetname' %}. Ten en cuenta que no tienes que agregar la extensión .liquid al apuntar al archivo.

Templates

Finalmente, llegamos a la carpeta en la que pasarás la mayor parte de tu tiempo. A menudo me refiero a los archivos en la carpeta templates como micro plantillas simplemente porque son pequeños fragmentos de código que se inyectan en nuestro archivo de diseño.

Si la mayoría de tus sitios de etiquetado están contenidos en un archivo de diseño theme.liquid, estas micro plantillas son a menudo muy pequeñas.

Aquí está una lista de las micro plantillas que componen un tema y su uso:

  • 404.liquid — Se utiliza cuando una página "no se encuentra"
  • article.liquid — La página de artículo de una entrada de blog
  • blog.liquid — La página de listado de archivos para un blog
  • cart.liquid — Una página de lista de todos los artículos en tu carrito
  • collection.liquid — Una página de lista de todos los productos de una colección especificada
  • index.liquid — La "página de inicio" que puedes personalizar para mostrar uno o más productos, elementos de blog y colecciones
  • list-collections.liquid - Una página de lista para todas tus colecciones de productos
  • page.liquid — Una página básica para el contenido, ideal para términos y condiciones, sobre páginas, etc.
  • product.liquid — Se utiliza para mostrar un producto especificado
  • search.liquid — La plantilla para mostrar los resultados de búsqueda

Asignación de plantillas a direcciones URL en Shopify

Como verás, hay un total de diez micro plantillas en la carpeta templates. Afortunadamente, están bien nombradas por lo que, con suerte, debe quedar claro que es lo que hacen cuando se trabaja con ellas.

La última pieza del rompecabezas es saber cuándo se representan estas plantillas dentro de una tienda. En realidad es bastante directo.

Shopify determina qué plantilla se muestra en función de la URL solicitada. Si alguna vez has utilizado uno de los marcos de desarrollo populares, es posible que estés familiarizado con el concepto de enrutamiento. Shopify tiene su propio sistema de enrutamiento interno y es esto lo que determina qué plantilla se envía al navegador.

Esta es una descripción general de qué plantilla se representa según lo determinado por la dirección URL:

  • /thisisntarealurl → 404.liquid
  • /blogs/{blog-name}/{article-id-handle} → article.liquid
  • /blogs/{blog-name} → blog.liquid
  • /cart → cart.liquid
  • /collections → list-collections.liquid
  • /collections/{collection-handle} → collection.liquid
  • /collections/{collection-handle}/{tag} → collection.liquid
  • / → index.liquid
  • /pages/{page-handle} → page.liquid
  • /products → list-collections.liquid
  • /products/{product-handle} → product.liquid
  • /search?q={search-term} → search.liquid

Los elementos entre { } denotan una variable que tendrá un impacto en los datos cargados en una plantilla. Por ejemplo, si tomamos el patrón de url /collections/{collection-handle}  se presentaría un conjunto diferente de datos si tuviéramos /collections/bikes en comparación con /collections/cars.

Como puedes ver, varios patrones de URL diferentes comparten el mismo archivo de plantilla, por ejemplo /products y /collections presentarán la plantilla list-collections.liquid.

Del mismo modo , /collections/, /collections/{collection-handle}/ y /collections/{collection-handle}/{tag} hacen uso de collection.liquid.

A continuación...

Ahora que tenemos una sólida comprensión de los conceptos clave asociados con Shopify es el momento de pasar a más asuntos relacionados con el código.

En la siguiente parte de esta serie te presentaré Liquid, el idioma de la plantilla Shopify, y te mostraré cómo puedes empezar a rellenar fácilmente tus micro plantillas con datos de tu tienda online. Mientras tanto, si deseas obtener más información, un buen lugar para empezar es shopify.com/fordesigners.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.