Aprende a customizar temas de Shopify y mejora tu storefront

Por
Santiago Ervina
· 12/08/2016

Una de las características que ha hecho de Shopify una de las mejores plataformas de comercio electrónico es sin duda su facilidad de uso, en pocos clicks el administrador de una tienda tiene multitud de opciones de personalización disponibles que le permiten mantener en su web el dinamismo y la actividad necesarias para la venta online.

Muchas de las opciones que Shopify incorpora en sus menús de administración son propias del "core" de la plataforma, y están disponibles para todos los usuarios de la misma, sin embargo, hay otras que pertenecen al ámbito del "theme".

Si bien el núcleo es la estructura base de cualquier tienda, el tema es el responsable de darle a cada una su personalidad propia y de definir las características que la diferencian de las demás, en un mercado tan competitivo como la venta por internet, la diferencia, exclusividad y calidad del interfaz ofrecido al usuario es clave para el éxito.

En la Theme Store de Shopify se puede elegir entre una gran variedad de temas, tanto gratuitos (los que ofrecen menos opciones y más sencillas) como de pago, ambos están disponibles para ser descargados e instalados en pocos minutos, sin embargo, si no se hace ninguna variación, podemos encontrarnos con que la tienda no destaca entre las demás o incluso se parece a otras pudiendo generar confusión entre los clientes finales.

Las opciones de personalización del tema permiten hacer un tema más exclusivo y personal, son muy potentes y al mismo tiempo sencillas de usar.

Para acceder a estas opciones el usuario gestor de la tienda tiene que navegar en el menú de administración de Shopify hasta "Sales channel >> Online Stores >> Themes" y haciendo click en "Customize theme" en el tema que quiera personalizar.

La página de configuración del tema a la que se accede dispone de una previsualización de la tienda y de una barra lateral con las opciones de personalización disponibles. Además, esta barra tiene algunas secciones genéricas predefinidas como "Checkout" donde se configuran algunas opciones del proceso de pago.

Lo importante e interesante es que el desarrollador de cada tema puede incluir tantas opciones de configuración como quiera y con propósitos muy variables. Algunos ejemplos de uso serían:

  • Cambiar la foto de fondo de un bloque de la portada.
  • Cambiar el texto y el color de un mensaje que sale en el footer de toda la web.
  • Seleccionar una colección para ser mostrada en un bloque destacado.

Para el primer ejemplo de la lista vamos a suponer que existe un bloque en la portada de la tienda con la clase CSS "destacado-portada", conseguiremos el efecto deseado realizando los siguientes pasos:

1. Crear la opción de configuración.

Haciendo click en la opción del menú "Edit HTML/CSS" entramos en la pantalla de edición de los archivos del tema, hay que buscar la sección "Config", donde encontraremos dos archivos: settings_data.json y settings_schema.json.

Para nuestro propósito nos centraremos en el segundo (si no hay opciones definidas estará vacío, o incluso puede que no exista), en cualquier caso, hemos de tener en cuenta que se trata de un archivo .json y que por tanto debe respetar la sintaxis y estructura de este tipo de archivos, para este ejemplo y con esta única opción de configuración, el contenido del archivo sería:

[
  {
    "name": "Fondo de Bloque de Portada",
    "icon": "header",
    "settings": [
      {
        "type": "image",
        "id": "bg-front-block.jpg",
        "label": "Imagen de fondo",
        "info": "Suba una imagen de 300x400px"
      }
    ]
  }
]

La propiedad "name" es el título de la sección que aparecerá en la barra lateral en "Customize theme" junto con un icono que define en la propiedad "icon" sobre una lista de opciones predefinidas (blog, cart, collection, color, contact, currency, etc.)

Dentro de "settings" se especifica cada campo que aparecerá para ser rellenado por el usuario, en este caso solo habría uno, que es el fichero que se utilizará como fondo del bloque, para cada campo hay una serie de propiedades disponibles:

  • type (Obligatorio). Tipo de control a utilizar.
  • id (Obligatorio). Identificador único interno de este campo, solo se permiten caracteres alfanuméricos, números y guiones.
  • label (Obligatorio). Etiqueta del campo.
  • default (Opcional). Valor por defecto del campo.
  • info (Opcional). Información adicional sobre el campo, aparece como un pequeño tooltip informativo.

Con el código de este ejemplo la opción para subir una foto de fondo para el bloque de portada ya estaría disponible para el usuario, podría subirla y cambiarla tantas veces como quisiera.

2. Utilizar el valor definido por el usuario.

Cuando el usuario guarda cualquiera de las opciones de personalización definidas, el sistema se encarga de guardar cada valor y a partir de ese momento está disponible para ser utilizado en cualquiera de las plantillas liquid del tema.

Para acceder a estos valores, el sistema dispone del objeto settings, cuyas propiedades corresponden con cada unos de los valores definidos, pudiendo utilizarse en cualquier fichero .liquid generalmente utilizando la sintaxis habitual ({{ settings.id_propiedad }}).

La manera de acceder al valor de la propiedad puede variar en función del tipo de campo, en nuestro ejemplo, no es necesario utilizar el objeto settings ya que podemos acceder directamente al asset, la imagen de fondo del bloque de portada se utilizará en el fichero style.liquid.scss:

.destacado-portada {
  background-image: url('{{ 'bg-front-block.jpg' | asset_img_url: 'original' }}');
}

Cuando el "type" de un campo se ha definido como "image" y el usuario guarda una imagen, automáticamente se crea un fichero cuyo nombre es el "id" del campo dentro de la carpeta "Assets" del tema, estando disponible para ser utilizado igual que el resto de ficheros, si el usuario sube otro fichero al campo, el sistema automáticamente actualiza el fichero almacenado, para que allá donde se esté utilizando aparezca el nuevo.

Existen otros tipos de campo, cada uno tiene sus características propias, y en función de lo que se quiera conseguir, se utilizará uno u otro. Los tipos disponibles y la manera de utilizarlos están disponibles en la referencia completa del archivo settings_scheme.json,

Combinando estos campos y valores de personalización con un desarrollo inteligente y creativo, esta herramienta se convierte en un sistema muy potente y flexible que hará que nuestra tienda de Shopify no deje a nadie indiferente, creando ventajas competitivas para diferenciarnos y destacar entre el resto de tiendas del sector.

Compartir