Accentsconagua
Share
Como algunos de ustedes pueden saber de mis artículos anteriores, Shopify es una plataforma de comercio hospedada basada en temas que le permite construir tiendas en línea. Ha estado creciendo constantemente en los últimos años y hoy es la plataforma detrás de más de 400,000 empresas en aproximadamente 175 países..
La plataforma de Shopify está en constante evolución y, durante los últimos meses, se han lanzado una serie de características clave, dirigidas específicamente a los desarrolladores de aplicaciones y temas. En este artículo, veremos una selección de estas nuevas características y conjuntos de herramientas que incluyen:
Muchos de los siguientes ejemplos discutirán Líquido. Liquid es el lenguaje de plantillas que permite a los desarrolladores de temas usar marcadores de posición y construcciones lógicas en sus plantillas que se reemplazarán con los datos de la tienda en vivo cuando se solicite y se represente una página. Utiliza una sintaxis simple que permite la salida (por ejemplo, el título de un producto) y la lógica (por ejemplo, una para lazo). No voy a entrar en demasiados detalles aquí, pero puedes ver mi screencast de 25 minutos que incluye muchos más detalles sobre cómo funciona Liquid.
Y mientras esté aquí, también puede interesarle la siguiente publicación de inspiración, para los temas disponibles en Themeforest:
Comencemos observando uno de los principales cambios relacionados con el tema que ocurrieron recientemente: el img_url Filtro de liquido Hasta hace poco, las imágenes se representaban en función de un conjunto de tamaños nombrados predefinidos. Por ejemplo:
product.featured_image | img_url: 'grande'
Aquí estamos solicitando la imagen destacada para el producto en tamaño. grande. Esto, suponiendo que la imagen original tuviera un lado igual o mayor que 600px, renderizaría la imagen con el más largo de los dos ejes siendo 600px.
Estos tamaños con nombre ahora están en desuso y, aunque aún funcionarán, fueron reemplazados por un nuevo conjunto de parámetros que incluyen tamaño, cultivo, escala, y formato. Esto ahora hace posible realizar una gran cantidad de manipulaciones relacionadas con la imagen que antes no estaban disponibles para los desarrolladores de temas de Shopify..
Estaré usando el img_url Filtro líquido en estos ejemplos, pero las técnicas también funcionarán con los siguientes objetos relacionados con otras imágenes:
Comencemos por ver cómo podemos redimensionar una imagen. Para hacer esto, reemplazamos la imagen ahora en desuso. nombre con un tamaño específico en píxeles. Aquí hay un ejemplo:
product.featured_image | img_url: '450x450'
El uso de la sintaxis anterior ahora pone el control de las dimensiones de la imagen en sus manos: aquí hemos especificado el ancho y el alto (en ese orden).
También puede especificar sólo un ancho:
product.featured_image | img_url: '450x'
o solo una altura:
product.featured_image | img_url: 'x450'
Al especificar un solo valor, Shopify calculará la dimensión restante en función del tamaño de la imagen original, manteniendo intacta la relación de aspecto de la imagen original.
Volviendo a nuestro ejemplo original, puede pensar que resultaría en una versión de 450x450 de su imagen renderizada. Esto, sin embargo, no siempre es el caso.
Esta solicitud resultaría en un cuadrado perfecto, solo si se cumplen las dos condiciones siguientes:
Si ambas condiciones son ciertas, entonces se representaría una imagen cuadrada de 450x450. De lo contrario, Shopify lo redimensionará usando la misma lógica como si solo hubieras especificado la altura o el ancho. El lado más largo gana en esta situación y se escala en consecuencia.
Para crear imágenes cuadradas, puede utilizar el parámetro de recorte para asegurarse de que las dimensiones de la imagen resultante coincidan con las dimensiones solicitadas. Si la imagen completa no se ajusta a las dimensiones solicitadas, el parámetro de recorte especifica qué parte de la imagen se mostrará. Hay tres opciones válidas:
Esta funcionalidad ha estado disponible desde finales de 2016, pero a principios de 2017 se lanzó una actualización que agregó aún más flexibilidad. Los temas disponibles en la tienda de temas de Shopify, incluido el tema premium de Empire que se muestra a continuación, hacen uso de estas técnicas. Instalar un tema gratuito es una excelente manera de aprender más sobre cómo implementar estas ideas.
srcset para describir cómo puedes aprovechar esto en tus propios temas:
% para el producto en collection.products% % assign image = product.featured_image%% endfor%
En este ejemplo, estamos usando el asignar Función líquida para crear una variable llamada. imagen es igual a la imagen destacada de los productos vistos actualmente (que se configura en el administrador de Shopify). Entonces podemos usar la lógica líquida para crear nuestro srcset declaraciones utilizando, en este caso, la anchura propiedad:
% if image.width> 640% image.src | img_url: '640x' 640w % endif%
La buena noticia es que los desarrolladores de temas no deben preocuparse por volver a cargar todas sus imágenes, ya que Shopify ha indexado cada imagen en la plataforma..
Otros dos parámetros que vale la pena discutir son escala y formato. El parámetro de escala le permite especificar la densidad de píxeles de la imagen. Puede escalar 2x o 3x según sus necesidades:
product.image | img_url: '400x400', escala: 2
los formato El parámetro le permite especificar qué formato de archivo usar para la imagen. Actualmente, puede especificar jpg o pjpg (JPEG progresivo):
product.image | img_url: '400x400', formato: 'pjpg'
También puede aprovechar esta técnica para las imágenes que residen en la carpeta de activos de su tema. Para hacer esto, utiliza la asset_img_url filtrar. Aquí hay un ejemplo que también hace uso de la img_tag Filtro que dará lugar a una forma completa. img Elemento que se representa en la plantilla:
logo.jpg '| asset_img_url: '300x' | img_tag
Estos nuevos filtros de manipulación de imágenes y sus propiedades de imagen finalmente hacen posible que sea lo más flexible posible para tratar las imágenes, la dirección de arte y ser amigable con los planes de datos de los usuarios finales..
A finales de 2016 Shopify presentó "Secciones". Esta nueva función permite a los desarrolladores de temas crear una interfaz de administración personalizada que permite a los propietarios de tiendas agregar, reordenar y eliminar fácilmente secciones de contenido como productos, presentaciones de diapositivas, videos o colecciones de productos. Estos son casos de uso comunes, pero literalmente puede usar esta funcionalidad para permitir a los propietarios de tiendas agregar y editar cualquier tipo de contenido. Todos los cambios en el administrador se pueden ver en tiempo real y, una vez guardados, estarán disponibles en la tienda..
Las secciones se pueden incluir estáticamente en las plantillas de un tema (como el encabezado y el pie de página), o se pueden agregar y eliminar de forma dinámica, a través de la interfaz de administración, en la página de inicio de un tema. En el ejemplo anterior, que veremos en breve, puede ver cómo podemos editar una sección estática que aparecerá en el pie de página de la tienda. También notará el botón "Agregar sección" que nos permite agregar secciones dinámicas, más adelante en la página de inicio.
Las plantillas de sección residen en la nueva carpeta de secciones y se pueden referenciar de forma similar a los fragmentos. Si nuestro archivo estuviera ubicado en section / promotion.liquid, lo haríamos como sigue:
% sección "promoción"%
Nota: no necesitas el .líquido extensión como es común con fragmentos de temas de Shopify. Veamos un ejemplo para ayudar a aclarar el poder de las secciones. El siguiente es el contenido de secciones / footer.liquid:
section.settings.title
section.settings.description
% schema% "name": "Footer Promotion", "settings": ["id": "title", "type": "text", "label": "Promotion Title", "default": "Title", "id": "description", "type": "richtext", "label": "Agregue su descripción a continuación", "default": "Añada su descripción aquí
"] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Si está familiarizado con la configuración del tema de Shopify, algunos de estos pueden parecer muy familiares. Comprende una mezcla de HTML, marcadores de posición líquidos y JSON similar a la que se encuentra en settings_schema.json. Por cierto, la funcionalidad de settings_schema.json aún permanece: las secciones solo agregan una capa adicional de funcionalidad.
En la parte superior de la plantilla se encuentra el resultado HTML que me gustaría generar cuando la plantilla encuentra la sección en el momento del procesamiento. Dentro de cada uno de los h1 y pag Los elementos son marcadores de posición líquidos que utilizan el nuevo section.settings. [x] sintaxis de salida. En nuestros ejemplos, nuestra plantilla de sección buscará los datos correspondientes a section.settings.title y section.settings.description.
Hasta ahora, es agradable y fácil, pero ¿cómo sabe Shopify con qué rellenar estos marcadores de posición? Todo esto se reduce al JSON que mencioné anteriormente, ubicado entre la apertura y el cierre % schema% etiquetas.
"name": "Footer Promotion", "settings": ["id": "title", "type": "text", "label": "Promotion Title", "default": "Title", "id": "description", "type": "richtext", "label": "Agregue su descripción a continuación", "default": "Añada su descripción aquí
"]
Para que nuestra sección aparezca en el área "Personalizar tema" del administrador de la tienda, necesitamos asignarle un identificador: lo hacemos definiendo el valor de "nombre" en el nivel superior del JSON.
A continuación, tenemos el nodo de configuración que tiene, en este ejemplo, dos subnodos. Ambos contienen propiedades de carné de identidad, tipo, etiqueta, y defecto. Cada uno de estos, dependiendo de su valor, regirá cómo se representa la interfaz de administración. Echemos un vistazo a cada uno a su vez:
Una cadena de texto que será utilizada internamente. Vale la pena señalar que, si bien las ID deben ser únicas en un archivo de sección, no tienen que ser únicas en todos los archivos de sección. Como tal, está perfectamente bien tener una carné de identidad de título en múltiples archivos de sección. La configuración de la sección tampoco entrará en conflicto con la configuración en settings_schema.json.
Esto representa el control que se representará dentro del administrador. Las opciones más utilizadas son las siguientes:
% endfor% texto: Campos de texto de una sola líneatextarea: Áreas de texto multilíneaTexto rico: Un editor de texto enriquecidoimage_picker: Subidas de imágenesradio: Botones de radioseleccionar: Desplegables de seleccióncaja: Casillas de verificaciónAlgunos de estos requieren JSON adicional para trabajar. Por ejemplo, el control de selección requiere opciones para completarlo. Más información sobre cómo funcionan estos, así como otros controles que tal vez quiera considerar, están disponibles en los documentos de Shopify..
Esto representa la etiqueta HTML que se generará en el administrador sobre su control.
Esta configuración le permite agregar valores de marcador de posición al control. Vale la pena señalar que estos son los valores que se utilizarán hasta que el propietario de la tienda haya actualizado la sección..
Mi ejemplo es bastante simple y creará dos controles. El primero es un campo de texto de una sola línea que se representará en la h1 En la plantilla, el segundo es un cuadro de texto enriquecido que ofrece las opciones de negrita, cursiva y URL..
Hay muchas otras opciones que puede usar para modificar el administrador de su tienda, incluido el agregado de controles personalizados para URL, colecciones y listados de productos, así como también HTML personalizado. No los veremos a todos en este artículo, pero los invito a profundizar en las posibilidades..
También notará que puede agregar CSS y JavaScript personalizados a los archivos de sección usando las siguientes etiquetas de Liquid:
% stylesheet% % endstylesheet%
% javascript% % endjavascript%
Podría estar pensando que esto podría agregar un montón de CSS y JavaScript en línea potencialmente inflados a su tema. La buena noticia es que Shopify concatena todos los CSS y JS en un solo archivo que se inyecta a través del Líquido. content_for_header marcador de posición La plataforma garantiza que solo se incluya una sola instancia, incluso si esa sección se usa varias veces en una página. Más información sobre cómo se ejecutan los scripts está disponible en los documentos de Shopify.
Una vez que haya configurado sus controles y nombres en el archivo JSON, podrá incluir la sección en cualquier plantilla relevante. Las secciones se pueden agregar a un archivo de diseño (el aspecto externo de una página) o a un archivo de plantilla individual. El administrador de Shopify mostrará los controles de forma contextual: es decir, solo cuando se vea la plantilla relevante en el editor de "personalizar tema". Cambiar los valores resultará en una actualización en tiempo real en el administrador: esta es una excelente manera de ver cómo las enmiendas afectarán el diseño antes de actualizar y publicar en vivo.
Si observa el HTML renderizado, notará que las secciones están envueltas en un div elemento:
El id de la div toma el formato de
shopify-section- [id], donde id es una identificación única para ese elemento para la página, y sin especificar agrega una clase deshopify-section. También puede agregar su propia clase al elemento div especificando un valor de clase en su configuración. Aquí es cómo se vería nuestro ejemplo anterior:"id": "título", "tipo": "texto", "Clase": "título", "etiqueta": "Título de la promoción", "predeterminado": "Título"Esta adición resultaría en lo siguiente:
Las secciones son una excelente adición a los temas de Shopify, ya que permiten a los desarrolladores de temas habilitar configuraciones contextuales en toda la tienda. Sin embargo, realmente entran en juego cuando trabajan en conjunto con la nueva funcionalidad de bloques..
3. Bloques
Los bloques se construyen sobre el concepto de las secciones y permiten a los propietarios de tiendas agregar varias secciones a la página de inicio de una tienda. Echemos un vistazo a cómo podemos hacer uso de los bloques para agregar la capacidad de agregar un número de cuadros promocionales a la página de inicio. Aquí está el archivo de ejemplo con el que trabajaremos:
% para el bloque en la sección.blocks% % if block.type == "promo-box"%block.settings.title
block.settings.description
% elsif block.type == "seleccionador de imagen"%% endif% % endfor% % schema% "name": "Bloques promocionales", "max_blocks": 5, "presets": ["name": "Bloques promocionales", "category": "Contenido de la página de inicio personalizado"], "bloques": ["tipo": "caja de promo", "nombre": "Caja promocional", "límite": 1, "configuración": ["id": " title "," type ":" text "," label ":" Title "," default ":" your title here ", " id ":" description "," type ":" textarea "," label " : "Descripción", "predeterminado": "su descripción aquí"], "tipo": "selector de imagen", "nombre": "Imagen de promoción", "configuración": ["id": "promoción -imagen "," tipo ":" image_picker "," label ":" Promo Image "]] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
Seré honesto, me tomó un poco más de tiempo entender cómo funcionan los bloques. Sin embargo, una vez que entienda cómo encajan las piezas, se abrirá un nuevo conjunto de posibilidades para el desarrollo de su tema..
Esencialmente, la página de inicio se puede componer de varias secciones con cada sección capaz de contener múltiples bloques. El propietario de la tienda puede luego reordenar estos bloques para crear un diseño que mejor se adapte a sus necesidades. Veamos cómo difiere esto del ejemplo anterior para ayudar a aclarar algunos conceptos..
En primer lugar te darás cuenta de que hay un líquido.
parabucle en la parte superior de la plantilla:% para el bloque en la sección.blocks% % if block.type == "promo-box"%block.settings.title
block.settings.description
% elsif block.type == "promo-image"%Como estos elementos múltiples están a la merced del propietario de la tienda, nosotros, como desarrolladores de temas, no tenemos forma de saber qué necesitamos para producir. Por lo tanto, necesitamos utilizar una estructura de bucle líquido, en este caso un
parabucle, que nos permite recorrer en iteración todos los bloques presentes dentro de una sección en particular y generar los datos relevantes.En el fragmento de arriba verá que estoy usando un simple
si / elsifdeclaración que comprueba el tipo de bloques actual. Podemos establecer el tipo en el esquema nosotros mismos como veremos en breve. En este ejemplo, usamoselsifpara estar doblemente seguro del tipo que estamos verificando. Si solo tuviera dos tipos de bloques distintos, como lo hacemos en este ejemplo, podría simplementemáscomo saben, es la única otra alternativa: eso no hace daño ser más defensivo.Dependiendo de nuestro tipo, se emitirá una sección diferente de HTML. Para generar el valor asociado con el bloque usamos la siguiente sintaxis:
block.settings. [id]
[carné de identidad]representa el ID dado a ese elemento en particular en nuestro esquema que cubriremos a continuación.Al pasar al esquema, notará algunos elementos familiares y algunos no familiares. Comencemos mirando la parte inicial:
"nombre": "Bloques promocionales", "max_blocks": 5, "ajustes preestablecidos": ["nombre": "Bloques promocionales", "categoría": "Contenido de página de inicio personalizado"]Echemos un vistazo a cada parte a su vez:
"nombre": "Bloques promocionales": El nombre que aparecerá para este grupo de controles en el administrador de Shopify"max_blocks": 5: El número total de bloques que pueden aparecer en esta sección. Esto funciona al unísono con la configuración de límite de cada bloque que veremos más adelante. Una vez que se haya alcanzado el número máximo de bloques, no podrá agregar más en el administrador.."presets": Una matriz de ajustes por defecto para la sección dinámica. En el ejemplo anterior, queremos que nuestro elemento dinámico aparezca bajo el título de "Bloques promocionales" y en la categoría de "Contenido de página de inicio personalizado". El valor de la categoría nos permite agrupar diferentes secciones en un grupo en el administrador.Una vez que hemos definido el
nombre,max_blocks, y los valores preestablecidos podemos dirigir nuestra atención a los controles que nos gustaría que aparezcan en el administrador. Estos se definen en la sección de bloques del esquema:"blocks": ["type": "promo-box", "name": "Promotional Box", "limit": 1, "settings": ["id": "title", "type": " text "," label ":" Title "," default ":" your title here ", " id ":" description "," type ":" textarea "," label ":" Description "," default " : "su descripción aquí"], "type": "promo-image", "name": "Promo Image", "settings": ["id": "promo-image", "type": "image_picker", "label": "Promo Image"]]Cada bloque tiene una serie de valores predefinidos:
"tipo": Un nombre dado a este grupo particular de controles. Esto puede ser cualquier cosa que quieras, pero lo ideal es que se explique por sí mismo.."nombre": El nombre de este grupo particular de controles que le gustaría que aparezca en el administrador"límite": El número de veces que desea que este grupo particular de controles, es decir, este bloque, aparezca en la sección. En breve lo veremos.Una vez que haya definido estos ajustes preestablecidos, puede pasar a definir los controles que desea que aparezcan en el administrador. Estos se definen en la configuración:
"settings": ["id": "title", "type": "text", "label": "Title", "default": "your title here", "id": "description", "type": "textarea", "label": "Description", "default": "su descripción aquí"]En nuestro ejemplo, tenemos dos tipos de bloques potenciales que podemos agregar a esta sección. El primero es el tipo de bloque.
caja de promoy el segundo es el tipo de bloqueimagen promocional: los dos que nos definimos.Cada bloque también puede definir su propio conjunto de configuraciones que puede consistir en uno o más controles. En el ejemplo anterior, el bloque de tipo
caja de promoTiene dos controles que aparecerán cuando se agreguen a la sección. El primero es un campo de texto y el segundo es un campo de texto.textarea. Por alguna razón los bloques no pueden usar elTexto ricoeditor que utilizamos en nuestro ejemplo anterior, pero unatextareale permitirá agregar HTML según sea necesario. Al igual que con las secciones estáticas, también debemos definir ycarné de identidad,tipo,etiqueta, ydescripción.Hay varios tipos disponibles que incluyen:
texto: Campos de texto de una sola líneatextarea: Áreas de texto multilíneaimage_picker: Subidas de imágenesradio: Botones de radioseleccionar: Desplegables de seleccióncaja: Casillas de verificacióndistancia: Controles deslizantes de rangoEn el ejemplo anterior, también hemos definido un control de imagen usando el
image_pickervalor. Esto permitirá que el propietario de la tienda cargue una imagen o elija una que ya se haya cargado en la tienda. Como esto tiene su propio tipo, nombre y configuración, el selector de imagen aparecerá como otra opción que el propietario de la tienda puede agregar a esta sección dinámica.Mencioné anteriormente que el
caja de promoel bloque tiene un valor límite de 1. Esperamos que también recuerdes que definimos que la cantidad máxima de bloques en esta sección es 5. Por lo tanto, en este escenario, es posible tener una sección que consiste en:
- 1 “promo-box” y 4 “promo-images”
- 5 “imágenes promocionales”
Una vez que se haya alcanzado cualquiera de las combinaciones, no podrá agregar bloques adicionales a la sección a menos que elimine un bloque existente.
Una vez que tenga su plantilla y esquema listos, y cualquier CSS y JavaScript adicional, deberá agregar un último fragmento de código a la plantilla index.liquid de su tema para activar la funcionalidad del bloque. Añadiendo
content_for_indexto index.liquid Shopify sabe que debe incluir cualquier sección que tenga uno o más ajustes preestablecidos definidos. Cada ajuste preestablecido se convierte en una sección dinámica que un comerciante puede agregar a la página de inicio de su tema..En la imagen de abajo podrás ver el resultado final. Después de hacer clic en el administrador, podemos agregar nuestros enlaces o bloques promocionales a la sección dinámica. En este caso, elegí Bloques promocionales y, posteriormente, puedo agregar bloques adicionales, pero solo imágenes de promoción, ya que especificamos un límite de 1 en nuestro esquema para el tipo "Caja promocional".
Vale la pena señalar que no solo puede reordenar los bloques dinámicos dentro de una sección, sino que también puede reordenar las secciones principales en la página de inicio como lo considere oportuno. Una cosa para recordar es que hay un límite de 25 secciones que se pueden agregar a la página de inicio.
Las secciones estáticas y dinámicas, y sus bloques subsiguientes son una herramienta muy poderosa. Me tomó un tiempo entender realmente los conceptos, pero una vez que hiciste clic, empiezas a apreciar realmente el potencial que ofrecen..
4. Kit temático y pizarra
Una pregunta que los desarrolladores de temas de Shopify por primera vez me preguntan es cuál es la mejor manera de configurar un entorno de desarrollo para que funcione con la plataforma: hoy hay dos grandes opciones que lo pondrán en marcha..
El año pasado, el equipo de temas de Shopify lanzó Shopify Theme Kit. Theme Kit es una única herramienta de línea de comandos binarios (funciona en Windows, Linux y macOS) que, una vez instalado, le permitirá:
- Sube temas a múltiples entornos.
- Cargar y descargar los recursos del tema
- Esté atento a los cambios locales y cárguelos automáticamente en la plataforma Shopify
El Kit de temas permite a los desarrolladores de temas trabajar con sus herramientas familiares (editor de texto, preprocesadores, etc.) y tener los cambios sincronizados en segundo plano en una tienda de desarrollo de Shopify. Si no ha visto Shopify desde una perspectiva de creación de temas antes de entonces, es posible que no esté al tanto de las tiendas de desarrollo..
Esencialmente, son tiendas Shopify con todas las funciones con una diferencia: no puede realizar pagos reales. Sin embargo, para que pueda demostrar el flujo de pago completo a un cliente, puede agregar una "pasarela de pago ficticia". Puede crear tantas tiendas de desarrollo como necesite a través de una cuenta de socio gratuita. Una vez que esté listo para iniciar, simplemente puede actualizar la tienda a un plan pagado o implementar el tema en otra tienda.
Theme Kit ofrece una serie de comandos útiles que le permiten interactuar con temas mientras trabaja en un entorno de desarrollo local. Una vez configurado, puede utilizar el
relojcomando que iniciará un proceso para monitorear su directorio en busca de cambios y subirlos a Shopify.Shopify no puede ser realmente "local" (de ahí las citas) ya que necesitará una conexión a Internet para trabajar con una tienda de desarrollo, pero la integración de Theme Kit en su flujo de trabajo lo hace sentir "local". Utilizado junto con herramientas como Prepros, también puede aprovechar la carga en vivo de su tienda de desarrollo, así como la reducción y concatenación de archivos..
En 2017, Shopify también lanzó Slate: un andamio de tema de código abierto y una herramienta de línea de comandos para desarrollar temas de Shopify. Está diseñado para ayudar a su flujo de trabajo de desarrollo y acelerar el proceso de desarrollo, prueba y despliegue de temas en tiendas Shopify.
Mientras que ThemeKit te ayuda en un área, Slate va mucho más allá. Además de proporcionar las capacidades de sincronización de temas de ThemeKit (ThemeKit en realidad es parte de Slate), también le permite implementar en múltiples entornos al mismo tiempo, crear plantillas de esqueleto para un nuevo tema y organizar hojas de estilo y scripts de manera flexible..
Las plantillas de andamio de Slate están "intencionalmente en blanco" (página de inicio que se muestra a continuación): las etiquetas y la lógica líquidas que probablemente se usarán en cada plantilla se han incluido con poco o ningún margen de beneficio, clases u otro código que deberá eliminar. Está pensado como un punto de inicio totalmente funcional: todo lo que necesita hacer es completar los espacios en blanco y estará listo y funcionando..
Finalmente, hay un montón de ayudantes de JavaScript y Sass que puedes usar, o no si necesitas incluir:
JavaScript
- Enfoque de la trampa
- Tablas y videos receptivos
- Formato de moneda
- Ayudantes de imagen
- Variantes de producto
- Carro ayudantes
- Seccion eventos
CSS
- Puntos de interrupción y consultas de medios
- Cuadrícula
- Iconos de SVG
- Tablas responsivas
- Estados en blanco
- Mixins Sass
5. Polaris
En mayo de 2017, Shopify actualizó la apariencia de todas sus aplicaciones: tanto en el escritorio como en el móvil. Para poder lograr este ambicioso objetivo, el equipo de UX en Shopify desarrolló un nuevo sistema de diseño llamado Polaris. Es un sistema con todas las funciones que no solo está diseñado para uso interno en Shopify, sino también para los socios de Shopify que están creando interfaces para aplicaciones que se integran a través de la API de Shopify. Su objetivo es proporcionar a todos los componentes básicos para crear interfaces que parezcan perfectas con el administrador central de Sho
% endif% % endfor% % schema% "name": "Bloques promocionales", "max_blocks": 5, "presets": ["name": "Bloques promocionales", "category": "Contenido de la página de inicio personalizado"], "bloques": ["tipo": "caja de promo", "nombre": "Caja promocional", "límite": 1, "configuración": ["id": " title "," type ":" text "," label ":" Title "," default ":" your title here ", " id ":" description "," type ":" textarea "," label " : "Descripción", "predeterminado": "su descripción aquí"], "tipo": "selector de imagen", "nombre": "Imagen de promoción", "configuración": ["id": "promoción -imagen "," tipo ":" image_picker "," label ":" Promo Image "]] % endschema% % stylesheet% % endstylesheet% % javascript% % endjavascript%
