Se pueden definir hasta 5 estilos diferentes con los que mostrar los bloques de Display Widgets.

Las configuraciones para indicar formas, tamaños, colores e imágenes con los que se mostrarán los bloques de Display Widgets se definen a continuación. 

Existen 3 formas para de Display Widget: Circle, Box y Label. 

Circle y Box tienen un tamaño fijo que dependerá del Size elegido, Label por el contrario, se expande de acuerdo al contenido que contiene. Otro aspecto que los diferencia es que las 3 áreas de contenido en Circle y Box, están una encima de otra, anterior, central y posterior están en larte superior, medio e inferior respectivamente del DW mientras que en Label, está a la izquierda, al centro y la derecha del DW.

ToDo: 3 imágenes con cada una de las formas.

Existen 5 tamaños de bloques que definen esencialmente el ancho del display widget y el tamaño del texto, a excepción de formato Label que se expande de acuerdo al contenido:

• Small: 19%
• Medium: 22%
• Large: 25%
• Big: 45%
• Full: 100%

El tamaño full, que usa el 100% del espacio, por ejemplo, sobre la imagen del producto ocuparía todo el ancho de la misma, suele usarse combinado con una Background image para sobre poner una imagen PNG con transparencia y ubicar badges, textos y cualquier gráfico en el lugar de la imagen que se desee, incluso podría ser como una especie de máscara que se sobreimprima a la imagen del produto.

El tamaño de los textos depende del tamaño del display widget y de la cantidad de texto. Display Widget calcula automáticamente el tamaño de la fuente aunque aplica límites tratando de que el texto se mantenga legible.

Finalmente, las imágenes que se incluyan en el contenido del bloque utilizando el Image token están en relación con el tanaño del texto y por lo tanto en relación con el tamaño del bloque. 

ToDo: Actualizar las imágenes cuando se corrijan los temas de centrado, ilustrar una aplicación del full con imagen de fondo

Esta opción hace que el texto no se achique tanto y se expanda en sucesivas líneas aumentando el tamaño vertical del bloque.

Define el color del texto en el DW.

Define el color del fondo del bloque, este color estará por debajo del contenido e incluso por debajo de la imagen de fondo si es que se define una. Es decir, si la imagen tiene partes transparentes, se verá el color fijado como fondo en las partes transparentes.

Un número de 0 a 100 que define la opacidad del fondo del DW, 0 es totalmente transparente, 100 es totalmente opaco. Aplicado en un DW ubicado sobre la imagen permite crear display muy delicados.

Esta opacidad se aplica sobre el color y/o imagen de fondo.

ToDo: Un par de ejemplos con diferente opacidad para DW con color de fondo y otro con imagen de fondo.

Esta opción permite definir una imagen de fondo para el bloque. Debe ingresarse el nombre de la imagen la que debe cargarse en el Image Manager de BigCommerce, si no se indica extensión del archivo, Display Widget buscará una imagen png con ese nombre.

La imagen de fondo básicamente tiene dos objetivos, utilizarla para decorar un bloque o directamente para mostrar esa imagen en el bloque, en este último caso, suele usarse con Fit size to background image (siguiente opción).

Por ejemplo, en la imagen se ve una aplicación para destacar productos que intervienen en una campaña de Black Friday.

ToDo: Armar un gráfico que deje un espacio para poner el precio, de manera que el precio quede encerrado por el gráfico, algo que podría utilizarse en una campaña, por ejemplo, para Navidad.

Al habilitar esta opción, el alto del bloque de display widget se ajusta de manera que la imagen ocupe el ancho correspondiente al tamaño del bloque elegido, siempre manteniendo las proporciones de la imagen, es decir, sin deformarla.

ToDo: Con la imagen de Black friday, poner dos widgets, uno top left y otro bottom right, aplicarle un fondo semi transparente de manera que quede claro el área que cubre el bloque y poner big al de arriba y medium al de abajo. 

ToDo: Ver si se mantiene